CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

React Smart Table Component (DataTable)

A React Smart Table provides a full set of features for displaying and manipulating tabular data. It allows you to easily create dynamic and interactive tables with features such as sorting, filtering, pagination, and searching. React Smart Table Component (DataTables) makes it easy to work with large datasets, and it is widely used in a variety of applications, including web-based applications, e-commerce sites, and more.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

Features#

Filter items by one or all columns
Sort items by column
Integrated with CPagination component by default
Customize style of specific rows, columns and cells
Customize display of columns
Load with initial filters and sorter state
Loading state visualization
Default header labels generation based on column names

Basic usage#

Filter:

	Name	Registered	Role	Status

	Avram Tarasios	2022/02/07	Staff	Banned

User since: 2022/02/07
	Nehemiah Tatius	2022/02/07	Staff	Banned

User since: 2022/02/07
	Paĉjo Jadon	2022/02/07	Staff	Banned

User since: 2022/02/07
	Zbyněk Phoibos	2022/02/07	Staff	Banned

User since: 2022/02/07
	Ford Prefect	2001/05/25	Alien	Don't panic!

User since: 2001/05/25
	Name	Registered	Role	Status

Items per page:

1const [details, setDetails] = useState([])
2const columns = [
3  {
4    key: 'name',
5    _style: { width: '40%' },
6    _props: { color: 'primary', className: 'fw-semibold' },
7  },
8  'registered',
9  { key: 'role', filter: false, sorter: false, _style: { width: '20%' } },
10  { key: 'status', _style: { width: '20%' } },
11  {
12    key: 'show_details',
13    label: '',
14    _style: { width: '1%' },
15    filter: false,
16    sorter: false,
17    _props: { color: 'primary', className: 'fw-semibold' },
18  },
19]
20const usersData = [
21  { id: 0, name: 'John Doe', registered: '2022/01/01', role: 'Guest', status: 'Pending' },
22  {
23    id: 1,
24    name: 'Samppa Nori',
25    registered: '2022/01/01',
26    role: 'Member',
27    status: 'Active',
28    _props: { color: 'primary', align: 'middle' },
29  },
30  {
31    id: 2,
32    name: 'Estavan Lykos',
33    registered: '2022/02/07',
34    role: 'Staff',
35    status: 'Banned',
36    _cellProps: { all: { className: 'fw-semibold' }, name: { color: 'info' } },
37  },
38  { id: 3, name: 'Chetan Mohamed', registered: '2022/02/07', role: 'Admin', status: 'Inactive' },
39  {
40    id: 4,
41    name: 'Derick Maximinus',
42    registered: '2022/03/19',
43    role: 'Member',
44    status: 'Pending',
45  },
46  { id: 5, name: 'Friderik Dávid', registered: '2022/01/21', role: 'Staff', status: 'Active' },
47  { id: 6, name: 'Yiorgos Avraamu', registered: '2022/01/01', role: 'Member', status: 'Active' },
48  {
49    id: 7,
50    name: 'Avram Tarasios',
51    registered: '2022/02/07',
52    role: 'Staff',
53    status: 'Banned',
54    _props: { color: 'warning', align: 'middle' },
55  },
56  { id: 8, name: 'Quintin Ed', registered: '2022/02/07', role: 'Admin', status: 'Inactive' },
57  { id: 9, name: 'Enéas Kwadwo', registered: '2022/03/19', role: 'Member', status: 'Pending' },
58  { id: 10, name: 'Agapetus Tadeáš', registered: '2022/01/21', role: 'Staff', status: 'Active' },
59  { id: 11, name: 'Carwyn Fachtna', registered: '2022/01/01', role: 'Member', status: 'Active' },
60  { id: 12, name: 'Nehemiah Tatius', registered: '2022/02/07', role: 'Staff', status: 'Banned' },
61  { id: 13, name: 'Ebbe Gemariah', registered: '2022/02/07', role: 'Admin', status: 'Inactive' },
62  {
63    id: 14,
64    name: 'Eustorgios Amulius',
65    registered: '2022/03/19',
66    role: 'Member',
67    status: 'Pending',
68  },
69  { id: 15, name: 'Leopold Gáspár', registered: '2022/01/21', role: 'Staff', status: 'Active' },
70  { id: 16, name: 'Pompeius René', registered: '2022/01/01', role: 'Member', status: 'Active' },
71  { id: 17, name: 'Paĉjo Jadon', registered: '2022/02/07', role: 'Staff', status: 'Banned' },
72  {
73    id: 18,
74    name: 'Micheal Mercurius',
75    registered: '2022/02/07',
76    role: 'Admin',
77    status: 'Inactive',
78  },
79  {
80    id: 19,
81    name: 'Ganesha Dubhghall',
82    registered: '2022/03/19',
83    role: 'Member',
84    status: 'Pending',
85  },
86  { id: 20, name: 'Hiroto Šimun', registered: '2022/01/21', role: 'Staff', status: 'Active' },
87  { id: 21, name: 'Vishnu Serghei', registered: '2022/01/01', role: 'Member', status: 'Active' },
88  { id: 22, name: 'Zbyněk Phoibos', registered: '2022/02/07', role: 'Staff', status: 'Banned' },
89  { id: 23, name: 'Aulus Agmundr', registered: '2022/01/01', role: 'Member', status: 'Pending' },
90  {
91    id: 42,
92    name: 'Ford Prefect',
93    registered: '2001/05/25',
94    role: 'Alien',
95    status: "Don't panic!",
96  },
97]
98const getBadge = (status) => {
99  switch (status) {
100    case 'Active':
101      return 'success'
102    case 'Inactive':
103      return 'secondary'
104    case 'Pending':
105      return 'warning'
106    case 'Banned':
107      return 'danger'
108    default:
109      return 'primary'
110  }
111}
112const toggleDetails = (index) => {
113  const position = details.indexOf(index)
114  let newDetails = details.slice()
115  if (position !== -1) {
116    newDetails.splice(position, 1)
117  } else {
118    newDetails = [...details, index]
119  }
120  setDetails(newDetails)
121}
122return (
123  <CSmartTable
124    activePage={3}
125    cleaner
126    clickableRows
127    columns={columns}
128    columnFilter
129    columnSorter
130    footer
131    items={usersData}
132    itemsPerPageSelect
133    itemsPerPage={5}
134    pagination
135    scopedColumns={{
136      status: (item) => (
137        <td>
138          <CBadge color={getBadge(item.status)}>{item.status}</CBadge>
139        </td>
140      ),
141      show_details: (item) => {
142        return (
143          <td className="py-2">
144            <CButton
145              color="primary"
146              variant="outline"
147              shape="square"
148              size="sm"
149              onClick={() => {
150                toggleDetails(item._id)
151              }}
152            >
153              {details.includes(item._id) ? 'Hide' : 'Show'}
154            </CButton>
155          </td>
156        )
157      },
158      details: (item) => {
159        return (
160          <CCollapse visible={details.includes(item._id)}>
161            <CCardBody>
162              <h4>{item.username}</h4>
163              <p className="text-muted">User since: {item.registered}</p>
164              <CButton size="sm" color="info">
165                User Settings
166              </CButton>
167              <CButton size="sm" color="danger" className="ml-1">
168                Delete
169              </CButton>
170            </CCardBody>
171          </CCollapse>
172        )
173      },
174    }}
175    selectable
176    sorterValue={{ column: 'name', state: 'asc' }}
177    tableFilter
178    tableHeadProps={{
179      color: 'danger',
180    }}
181    tableProps={{
182      striped: true,
183      hover: true,
184    }}
185  />
186)

Default header labels generation based on column names#

By default, React Table component will generate the header labels for each column based on the column's data source.

Id	Name	Registered	Role	Status

0	John Doe	2022/01/01	Guest	Pending
1	Samppa Nori	2022/01/01	Member	Active
2	Estavan Lykos	2022/02/07	Staff	Banned
3	Chetan Mohamed	2022/02/07	Admin	Inactive
4	Derick Maximinus	2022/03/19	Member	Pending
5	Friderik Dávid	2022/01/21	Staff	Active
6	Yiorgos Avraamu	2022/01/01	Member	Active
7	Avram Tarasios	2022/02/07	Staff	Banned
8	Quintin Ed	2022/02/07	Admin	Inactive
9	Enéas Kwadwo	2022/03/19	Member	Pending

1const usersData = [
2  { id: 0, name: 'John Doe', registered: '2022/01/01', role: 'Guest', status: 'Pending' },
3  {
4    id: 1,
5    name: 'Samppa Nori',
6    registered: '2022/01/01',
7    role: 'Member',
8    status: 'Active',
9    _props: { color: 'primary', align: 'middle' },
10  },
11  {
12    id: 2,
13    name: 'Estavan Lykos',
14    registered: '2022/02/07',
15    role: 'Staff',
16    status: 'Banned',
17    _cellProps: { all: { className: 'fw-semibold' }, name: { color: 'info' } },
18  },
19  {
20    id: 3,
21    name: 'Chetan Mohamed',
22    registered: '2022/02/07',
23    role: 'Admin',
24    status: 'Inactive',
25  },
26  {
27    id: 4,
28    name: 'Derick Maximinus',
29    registered: '2022/03/19',
30    role: 'Member',
31    status: 'Pending',
32  },
33  { id: 5, name: 'Friderik Dávid', registered: '2022/01/21', role: 'Staff', status: 'Active' },
34  {
35    id: 6,
36    name: 'Yiorgos Avraamu',
37    registered: '2022/01/01',
38    role: 'Member',
39    status: 'Active',
40  },
41  {
42    id: 7,
43    name: 'Avram Tarasios',
44    registered: '2022/02/07',
45    role: 'Staff',
46    status: 'Banned',
47    _props: { color: 'warning', align: 'middle' },
48  },
49  { id: 8, name: 'Quintin Ed', registered: '2022/02/07', role: 'Admin', status: 'Inactive' },
50  { id: 9, name: 'Enéas Kwadwo', registered: '2022/03/19', role: 'Member', status: 'Pending' },
51  {
52    id: 10,
53    name: 'Agapetus Tadeáš',
54    registered: '2022/01/21',
55    role: 'Staff',
56    status: 'Active',
57  },
58  {
59    id: 11,
60    name: 'Carwyn Fachtna',
61    registered: '2022/01/01',
62    role: 'Member',
63    status: 'Active',
64  },
65  {
66    id: 12,
67    name: 'Nehemiah Tatius',
68    registered: '2022/02/07',
69    role: 'Staff',
70    status: 'Banned',
71  },
72  {
73    id: 13,
74    name: 'Ebbe Gemariah',
75    registered: '2022/02/07',
76    role: 'Admin',
77    status: 'Inactive',
78  },
79  {
80    id: 14,
81    name: 'Eustorgios Amulius',
82    registered: '2022/03/19',
83    role: 'Member',
84    status: 'Pending',
85  },
86  { id: 15, name: 'Leopold Gáspár', registered: '2022/01/21', role: 'Staff', status: 'Active' },
87  { id: 16, name: 'Pompeius René', registered: '2022/01/01', role: 'Member', status: 'Active' },
88  { id: 17, name: 'Paĉjo Jadon', registered: '2022/02/07', role: 'Staff', status: 'Banned' },
89  {
90    id: 18,
91    name: 'Micheal Mercurius',
92    registered: '2022/02/07',
93    role: 'Admin',
94    status: 'Inactive',
95  },
96  {
97    id: 19,
98    name: 'Ganesha Dubhghall',
99    registered: '2022/03/19',
100    role: 'Member',
101    status: 'Pending',
102  },
103  { id: 20, name: 'Hiroto Šimun', registered: '2022/01/21', role: 'Staff', status: 'Active' },
104  {
105    id: 21,
106    name: 'Vishnu Serghei',
107    registered: '2022/01/01',
108    role: 'Member',
109    status: 'Active',
110  },
111  { id: 22, name: 'Zbyněk Phoibos', registered: '2022/02/07', role: 'Staff', status: 'Banned' },
112  {
113    id: 23,
114    name: 'Aulus Agmundr',
115    registered: '2022/01/01',
116    role: 'Member',
117    status: 'Pending',
118  },
119  {
120    id: 42,
121    name: 'Ford Prefect',
122    registered: '2001/05/25',
123    role: 'Alien',
124    status: "Don't panic!",
125  },
126]
127return (
128  <CSmartTable
129    items={usersData}
130    columnFilter
131    columnSorter
132    pagination
133    tableProps={{
134      hover: true,
135    }}
136  />
137)

