React Table Component

Documentation and examples for opt-in styling of tables.

Overview#

Due to the widespread use of <CTable> elements across third-party widgets like calendars and date pickers, CoreUI's tables are opt-in. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.

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

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

Variants#

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

ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
1<CTable>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 </CTableRow>
8 </CTableHead>
9 <CTableBody>
10 <CTableRow>
11 <CTableHeaderCell scope="row">Default</CTableHeaderCell>
12 <CTableDataCell>Cell</CTableDataCell>
13 <CTableDataCell>Cell</CTableDataCell>
14 </CTableRow>
15 <CTableRow color="primary">
16 <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
17 <CTableDataCell>Cell</CTableDataCell>
18 <CTableDataCell>Cell</CTableDataCell>
19 </CTableRow>
20 <CTableRow color="secondary">
21 <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
22 <CTableDataCell>Cell</CTableDataCell>
23 <CTableDataCell>Cell</CTableDataCell>
24 </CTableRow>
25 <CTableRow color="success">
26 <CTableHeaderCell scope="row">Success</CTableHeaderCell>
27 <CTableDataCell>Cell</CTableDataCell>
28 <CTableDataCell>Cell</CTableDataCell>
29 </CTableRow>
30 <CTableRow color="danger">
31 <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
32 <CTableDataCell>Cell</CTableDataCell>
33 <CTableDataCell>Cell</CTableDataCell>
34 </CTableRow>
35 <CTableRow color="warning">
36 <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
37 <CTableDataCell>Cell</CTableDataCell>
38 <CTableDataCell>Cell</CTableDataCell>
39 </CTableRow>
40 <CTableRow color="info">
41 <CTableHeaderCell scope="row">Info</CTableHeaderCell>
42 <CTableDataCell>Cell</CTableDataCell>
43 <CTableDataCell>Cell</CTableDataCell>
44 </CTableRow>
45 <CTableRow color="light">
46 <CTableHeaderCell scope="row">Light</CTableHeaderCell>
47 <CTableDataCell>Cell</CTableDataCell>
48 <CTableDataCell>Cell</CTableDataCell>
49 </CTableRow>
50 <CTableRow color="dark">
51 <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
52 <CTableDataCell>Cell</CTableDataCell>
53 <CTableDataCell>Cell</CTableDataCell>
54 </CTableRow>
55 </CTableBody>
56</CTable>

Accented tables#

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
1<CTable striped>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

These classes can also be added to table variants:

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable color="dark" striped>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable color="success" striped>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

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
1<CTable hover>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable color="dark" hover>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

These hoverable rows can also be combined with the striped variant:

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable striped hover>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

Active tables#

Highlight a table row or cell by adding a active property.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow active>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2" active>
26 Larry the Bird
27 </CTableDataCell>
28 <CTableDataCell>@twitter</CTableDataCell>
29 </CTableRow>
30 </CTableBody>
31</CTable>
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable color="dark">
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow active>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2" active>
26 Larry the Bird
27 </CTableDataCell>
28 <CTableDataCell>@twitter</CTableDataCell>
29 </CTableRow>
30 </CTableBody>
31</CTable>

Table borders#

Bordered tables#

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

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable bordered>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

Border color utilities can be added to change colors:

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable bordered borderColor="primary">
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

Tables without borders#

