| align | - | string |
Set the vertical aligment. |
| borderColor | - | Color |
Sets the border color of the component to one of CoreUI’s themed colors. |
| bordered | - | boolean |
Add borders on all sides of the table and cells. |
| borderless | - | boolean |
Remove borders on all sides of the table and cells. |
| caption | - | string |
Put the <caption> on the top of the table. |
| captionTop4.5.0+ | - | string |
Set the text of the table caption and the caption on the top of the table. |
| columns4.5.0+ | - | (Column | string)[] |
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) |
| color | - | Color |
Sets the color context of the component to one of CoreUI’s themed colors. |
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' }, ...] |
| hover | - | boolean |
Enable a hover state on table rows within a <CTableBody>. |
| items4.5.0+ | - | Item[] |
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'}}} |
| responsive | - | boolean, string |
- |
| small | - | boolean |
Make table more compact by cutting all cell padding in half. |
| striped | - | boolean |
Add zebra-striping to any table row within the <CTableBody>. |
| stripedColumns4.4.0+ | - | boolean |
Add zebra-striping to any table column. |
Properties that will be passed to the table footer component. Properties to [CTableFoot](#ctablefoot) component. |
| tableHeadProps4.5.0+ | - | object |
Properties that will be passed to the table head component. Properties to [CTableHead](#ctablehead) component. |