Custom filters#

CoreUI React Smart Table (React DataTables) provides a number of built-in features for filtering, searching, and sorting data, including the ability to use custom filtering functions.

To use a custom filter in React Smart Table (DataTables), you can use the filter option to specify a custom filter for each column.

Date Range Picker#

Here is an example of how you might use the <CDateRangePicker /> component to apply custom filters to a React DataTable component:

Filter:

Name

Registered

Estavan Lykos

2/7/2022

Chetan Mohamed

2/7/2022

Avram Tarasios

2/7/2022

Quintin Ed

2/7/2022

Nehemiah Tatius

2/7/2022

Ebbe Gemariah

2/7/2022

Paĉjo Jadon

2/7/2022

Micheal Mercurius

2/7/2022

Zbyněk Phoibos

2/7/2022

Name

Registered

Items per page:

1const usersData = [
2  { id: 0, name: 'John Doe', registered: '2022/01/01' },
3  {
4    id: 1,
5    name: 'Samppa Nori',
6    registered: '2022/01/01',
7  },
8  {
9    id: 2,
10    name: 'Estavan Lykos',
11    registered: '2022/02/07',
12  },
13  { id: 3, name: 'Chetan Mohamed', registered: '2022/02/07' },
14  {
15    id: 4,
16    name: 'Derick Maximinus',
17    registered: '2022/03/19',
18  },
19  { id: 5, name: 'Friderik Dávid', registered: '2022/01/21' },
20  { id: 6, name: 'Yiorgos Avraamu', registered: '2022/01/01' },
21  {
22    id: 7,
23    name: 'Avram Tarasios',
24    registered: '2022/02/07',
25  },
26  { id: 8, name: 'Quintin Ed', registered: '2022/02/07' },
27  { id: 9, name: 'Enéas Kwadwo', registered: '2022/03/19', role: 'Member', status: 'Pending' },
28  { id: 10, name: 'Agapetus Tadeáš', registered: '2022/01/21' },
29  { id: 11, name: 'Carwyn Fachtna', registered: '2022/01/01' },
30  { id: 12, name: 'Nehemiah Tatius', registered: '2022/02/07' },
31  { id: 13, name: 'Ebbe Gemariah', registered: '2022/02/07' },
32  {
33    id: 14,
34    name: 'Eustorgios Amulius',
35    registered: '2022/03/19',
36  },
37  { id: 15, name: 'Leopold Gáspár', registered: '2022/01/21' },
38  { id: 16, name: 'Pompeius René', registered: '2022/01/01' },
39  { id: 17, name: 'Paĉjo Jadon', registered: '2022/02/07' },
40  {
41    id: 18,
42    name: 'Micheal Mercurius',
43    registered: '2022/02/07',
44  },
45  {
46    id: 19,
47    name: 'Ganesha Dubhghall',
48    registered: '2022/03/19',
49  },
50  { id: 20, name: 'Hiroto Šimun', registered: '2022/01/21' },
51  { id: 21, name: 'Vishnu Serghei', registered: '2022/01/01' },
52  { id: 22, name: 'Zbyněk Phoibos', registered: '2022/02/07' },
53  {
54    id: 23,
55    name: 'Aulus Agmundr',
56    registered: '2022/01/01',
57  },
58  {
59    id: 42,
60    name: 'Ford Prefect',
61    registered: '2022/05/25',
62  },
63]
64const [startDate, setStartDate] = useState(new Date('2022-01-01'))
65const [endDate, setEndDate] = useState(new Date('2022-03-19'))
66const minDate = new Date(
67  Math.min(
68    ...usersData.map((element) => {
69      return new Date(Date.parse(element.registered))
70    }),
71  ),
72)
73const maxDate = new Date(
74  Math.max(
75    ...usersData.map((element) => {
76      return new Date(Date.parse(element.registered))
77    }),
78  ),
79)
80const columns = [
81  {
82    key: 'name',
83    _style: { width: '50%' },
84  },
85  {
86    key: 'registered',
87    _style: { width: '50%' },
88    filter: (values, onChange) => {
89      return (
90        <CDateRangePicker
91          footer
92          size="sm"
93          startDate={startDate}
94          endDate={endDate}
95          minDate={minDate}
96          maxDate={maxDate}
97          onStartDateChange={(date) => {
98            setStartDate(date)
99            onChange((item) => {
100              if (date) {
101                const itemDate = new Date(Date.parse(item))
102                return endDate ? itemDate >= date && itemDate <= endDate : itemDate >= date
103              }
104              return true
105            })
106          }}
107          onEndDateChange={(date) => {
108            setEndDate(date)
109            onChange((item) => {
110              if (date) {
111                const itemDate = new Date(Date.parse(item))
112                return startDate ? itemDate <= date && itemDate >= startDate : itemDate <= date
113              }
114              return true
115            })
116          }}
117        />
118      )
119    },
120  },
121]
122const convertToDate = (date) => {
123  const _date = new Date(Date.parse(date))
124  return _date.toLocaleDateString()
125}
126return (
127  <CSmartTable
128    activePage={1}
129    cleaner
130    clickableRows
131    columns={columns}
132    columnFilter
133    columnFilterValue={{
134      registered: (date) =>
135        new Date(Date.parse(date)) >= startDate && new Date(Date.parse(date)) <= endDate,
136    }}
137    columnSorter
138    footer
139    items={usersData}
140    itemsPerPageSelect
141    itemsPerPage={10}
142    pagination
143    scopedColumns={{
144      registered: (item) => <td>{convertToDate(item.registered)}</td>,
145    }}
146    tableFilter
147  />
148)