Add borderless property for a table without borders.

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable borderless>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable color="dark" borderless>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

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
1<CTable small>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

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.
1<CTable align="middle" responsive>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col" className="w-25">
5 Heading 1
6 </CTableHeaderCell>
7 <CTableHeaderCell scope="col" className="w-25">
8 Heading 2
9 </CTableHeaderCell>
10 <CTableHeaderCell scope="col" className="w-25">
11 Heading 3
12 </CTableHeaderCell>
13 <CTableHeaderCell scope="col" className="w-25">
14 Heading 4
15 </CTableHeaderCell>
16 </CTableRow>
17 </CTableHead>
18 <CTableBody>
19 <CTableRow>
20 <CTableDataCell>
21 This cell inherits <code>vertical-align: middle;</code> from the table
22 </CTableDataCell>
23 <CTableDataCell>
24 This cell inherits <code>vertical-align: middle;</code> from the table
25 </CTableDataCell>
26 <CTableDataCell>
27 This cell inherits <code>vertical-align: middle;</code> from the table
28 </CTableDataCell>
29 <CTableDataCell>
30 This here is some placeholder text, intended to take up quite a bit of vertical space, to
31 demonsCTableRowate how the vertical alignment works in the preceding cells.
32 </CTableDataCell>
33 </CTableRow>
34 <CTableRow align="bottom">
35 <CTableDataCell>
36 This cell inherits <code>vertical-align: bottom;</code> from the table row
37 </CTableDataCell>
38 <CTableDataCell>
39 This cell inherits <code>vertical-align: bottom;</code> from the table row
40 </CTableDataCell>
41 <CTableDataCell>
42 This cell inherits <code>vertical-align: bottom;</code> from the table row
43 </CTableDataCell>
44 <CTableDataCell>
45 This here is some placeholder text, intended to take up quite a bit of vertical space, to
46 demonsCTableRowate how the vertical alignment works in the preceding cells.
47 </CTableDataCell>
48 </CTableRow>
49 <CTableRow>
50 <CTableDataCell>
51 This cell inherits <code>vertical-align: middle;</code> from the table
52 </CTableDataCell>
53 <CTableDataCell>
54 This cell inherits <code>vertical-align: middle;</code> from the table
55 </CTableDataCell>
56 <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
57 <CTableDataCell>
58 This here is some placeholder text, intended to take up quite a bit of vertical space, to
59 demonsCTableRowate how the vertical alignment works in the preceding cells.
60 </CTableDataCell>
61 </CTableRow>
62 </CTableBody>
63</CTable>

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
1<CTable striped>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell colSpan="4">
19 <CTable>
20 <CTableHead>
21 <CTableRow>
22 <CTableHeaderCell scope="col">Header</CTableHeaderCell>
23 <CTableHeaderCell scope="col">Header</CTableHeaderCell>
24 <CTableHeaderCell scope="col">Header</CTableHeaderCell>
25 </CTableRow>
26 </CTableHead>
27 <CTableBody>
28 <CTableRow>
29 <CTableHeaderCell scope="row">A</CTableHeaderCell>
30 <CTableDataCell>First</CTableDataCell>
31 <CTableDataCell>Last</CTableDataCell>
32 </CTableRow>
33 <CTableRow>
34 <CTableHeaderCell scope="row">B</CTableHeaderCell>
35 <CTableDataCell>First</CTableDataCell>
36 <CTableDataCell>Last</CTableDataCell>
37 </CTableRow>
38 <CTableRow>
39 <CTableHeaderCell scope="row">C</CTableHeaderCell>
40 <CTableDataCell>First</CTableDataCell>
41 <CTableDataCell>Last</CTableDataCell>
42 </CTableRow>
43 </CTableBody>
44 </CTable>
45 </CTableHeaderCell>
46 </CTableRow>
47 <CTableRow>
48 <CTableHeaderCell scope="row">3</CTableHeaderCell>
49 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
50 <CTableDataCell>@twitter</CTableDataCell>
51 </CTableRow>
52 </CTableBody>
53</CTable>

Anatomy#

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
1<CTable>
2 <CTableHead color="light">
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell>Larry</CTableDataCell>
26 <CTableDataCell>the Bird</CTableDataCell>
27 <CTableDataCell>@twitter</CTableDataCell>
28 </CTableRow>
29 </CTableBody>
30</CTable>
#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
1<CTable>
2 <CTableHead color="dark">
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29</CTable>

Table foot#

#ClassHeadingHeading
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
FooterFooterFooterFooter
1<CTable>
2 <CTableHead color="light">
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 </CTableRow>
9 </CTableHead>
10 <CTableBody>
11 <CTableRow>
12 <CTableHeaderCell scope="row">1</CTableHeaderCell>
13 <CTableDataCell>Mark</CTableDataCell>
14 <CTableDataCell>Otto</CTableDataCell>
15 <CTableDataCell>@mdo</CTableDataCell>
16 </CTableRow>
17 <CTableRow>
18 <CTableHeaderCell scope="row">2</CTableHeaderCell>
19 <CTableDataCell>Jacob</CTableDataCell>
20 <CTableDataCell>Thornton</CTableDataCell>
21 <CTableDataCell>@fat</CTableDataCell>
22 </CTableRow>
23 <CTableRow>
24 <CTableHeaderCell scope="row">3</CTableHeaderCell>
25 <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
26 <CTableDataCell>@twitter</CTableDataCell>
27 </CTableRow>
28 </CTableBody>
29 <CTableHead>
30 <CTableRow>
31 <CTableDataCell>Footer</CTableDataCell>
32 <CTableDataCell>Footer</CTableDataCell>
33 <CTableDataCell>Footer</CTableDataCell>
34 <CTableDataCell>Footer</CTableDataCell>
35 </CTableRow>
36 </CTableHead>
37</CTable>

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
1<CTable>
2 <CTableCaption>List of users</CTableCaption>
3 <CTableHead>
4 <CTableRow>
5 <CTableHeaderCell scope="col">#</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 </CTableRow>
10 </CTableHead>
11 <CTableBody>
12 <CTableRow>
13 <CTableHeaderCell scope="row">1</CTableHeaderCell>
14 <CTableDataCell>Mark</CTableDataCell>
15 <CTableDataCell>Otto</CTableDataCell>
16 <CTableDataCell>@mdo</CTableDataCell>
17 </CTableRow>
18 <CTableRow>
19 <CTableHeaderCell scope="row">2</CTableHeaderCell>
20 <CTableDataCell>Jacob</CTableDataCell>
21 <CTableDataCell>Thornton</CTableDataCell>
22 <CTableDataCell>@fat</CTableDataCell>
23 </CTableRow>
24 <CTableRow>
25 <CTableHeaderCell scope="row">3</CTableHeaderCell>
26 <CTableDataCell>Larry</CTableDataCell>
27 <CTableDataCell>the Bird</CTableDataCell>
28 <CTableDataCell>@twitter</CTableDataCell>
29 </CTableRow>
30 </CTableBody>
31</CTable>

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
1<CTable caption="top">
2 <CTableCaption>List of users</CTableCaption>
3 <CTableHead>
4 <CTableRow>
5 <CTableHeaderCell scope="col">#</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Class</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 </CTableRow>
10 </CTableHead>
11 <CTableBody>
12 <CTableRow>
13 <CTableHeaderCell scope="row">1</CTableHeaderCell>
14 <CTableDataCell>Mark</CTableDataCell>
15 <CTableDataCell>Otto</CTableDataCell>
16 <CTableDataCell>@mdo</CTableDataCell>
17 </CTableRow>
18 <CTableRow>
19 <CTableHeaderCell scope="row">2</CTableHeaderCell>
20 <CTableDataCell>Jacob</CTableDataCell>
21 <CTableDataCell>Thornton</CTableDataCell>
22 <CTableDataCell>@fat</CTableDataCell>
23 </CTableRow>
24 <CTableRow>
25 <CTableHeaderCell scope="row">3</CTableHeaderCell>
26 <CTableDataCell>Larry</CTableDataCell>
27 <CTableDataCell>the Bird</CTableDataCell>
28 <CTableDataCell>@twitter</CTableDataCell>
29 </CTableRow>
30 </CTableBody>
31</CTable>

