Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

React Smart Table Component

Dynamic table component.

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#

Name
Registered
Role
Status
Avram Tarasios2022/02/07StaffBanned

User since: 2022/02/07

Nehemiah Tatius2022/02/07StaffBanned

User since: 2022/02/07

Paĉjo Jadon2022/02/07StaffBanned

User since: 2022/02/07

Zbyněk Phoibos2022/02/07StaffBanned

User since: 2022/02/07

Ford Prefect2001/05/25AlienDon't panic!

User since: 2001/05/25

Name
Registered
Role
Status
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#

Id
Name
Registered
Role
Status
0John Doe2022/01/01GuestPending
1Samppa Nori2022/01/01MemberActive
2Estavan Lykos2022/02/07StaffBanned
3Chetan Mohamed2022/02/07AdminInactive
4Derick Maximinus2022/03/19MemberPending
5Friderik Dávid2022/01/21StaffActive
6Yiorgos Avraamu2022/01/01MemberActive
7Avram Tarasios2022/02/07StaffBanned
8Quintin Ed2022/02/07AdminInactive
9Enéas Kwadwo2022/03/19MemberPending
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#

Date Range Picker#

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

Multi Select#

Name
Role
John DoeGuest
Samppa NoriMember
Estavan LykosStaff
Chetan MohamedAdmin
Derick MaximinusMember
Friderik DávidStaff
Yiorgos AvraamuMember
Avram TarasiosStaff
Quintin EdAdmin
Enéas KwadwoMember
Name
Role
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)

External Data#

Fetch#

No items found
1const [users, setUsers] = useState([])
2const downloadUsers = useCallback(() => {
3 fetch('https://jsonplaceholder.typicode.com/users')
4 .then((response) => response.json())
5 .then((result) => {
6 setUsers(result)
7 })
8}, [])
9useEffect(() => {
10 downloadUsers()
11}, [downloadUsers])
12return (
13 <CSmartTable
14 items={users}
15 columnFilter
16 columnSorter
17 pagination
18 tableProps={{
19 hover: true,
20 responsive: true,
21 }}
22 />
23)

Axios#

No items found
1const [users, setUsers] = useState([])
2useEffect(() => {
3 const fetchData = async () => {
4 const { data } = await axios('https://jsonplaceholder.typicode.com/users')
5 setUsers(data)
6 }
7 setTimeout(() => {
8 fetchData()
9 }, 2000)
10}, [setUsers])
11return (
12 <CSmartTable
13 items={users}
14 columnFilter
15 columnSorter
16 pagination
17 tableProps={{
18 hover: true,
19 responsive: true,
20 }}
21 />
22)

API#

CSmartTable#

1import { CSmartTable } from '@coreui/react-pro'
2// or
3import CSmartTable from '@coreui/react-pro/src/components/smart-table/CSmartTable'
PropertyDescriptionTypeDefault
activePageSets active page. If 'pagination' prop is enabled, activePage is set only initially.number1
cleanerWhen 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-
clickableRowsStyle table items as clickable.boolean-
columnFilterWhen 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-
columnFilterValueValue of table filter. To set pass object where keys are column names and values are filter strings e.g.:
{ user: 'John', age: 12 }
ColumnFilterValue-
columnSorterEnables 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-
columnsProp 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)[]-
footerDisplays table footer, which mirrors table header. (without column filter).boolean-
headerSet to false to remove table header.booleantrue
itemsArray of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_classes' key and to single cell by '_cellClasses'.

Example item:
{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
For column generation description watch columns prop.
Array<string>-
itemsPerPageNumber of items per site, when pagination is enabled.number10
itemsPerPageLabelLabel for items per page selector.stringItems per page:
itemsPerPageOptionsItems per page selector options.number[][5, 10, 20, 50]
itemsPerPageSelectAdds 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-
loadingWhen set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.boolean-
noItemsLabelReactNode or string for passing custom noItemsLabel texts.ReactNodeNo items found
onActivePageChangePage change callback.(value: number) => void-
onColumnFilterChangeColumn filter change callback.(value: ColumnFilterValue) => void-
onFilteredItemsChangeFiltered items change callback.(items: Item[]) => void-
onItemsPerPageChangePagination change callback.(value: number) => void-
onRowClickRow click callback.(item: Item, index: number, columnName: string, event: boolean | MouseEvent<Element, MouseEvent>) => void-
onSelectedItemsChangeSelected items change callback.(items: Item[]) => void-
onSorterChangeSorter value change callback.(value: SorterValue) => void-
onTableFilterChangeTable filter change callback.(value?: string) => void-
paginationEnables 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-
paginationPropsProperties to CSmartPagination component.CSmartPaginationProps-
scopedColumnsScoped columns.scopedColumns-
selectableAdd checkboxes to make table rows selectable.boolean-
sorterValueState of the sorter. Name key is column name, direction can be 'asc' or 'desc'.SorterValue-
sortingIconSorter icon when items are unsorted.ReactNode<CIcon width={18} icon={cilSwapVertical} key="csv" />
sortingIconAscendingSorter icon when items are sorted ascending.ReactNode<CIcon width={18} icon={cilArrowTop} key="cat" />
sortingIconDescendingSorter icon when items are sorted descending.ReactNode<CIcon width={18} icon={cilArrowBottom} key="cab" />
tableBodyPropsProperties to CTableBody component.CTableBodyProps-
tableFilterWhen 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-
tableFilterLabelThe element represents a caption for a component.stringFilter:
tableFilterPlaceholderSpecifies a short hint that is visible in the search input.stringtype string...
tableFilterValueValue of table filter.string-
tableFootPropsProperties to CTableFoot component.CTableFootProps-
tableHeadPropsProperties to CTableHead component.CTableHeadProps-
tablePropsProperties to CTable component.CTableProps-