Multi Select#

Here is an example of how you might use the <CMultiSelect /> component to apply custom filters to a React DataTable:

Filter:

Name	Role

John Doe	Guest
Samppa Nori	Member
Estavan Lykos	Staff
Chetan Mohamed	Admin
Derick Maximinus	Member
Friderik Dávid	Staff
Yiorgos Avraamu	Member
Avram Tarasios	Staff
Quintin Ed	Admin
Enéas Kwadwo	Member
Name	Role

Items per page:

1const columns = [
2  {
3    key: 'name',
4    _style: { width: '50%' },
5  },
6  {
7    key: 'role',
8    _style: { width: '50%' },
9    filter: (values, onChange) => {
10      const unique = [...new Set(values)].sort()
11      return (
12        <CMultiSelect
13          size="sm"
14          onChange={(selected) => {
15            const _selected = selected.map((element) => {
16              return element.value
17            })
18            onChange((item) => {
19              return Array.isArray(_selected) && _selected.length
20                ? _selected.includes(item.toLowerCase())
21                : true
22            })
23          }}
24          options={unique.map((element) => {
25            return {
26              value: element.toLowerCase(),
27              text: element,
28            }
29          })}
30        />
31      )
32    },
33    sorter: false,
34  },
35]
36const usersData = [
37  { id: 0, name: 'John Doe', role: 'Guest' },
38  {
39    id: 1,
40    name: 'Samppa Nori',
41    role: 'Member',
42  },
43  {
44    id: 2,
45    name: 'Estavan Lykos',
46    role: 'Staff',
47  },
48  { id: 3, name: 'Chetan Mohamed', role: 'Admin' },
49  {
50    id: 4,
51    name: 'Derick Maximinus',
52    role: 'Member',
53  },
54  { id: 5, name: 'Friderik Dávid', role: 'Staff' },
55  { id: 6, name: 'Yiorgos Avraamu', role: 'Member' },
56  {
57    id: 7,
58    name: 'Avram Tarasios',
59    role: 'Staff',
60  },
61  { id: 8, name: 'Quintin Ed', role: 'Admin' },
62  { id: 9, name: 'Enéas Kwadwo', role: 'Member' },
63  { id: 10, name: 'Agapetus Tadeáš', role: 'Staff' },
64  { id: 11, name: 'Carwyn Fachtna', role: 'Member' },
65  { id: 12, name: 'Nehemiah Tatius', role: 'Staff' },
66  { id: 13, name: 'Ebbe Gemariah', role: 'Admin' },
67  {
68    id: 14,
69    name: 'Eustorgios Amulius',
70    role: 'Member',
71  },
72  { id: 15, name: 'Leopold Gáspár', role: 'Staff' },
73  { id: 16, name: 'Pompeius René', role: 'Member' },
74  { id: 17, name: 'Paĉjo Jadon', role: 'Staff' },
75  {
76    id: 18,
77    name: 'Micheal Mercurius',
78    role: 'Admin',
79  },
80  {
81    id: 19,
82    name: 'Ganesha Dubhghall',
83    role: 'Member',
84  },
85  { id: 20, name: 'Hiroto Šimun', role: 'Staff' },
86  { id: 21, name: 'Vishnu Serghei', role: 'Member' },
87  { id: 22, name: 'Zbyněk Phoibos', role: 'Staff' },
88  {
89    id: 23,
90    name: 'Aulus Agmundr',
91    role: 'Member',
92  },
93  {
94    id: 42,
95    name: 'Ford Prefect',
96    role: 'Alien',
97  },
98]
99return (
100  <CSmartTable
101    cleaner
102    clickableRows
103    columns={columns}
104    columnFilter
105    columnSorter
106    footer
107    items={usersData}
108    itemsPerPageSelect
109    itemsPerPage={10}
110    pagination
111    tableFilter
112  />
113)