Responsive tables#

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a responsive property. Or, pick a maximum breakpoint with which to have a responsive table up to by using responsive="{-sm|-md|-lg|-xl|-xxl}".

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
1<CTable responsive>
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
10 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
11 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
12 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
13 </CTableRow>
14 </CTableHead>
15 <CTableBody>
16 <CTableRow>
17 <CTableHeaderCell scope="row">1</CTableHeaderCell>
18 <CTableDataCell>Cell</CTableDataCell>
19 <CTableDataCell>Cell</CTableDataCell>
20 <CTableDataCell>Cell</CTableDataCell>
21 <CTableDataCell>Cell</CTableDataCell>
22 <CTableDataCell>Cell</CTableDataCell>
23 <CTableDataCell>Cell</CTableDataCell>
24 <CTableDataCell>Cell</CTableDataCell>
25 <CTableDataCell>Cell</CTableDataCell>
26 </CTableRow>
27 <CTableRow>
28 <CTableHeaderCell scope="row">2</CTableHeaderCell>
29 <CTableDataCell>Cell</CTableDataCell>
30 <CTableDataCell>Cell</CTableDataCell>
31 <CTableDataCell>Cell</CTableDataCell>
32 <CTableDataCell>Cell</CTableDataCell>
33 <CTableDataCell>Cell</CTableDataCell>
34 <CTableDataCell>Cell</CTableDataCell>
35 <CTableDataCell>Cell</CTableDataCell>
36 <CTableDataCell>Cell</CTableDataCell>
37 </CTableRow>
38 <CTableRow>
39 <CTableHeaderCell scope="row">3</CTableHeaderCell>
40 <CTableDataCell>Cell</CTableDataCell>
41 <CTableDataCell>Cell</CTableDataCell>
42 <CTableDataCell>Cell</CTableDataCell>
43 <CTableDataCell>Cell</CTableDataCell>
44 <CTableDataCell>Cell</CTableDataCell>
45 <CTableDataCell>Cell</CTableDataCell>
46 <CTableDataCell>Cell</CTableDataCell>
47 <CTableDataCell>Cell</CTableDataCell>
48 </CTableRow>
49 </CTableBody>
50</CTable>
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
1<CTable responsive="sm">
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
10 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
11 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
12 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
13 </CTableRow>
14 </CTableHead>
15 <CTableBody>
16 <CTableRow>
17 <CTableHeaderCell scope="row">1</CTableHeaderCell>
18 <CTableDataCell>Cell</CTableDataCell>
19 <CTableDataCell>Cell</CTableDataCell>
20 <CTableDataCell>Cell</CTableDataCell>
21 <CTableDataCell>Cell</CTableDataCell>
22 <CTableDataCell>Cell</CTableDataCell>
23 <CTableDataCell>Cell</CTableDataCell>
24 <CTableDataCell>Cell</CTableDataCell>
25 <CTableDataCell>Cell</CTableDataCell>
26 </CTableRow>
27 <CTableRow>
28 <CTableHeaderCell scope="row">2</CTableHeaderCell>
29 <CTableDataCell>Cell</CTableDataCell>
30 <CTableDataCell>Cell</CTableDataCell>
31 <CTableDataCell>Cell</CTableDataCell>
32 <CTableDataCell>Cell</CTableDataCell>
33 <CTableDataCell>Cell</CTableDataCell>
34 <CTableDataCell>Cell</CTableDataCell>
35 <CTableDataCell>Cell</CTableDataCell>
36 <CTableDataCell>Cell</CTableDataCell>
37 </CTableRow>
38 <CTableRow>
39 <CTableHeaderCell scope="row">3</CTableHeaderCell>
40 <CTableDataCell>Cell</CTableDataCell>
41 <CTableDataCell>Cell</CTableDataCell>
42 <CTableDataCell>Cell</CTableDataCell>
43 <CTableDataCell>Cell</CTableDataCell>
44 <CTableDataCell>Cell</CTableDataCell>
45 <CTableDataCell>Cell</CTableDataCell>
46 <CTableDataCell>Cell</CTableDataCell>
47 <CTableDataCell>Cell</CTableDataCell>
48 </CTableRow>
49 </CTableBody>
50</CTable>
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
1<CTable responsive="md">
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
10 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
11 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
12 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
13 </CTableRow>
14 </CTableHead>
15 <CTableBody>
16 <CTableRow>
17 <CTableHeaderCell scope="row">1</CTableHeaderCell>
18 <CTableDataCell>Cell</CTableDataCell>
19 <CTableDataCell>Cell</CTableDataCell>
20 <CTableDataCell>Cell</CTableDataCell>
21 <CTableDataCell>Cell</CTableDataCell>
22 <CTableDataCell>Cell</CTableDataCell>
23 <CTableDataCell>Cell</CTableDataCell>
24 <CTableDataCell>Cell</CTableDataCell>
25 <CTableDataCell>Cell</CTableDataCell>
26 </CTableRow>
27 <CTableRow>
28 <CTableHeaderCell scope="row">2</CTableHeaderCell>
29 <CTableDataCell>Cell</CTableDataCell>
30 <CTableDataCell>Cell</CTableDataCell>
31 <CTableDataCell>Cell</CTableDataCell>
32 <CTableDataCell>Cell</CTableDataCell>
33 <CTableDataCell>Cell</CTableDataCell>
34 <CTableDataCell>Cell</CTableDataCell>
35 <CTableDataCell>Cell</CTableDataCell>
36 <CTableDataCell>Cell</CTableDataCell>
37 </CTableRow>
38 <CTableRow>
39 <CTableHeaderCell scope="row">3</CTableHeaderCell>
40 <CTableDataCell>Cell</CTableDataCell>
41 <CTableDataCell>Cell</CTableDataCell>
42 <CTableDataCell>Cell</CTableDataCell>
43 <CTableDataCell>Cell</CTableDataCell>
44 <CTableDataCell>Cell</CTableDataCell>
45 <CTableDataCell>Cell</CTableDataCell>
46 <CTableDataCell>Cell</CTableDataCell>
47 <CTableDataCell>Cell</CTableDataCell>
48 </CTableRow>
49 </CTableBody>
50</CTable>
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
1<CTable responsive="lg">
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
10 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
11 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
12 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
13 </CTableRow>
14 </CTableHead>
15 <CTableBody>
16 <CTableRow>
17 <CTableHeaderCell scope="row">1</CTableHeaderCell>
18 <CTableDataCell>Cell</CTableDataCell>
19 <CTableDataCell>Cell</CTableDataCell>
20 <CTableDataCell>Cell</CTableDataCell>
21 <CTableDataCell>Cell</CTableDataCell>
22 <CTableDataCell>Cell</CTableDataCell>
23 <CTableDataCell>Cell</CTableDataCell>
24 <CTableDataCell>Cell</CTableDataCell>
25 <CTableDataCell>Cell</CTableDataCell>
26 </CTableRow>
27 <CTableRow>
28 <CTableHeaderCell scope="row">2</CTableHeaderCell>
29 <CTableDataCell>Cell</CTableDataCell>
30 <CTableDataCell>Cell</CTableDataCell>
31 <CTableDataCell>Cell</CTableDataCell>
32 <CTableDataCell>Cell</CTableDataCell>
33 <CTableDataCell>Cell</CTableDataCell>
34 <CTableDataCell>Cell</CTableDataCell>
35 <CTableDataCell>Cell</CTableDataCell>
36 <CTableDataCell>Cell</CTableDataCell>
37 </CTableRow>
38 <CTableRow>
39 <CTableHeaderCell scope="row">3</CTableHeaderCell>
40 <CTableDataCell>Cell</CTableDataCell>
41 <CTableDataCell>Cell</CTableDataCell>
42 <CTableDataCell>Cell</CTableDataCell>
43 <CTableDataCell>Cell</CTableDataCell>
44 <CTableDataCell>Cell</CTableDataCell>
45 <CTableDataCell>Cell</CTableDataCell>
46 <CTableDataCell>Cell</CTableDataCell>
47 <CTableDataCell>Cell</CTableDataCell>
48 </CTableRow>
49 </CTableBody>
50</CTable>
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
1<CTable responsive="xl">
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
10 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
11 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
12 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
13 </CTableRow>
14 </CTableHead>
15 <CTableBody>
16 <CTableRow>
17 <CTableHeaderCell scope="row">1</CTableHeaderCell>
18 <CTableDataCell>Cell</CTableDataCell>
19 <CTableDataCell>Cell</CTableDataCell>
20 <CTableDataCell>Cell</CTableDataCell>
21 <CTableDataCell>Cell</CTableDataCell>
22 <CTableDataCell>Cell</CTableDataCell>
23 <CTableDataCell>Cell</CTableDataCell>
24 <CTableDataCell>Cell</CTableDataCell>
25 <CTableDataCell>Cell</CTableDataCell>
26 </CTableRow>
27 <CTableRow>
28 <CTableHeaderCell scope="row">2</CTableHeaderCell>
29 <CTableDataCell>Cell</CTableDataCell>
30 <CTableDataCell>Cell</CTableDataCell>
31 <CTableDataCell>Cell</CTableDataCell>
32 <CTableDataCell>Cell</CTableDataCell>
33 <CTableDataCell>Cell</CTableDataCell>
34 <CTableDataCell>Cell</CTableDataCell>
35 <CTableDataCell>Cell</CTableDataCell>
36 <CTableDataCell>Cell</CTableDataCell>
37 </CTableRow>
38 <CTableRow>
39 <CTableHeaderCell scope="row">3</CTableHeaderCell>
40 <CTableDataCell>Cell</CTableDataCell>
41 <CTableDataCell>Cell</CTableDataCell>
42 <CTableDataCell>Cell</CTableDataCell>
43 <CTableDataCell>Cell</CTableDataCell>
44 <CTableDataCell>Cell</CTableDataCell>
45 <CTableDataCell>Cell</CTableDataCell>
46 <CTableDataCell>Cell</CTableDataCell>
47 <CTableDataCell>Cell</CTableDataCell>
48 </CTableRow>
49 </CTableBody>
50</CTable>
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
1<CTable responsive="xxl">
2 <CTableHead>
3 <CTableRow>
4 <CTableHeaderCell scope="col">#</CTableHeaderCell>
5 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
6 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
7 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
8 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
9 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
10 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
11 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
12 <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
13 </CTableRow>
14 </CTableHead>
15 <CTableBody>
16 <CTableRow>
17 <CTableHeaderCell scope="row">1</CTableHeaderCell>
18 <CTableDataCell>Cell</CTableDataCell>
19 <CTableDataCell>Cell</CTableDataCell>
20 <CTableDataCell>Cell</CTableDataCell>
21 <CTableDataCell>Cell</CTableDataCell>
22 <CTableDataCell>Cell</CTableDataCell>
23 <CTableDataCell>Cell</CTableDataCell>
24 <CTableDataCell>Cell</CTableDataCell>
25 <CTableDataCell>Cell</CTableDataCell>
26 </CTableRow>
27 <CTableRow>
28 <CTableHeaderCell scope="row">2</CTableHeaderCell>
29 <CTableDataCell>Cell</CTableDataCell>
30 <CTableDataCell>Cell</CTableDataCell>
31 <CTableDataCell>Cell</CTableDataCell>
32 <CTableDataCell>Cell</CTableDataCell>
33 <CTableDataCell>Cell</CTableDataCell>
34 <CTableDataCell>Cell</CTableDataCell>
35 <CTableDataCell>Cell</CTableDataCell>
36 <CTableDataCell>Cell</CTableDataCell>
37 </CTableRow>
38 <CTableRow>
39 <CTableHeaderCell scope="row">3</CTableHeaderCell>
40 <CTableDataCell>Cell</CTableDataCell>
41 <CTableDataCell>Cell</CTableDataCell>
42 <CTableDataCell>Cell</CTableDataCell>
43 <CTableDataCell>Cell</CTableDataCell>
44 <CTableDataCell>Cell</CTableDataCell>
45 <CTableDataCell>Cell</CTableDataCell>
46 <CTableDataCell>Cell</CTableDataCell>
47 <CTableDataCell>Cell</CTableDataCell>
48 </CTableRow>
49 </CTableBody>
50</CTable>

