Framework:
Download Hire UsGet CoreUI PRO all-access →

React Table Component API

Table API

Rocket
New Year sale. Skyrocket your business in 2025!
Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Get offer!

Explore the API reference for the React Table component and discover how to effectively utilize its props for customization.

On this page

CTable#

import { CTable } from '@coreui/react'
// or
import CTable from '@coreui/react/src/components/table/CTable'
PropertyDefaultType
align#-string

Set the vertical aligment.

borderColor#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

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 if you set caption="top" of the table or set the text of the table caption.

captionTop#4.3.0+-string

Set the text of the table caption and the caption on the top of the table.

className#-string

A string of all className you want applied to the component.

color#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the component to one of CoreUI’s themed colors.

columns#4.3.0+-(string | Column)[]

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)

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>.

items#4.3.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, 'sm', 'md', 'lg', 'xl', 'xxl'

Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.

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>.

stripedColumns#4.3.0+-boolean

Add zebra-striping to any table column.

tableFootProps#4.3.0+-CTableFootProps

Properties that will be passed to the table footer component.

tableHeadProps#4.3.0+-CTableHeadProps

Properties that will be passed to the table head component.

CTableBody#

import { CTableBody } from '@coreui/react'
// or
import CTableBody from '@coreui/react/src/components/table/CTableBody'
PropertyDefaultType
className#-string

A string of all className you want applied to the component.

color#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the component to one of CoreUI’s themed colors.

CTableDataCell#

import { CTableDataCell } from '@coreui/react'
// or
import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
PropertyDefaultType
active#-boolean

Highlight a table row or cell.

align#-string

Set the vertical aligment.

className#-string

A string of all className you want applied to the component.

color#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the component to one of CoreUI’s themed colors.

CTableFoot#

import { CTableFoot } from '@coreui/react'
// or
import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
PropertyDefaultType
className#-string

A string of all className you want applied to the component.

color#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the component to one of CoreUI’s themed colors.

CTableHead#

import { CTableHead } from '@coreui/react'
// or
import CTableHead from '@coreui/react/src/components/table/CTableHead'
PropertyDefaultType
className#-string

A string of all className you want applied to the component.

color#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the component to one of CoreUI’s themed colors.

CTableHeaderCell#

import { CTableHeaderCell } from '@coreui/react'
// or
import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCell'
PropertyDefaultType
className#-string

A string of all className you want applied to the component.

color#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the component to one of CoreUI’s themed colors.

CTableRow#

import { CTableRow } from '@coreui/react'
// or
import CTableRow from '@coreui/react/src/components/table/CTableRow'
PropertyDefaultType
active#-boolean

Highlight a table row or cell..

align#-string

Set the vertical aligment.

className#-string

A string of all className you want applied to the component.

color#-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the component to one of CoreUI’s themed colors.

GitHubTwitterCoreUI (Vanilla)CoreUI for AngularCoreUI for Vue.js

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.