Data sources#

You can use Fetch API to load data from different sources and then pass them to <CSmartTable>

External Data (10.000+ records)#

One of the key features of React Smart Table (React DataTables) is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don't want to load all at once. To load external data into a React Smart Table (React DataTables), you can use the Fetch API to the data source.

Here is an example of how you might use React Smart Table with external data:

First Name	Last Name	Email	Country	IP

No items found
First Name	Last Name	Email	Country	IP

Items per page:

1const [activePage, setActivePage] = useState(3)
2const [columnFilter, setColumnFilter] = useState([])
3const [columnSorter, setColumnSorter] = useState(null)
4const [itemsPerPage, setItemsPerPage] = useState(10)
5const [users, setUsers] = useState([])
6const [records, setRecords] = useState([])
7const columns = [
8  {
9    key: 'first_name',
10    _style: { minWidth: '130px' },
11  },
12  {
13    key: 'last_name',
14    _style: { minWidth: '130px' },
15  },
16  'email',
17  {
18    key: 'country',
19    _style: { minWidth: '120px' },
20  },
21  {
22    key: 'ip_address',
23    label: 'IP',
24  },
25]
26const getUsers = useEffect(() => {
27  const offset = itemsPerPage * activePage - itemsPerPage
28  let params = new URLSearchParams()
29  Object.keys(columnFilter).forEach((key) => {
30    params.append(key, columnFilter[key])
31  })
32  columnSorter &&
33    columnSorter.column !== undefined &&
34    params.append('sort', `${columnSorter.column}%${columnSorter.state}`)
35  fetch(`https://apitest.coreui.io/demos/users?offset=${offset}&limit=${itemsPerPage}&${params}`)
36    .then((response) => response.json())
37    .then((result) => {
38      setRecords(result.number_of_matching_records)
39      result.number_of_matching_records ? setUsers(result.records) : setUsers([])
40    })
41}, [activePage, columnFilter, columnSorter, itemsPerPage])
42return (
43  <CSmartTable
44    columns={columns}
45    columnFilter={{
46      external: true,
47    }}
48    columnSorter={{
49      external: true,
50    }}
51    items={users}
52    itemsPerPage={itemsPerPage}
53    itemsPerPageSelect
54    pagination={{
55      external: true,
56    }}
57    paginationProps={{
58      activePage: activePage,
59      pages: Math.ceil(records / itemsPerPage) || 1,
60    }}
61    tableProps={{
62      hover: true,
63      responsive: true,
64    }}
65    onActivePageChange={(activePage) => setActivePage(activePage)}
66    onColumnFilterChange={(filter) => {
67      setActivePage(1)
68      setColumnFilter(filter)
69    }}
70    onItemsPerPageChange={(itemsPerPage) => {
71      setActivePage(1)
72      setItemsPerPage(itemsPerPage)
73    }}
74    onSorterChange={(sorter) => setColumnSorter(sorter)}
75  />
76)

