CoreUI PRO Next.js Admin Template

React Table Basic example

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

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

React Table Variants

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

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

React Table Striped rows

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

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

These classes can also be added to table variants:

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

React Table Hoverable rows

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

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

React Table Active tables

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

React Table Bordered tables

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

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Border color utilities can be added to change colors:

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

React Table Tables without borders

Add borderless property for a table without borders.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

React Table Small tables

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

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry 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 1	Heading 2	Heading 3	Heading 4
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	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.
This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	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.
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This 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.

Class

Heading

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

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

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

React Table Table foot

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter
Footer	Footer	Footer	Footer

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
#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

List of users
#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Settings

System Utilization