import { CTable } from '@coreui/react'// orimport CTable from '@coreui/react/src/components/table/CTable'| Property | Description | Type | Default |
|---|---|---|---|
| align | Set the vertical aligment. | string | - |
| borderColor | Sets the border color of the component to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | - |
| bordered | Add borders on all sides of the table and cells. | boolean | - |
| borderless | Remove borders on all sides of the table and cells. | boolean | - |
| caption | Put the caption on the top if you set caption="top" of the table or set the text of the table caption. | string | - |
| captionTop 4.3.0+ | Set the text of the table caption and the caption on the top of the table. | string | - |
| className | A string of all className you want applied to the component. | string | - |
| color | Sets the color context of the component to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | - |
| columns 4.3.0+ | 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. '_props') 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. - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },- _style (Object) - adds styles to the column header (useful for defining widths) | (string | Column)[] | - |
| footer 4.3.0+ | 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' }, ...] | (string | FooterItem)[] | - |
| hover | Enable a hover state on table rows within a <CTableBody>. | boolean | - |
| items 4.3.0+ | 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[] | - |
| responsive | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | - |
| small | Make table more compact by cutting all cell padding in half. | boolean | - |
| striped | Add zebra-striping to any table row within the <CTableBody>. | boolean | - |
| stripedColumns 4.3.0+ | Add zebra-striping to any table column. | boolean | - |
| tableFootProps 4.3.0+ | Properties that will be passed to the table footer component. | CTableFootProps | - |
| tableHeadProps 4.3.0+ | Properties that will be passed to the table head component. | CTableHeadProps | - |
On this page