API#

CTable#

1import { CTable } from '@coreui/react'
2// or
3import CTable from '@coreui/react/src/components/table/CTable'
PropertyDescriptionTypeDefault
alignSet the vertical aligment.'bottom' | 'middle' | 'top'-
borderColorSets the border color of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
borderedAdd borders on all sides of the table and cells.boolean-
borderlessRemove borders on all sides of the table and cells.boolean-
captionPut the <caption> on the top of the table.'top'-
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
hoverEnable a hover state on table rows within a <CTableBody>.boolean-
responsiveMake 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'-
smallMake table more compact by cutting all cell padding in half.boolean-
stripedAdd zebra-striping to any table row within the <CTableBody>.boolean-

CTableBody#

1import { CTableBody } from '@coreui/react'
2// or
3import CTableBody from '@coreui/react/src/components/table/CTableBody'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableDataCell#

1import { CTableDataCell } from '@coreui/react'
2// or
3import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
PropertyDescriptionTypeDefault
activeHighlight a table row or cell.boolean-
alignSet the vertical aligment.'bottom' | 'middle' | 'top'-
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableFoot#

1import { CTableFoot } from '@coreui/react'
2// or
3import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableHead#

1import { CTableHead } from '@coreui/react'
2// or
3import CTableHead from '@coreui/react/src/components/table/CTableHead'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableHeaderCell#

1import { CTableHeaderCell } from '@coreui/react'
2// or
3import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCell'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableRow#

1import { CTableRow } from '@coreui/react'
2// or
3import CTableRow from '@coreui/react/src/components/table/CTableRow'
PropertyDescriptionTypeDefault
activeHighlight a table row or cell..boolean-
alignSet the vertical aligment.'bottom' | 'middle' | 'top'-
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-