React Table Basic example

Using the most basic table CoreUI, here's how <CTable>-based tables look in CoreUI.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Variants

Use contextual classes to color tables, table rows or individual cells.

ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
React Table Striped rows

Use striped property to add zebra-striping to any table row within the <CTableBody>.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

These classes can also be added to table variants:

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Hoverable rows

Use hover property to enable a hover state on table rows within a <CTableBody>.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Active tables
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Bordered tables

Add bordered property for borders on all sides of the table and cells.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Border color utilities can be added to change colors:

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Tables without borders

Add borderless property for a table without borders.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Small tables

Add small property to make any <CTable> more compact by cutting all cell padding in half.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Vertical alignment

Table cells of <CTableHead> are always vertical aligned to the bottom. Table cells in <CTableBody> inherit their alignment from <CTable> and are aligned to the the top by default. Use the align property to re-align where needed.

Heading 1Heading 2Heading 3Heading 4
This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell is aligned to the top.This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.
React Table Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

#ClassHeadingHeading
1MarkOtto@mdo
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
3Larry the Bird@twitter
React Table Table head

Similar to tables and dark tables, use the modifier prop color="light" or color="dark" to make <CTableHead>s appear light or dark gray.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
React Table Table foot
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
FooterFooterFooterFooter
React Table Captions

A <CTableCaption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.

List of users
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

You can also put the <CTableCaption> on the top of the table with caption="top".

List of users
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter