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.
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.
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
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 | |||||
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 <CSmartTable124 activePage={3}125 cleaner126 clickableRows127 columns={columns}128 columnFilter129 columnSorter130 footer131 items={usersData}132 itemsPerPageSelect133 itemsPerPage={5}134 pagination135 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 <CButton145 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 Settings166 </CButton>167 <CButton size="sm" color="danger" className="ml-1">168 Delete169 </CButton>170 </CCardBody>171 </CCollapse>172 )173 },174 }}175 selectable176 sorterValue={{ column: 'name', state: 'asc' }}177 tableFilter178 tableHeadProps={{179 color: 'danger',180 }}181 tableProps={{182 striped: true,183 hover: true,184 }}185 />186)
By default, React Table component will generate the header labels for each column based on the column's data source.
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 <CSmartTable129 items={usersData}130 columnFilter131 columnSorter132 pagination133 tableProps={{134 hover: true,135 }}136 />137)
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.
Here is an example of how you might use the <CDateRangePicker />
component to apply custom filters to a React DataTable component:
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 |
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 <CDateRangePicker91 footer92 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 >= date103 }104 return true105 })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 <= date113 }114 return true115 })116 }}117 />118 )119 },120 },121]122const convertToDate = (date) => {123 const _date = new Date(Date.parse(date))124 return _date.toLocaleDateString()125}126return (127 <CSmartTable128 activePage={1}129 cleaner130 clickableRows131 columns={columns}132 columnFilter133 columnFilterValue={{134 registered: (date) =>135 new Date(Date.parse(date)) >= startDate && new Date(Date.parse(date)) <= endDate,136 }}137 columnSorter138 footer139 items={usersData}140 itemsPerPageSelect141 itemsPerPage={10}142 pagination143 scopedColumns={{144 registered: (item) => <td>{convertToDate(item.registered)}</td>,145 }}146 tableFilter147 />148)
Here is an example of how you might use the <CMultiSelect />
component to apply custom filters to a React DataTable:
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 |
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 <CMultiSelect13 size="sm"14 onChange={(selected) => {15 const _selected = selected.map((element) => {16 return element.value17 })18 onChange((item) => {19 return Array.isArray(_selected) && _selected.length20 ? _selected.includes(item.toLowerCase())21 : true22 })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 <CSmartTable101 cleaner102 clickableRows103 columns={columns}104 columnFilter105 columnSorter106 footer107 items={usersData}108 itemsPerPageSelect109 itemsPerPage={10}110 pagination111 tableFilter112 />113)
You can use Fetch API to load data from different sources and then pass them to <CSmartTable>
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:
No items found | ||||
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 - itemsPerPage28 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 <CSmartTable44 columns={columns}45 columnFilter={{46 external: true,47 }}48 columnSorter={{49 external: true,50 }}51 items={users}52 itemsPerPage={itemsPerPage}53 itemsPerPageSelect54 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)
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 />
.
No items found | ||||
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 <CSmartTable34 columns={columns}35 columnFilter36 columnSorter37 footer38 items={users}39 itemsPerPageSelect40 loading={loading}41 pagination42 tableProps={{43 hover: true,44 responsive: true,45 }}46 />47 )48}
1import { CSmartTable } from '@coreui/react-pro'2// or3import 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 | - |