Bootstrap React Table

Documentation and examples for opt-in styling of Bootstrap React Tables.

On this page

Overview#

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

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

#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/bootstrap-react'
2// or
3import CTable from '@coreui/bootstrap-react/src/components/table/CTable'
PropertyDescriptionTypeDefault
alignSet the vertical aligment.'bottom' | 'middle' | 'top'-
borderColorSets the border color of the component to one of Bootstrap React’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 Bootstrap React’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/bootstrap-react'
2// or
3import CTableBody from '@coreui/bootstrap-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 Bootstrap React’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableDataCell#

1import { CTableDataCell } from '@coreui/bootstrap-react'
2// or
3import CTableDataCell from '@coreui/bootstrap-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 Bootstrap React’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableFoot#

1import { CTableFoot } from '@coreui/bootstrap-react'
2// or
3import CTableFoot from '@coreui/bootstrap-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 Bootstrap React’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableHead#

1import { CTableHead } from '@coreui/bootstrap-react'
2// or
3import CTableHead from '@coreui/bootstrap-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 Bootstrap React’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableHeaderCell#

1import { CTableHeaderCell } from '@coreui/bootstrap-react'
2// or
3import CTableHeaderCell from '@coreui/bootstrap-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 Bootstrap React’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-

CTableRow#

1import { CTableRow } from '@coreui/bootstrap-react'
2// or
3import CTableRow from '@coreui/bootstrap-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 Bootstrap React’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-