JSON (10.000+ records)#

The Fetch API can be used to load JSON data by making a GET request to the endpoint where the data is located. In this example, the fetch() method is used to make a GET request to the endpoint https://apitest.coreui.io/fake_data/users.json, which returns a response. The response.json() method is then used to parse the response as a JSON object. The resulting JSON object is stored in the users and loaded by <CSmartTable />.

First Name	Last Name	Email	Country	IP

No items found
First Name	Last Name	Email	Country	IP

Items per page:

1export const JSONDataExample = () => {
2  const [loading, setLoading] = useState()
3  const [users, setUsers] = useState([])
4  const columns = [
5    {
6      key: 'first_name',
7      _style: { minWidth: '130px' },
8    },
9    {
10      key: 'last_name',
11      _style: { minWidth: '130px' },
12    },
13    'email',
14    {
15      key: 'country',
16      _style: { minWidth: '120px' },
17    },
18    {
19      key: 'ip_address',
20      label: 'IP',
21    },
22  ]
23  const getUsers = useEffect(() => {
24    setLoading(true)
25    fetch('https://apitest.coreui.io/fake_data/users.json')
26      .then((response) => response.json())
27      .then((result) => {
28        setUsers(result)
29        setLoading(false)
30      })
31  }, [])
32  return (
33    <CSmartTable
34      columns={columns}
35      columnFilter
36      columnSorter
37      footer
38      items={users}
39      itemsPerPageSelect
40      loading={loading}
41      pagination
42      tableProps={{
43        hover: true,
44        responsive: true,
45      }}
46    />
47  )
48}

API#

CSmartTable#

1import { CSmartTable } from '@coreui/react-pro'
2// or
3import CSmartTable from '@coreui/react-pro/src/components/smart-table/CSmartTable'

Property	Description	Type	Default
activePage	Sets active page. If 'pagination' prop is enabled, activePage is set only initially.	`number`	1
cleaner	When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set) Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.	`boolean`	-
clickableRows	Style table items as clickable.	`boolean`	-
columnFilter	When set, displays additional filter row between table header and items, allowing filtering by specific column. Column filter can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic filtering inside component. - lazy (Boolean) - Set to true to trigger filter updates only on change event.	`boolean` \| `ColumnFilter`	-
columnFilterValue	Value of table filter. To set pass object where keys are column names and values are filter strings e.g.: `{ user: 'John', age: 12 }`	`ColumnFilterValue`	-
columnSorter	Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number. Sorter can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic sorting inside component. - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.	`boolean` \| `Sorter`	-
columns	Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_classes') In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration: - key (required)(String) - define column name equal to item key. - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word. - _classes (String/Array/Object) - adds classes to all cels in column - _style (String/Array/Object) - adds styles to the column header (useful for defining widths) - sorter (Boolean) - disables sorting of the column when set to false - filter (Boolean) - removes filter from column when set to false.	`(string` \| `Column)[]`	-
footer	If `true` Displays table footer, which mirrors table header. (without column filter). Or Array of objects or strings, where each element represents one cell in the table footer. Example items: `['FooterCell', 'FooterCell', 'FooterCell']` or `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`	`boolean` \| `FooterItem[]` \| `string[]`	-
header	Set to false to remove table header.	`boolean`	true
items	Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'. Example item: `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`	`Item[]`	-
itemsPerPage	Number of items per site, when pagination is enabled.	`number`	10
itemsPerPageLabel	Label for items per page selector.	`string`	Items per page:
itemsPerPageOptions	Items per page selector options.	`number[]`	[5, 10, 20, 50]
itemsPerPageSelect	Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values: - label (String) - replaces default label text - values (Array) - custom array of pagination values - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).	`boolean` \| `ItemsPerPageSelect`	-
loading	When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.	`boolean`	-
noItemsLabel	ReactNode or string for passing custom noItemsLabel texts.	`ReactNode`	No items found
onActivePageChange	Page change callback.	`(value: number) => void`	-
onColumnFilterChange	Column filter change callback.	`(value: ColumnFilterValue) => void`	-
onFilteredItemsChange	Filtered items change callback.	`(items: Item[]) => void`	-
onItemsPerPageChange	Pagination change callback.	`(value: number) => void`	-
onRowClick	Row click callback.	`(item: Item, index: number, columnName: string, event: boolean` \| `MouseEvent<Element, MouseEvent>) => void`	-
onSelectedItemsChange	Selected items change callback.	`(items: Item[]) => void`	-
onSorterChange	Sorter value change callback.	`(value: SorterValue) => void`	-
onTableFilterChange	Table filter change callback.	`(value?: string) => void`	-
pagination	Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.	`boolean` \| `Pagination`	-
paginationProps	Properties to `CSmartPagination` component - https://coreui.io/react/docs/components/smart-pagination#csmartpagination	`CSmartPaginationProps`	-
scopedColumns	Scoped columns.	`ScopedColumns`	-
selectable	Add checkboxes to make table rows selectable.	`boolean`	-
sorterValue	State of the sorter. Name key is column name, direction can be 'asc' or 'desc'.	`SorterValue`	-
sortingIcon	Sorter icon when items are unsorted.	`ReactNode`
sortingIconAscending	Sorter icon when items are sorted ascending.	`ReactNode`
sortingIconDescending	Sorter icon when items are sorted descending.	`ReactNode`
tableBodyProps	Properties to `CTableBody` component - https://coreui.io/react/docs/components/table/#ctablebody	`CTableBodyProps`	-
tableFilter	When set, displays table filter above table, allowing filtering by specific column. Column filter can be customized, by passing prop as object with additional options as keys. Available options: - external (Boolean) - Disables automatic filtering inside component. - lazy (Boolean) - Set to true to trigger filter updates only on change event.	`boolean` \| `TableFilter`	-
tableFilterLabel	The element represents a caption for a component.	`string`	Filter:
tableFilterPlaceholder	Specifies a short hint that is visible in the search input.	`string`	type string...
tableFilterValue	Value of table filter.	`string`	-
tableFootProps	Properties to `CTableFoot` component - https://coreui.io/react/docs/components/table/#ctablefoot	`CTableFootProps`	-
tableHeadProps	Properties to `CTableHead` component - https://coreui.io/react/docs/components/table/#ctablehead	`CTableHeadProps`	-
tableProps	Properties to `CTable` component - https://coreui.io/react/docs/components/table/#ctable	`CTableProps`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.