React Table Component

Table

Documentation and examples for opt-in styling of tables.

Other Frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

On this page

How to use React Table Component#

Due to the widespread use of<CTable> elements across third-party widgets like calendars and date pickers, CoreUI's react tables areopt-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.

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

In version4.3.0 we introduced a new way to create a table, similarly to ourSmart Table component.

const columns=[
{
key:'id',
label:'#',
_props:{scope:'col'},
},
{
key:'class',
_props:{scope:'col'},
},
{
key:'heading_1',
label:'Heading',
_props:{scope:'col'},
},
{
key:'heading_2',
label:'Heading',
_props:{scope:'col'},
},
]
const items=[
{
id:1,
class:'Mark',
heading_1:'Otto',
heading_2:'@mdo',
_cellProps:{id:{scope:'row'}},
},
{
id:2,
class:'Jacob',
heading_1:'Thornton',
heading_2:'@fat',
_cellProps:{id:{scope:'row'}},
},
{
id:3,
class:'Larry the Bird',
heading_2:'@twitter',
_cellProps:{id:{scope:'row'},class:{colSpan:2}},
},
]
return<CTablecolumns={columns}items={items}/>

You can also put all table components together manually as hitherto.

<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCellscope="col">#</CTableHeaderCell>
<CTableHeaderCellscope="col">Class</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCellscope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellscope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellscope="row">3</CTableHeaderCell>
<CTableDataCellcolSpan={2}>Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>

Both methods produce the same html code.

Variants#

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

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

<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCellscope="col">Class</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCellscope="row">Default</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="primary">
<CTableHeaderCellscope="row">Primary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="secondary">
<CTableHeaderCellscope="row">Secondary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="success">
<CTableHeaderCellscope="row">Success</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="danger">
<CTableHeaderCellscope="row">Danger</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="warning">
<CTableHeaderCellscope="row">Warning</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="info">
<CTableHeaderCellscope="row">Info</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="light">
<CTableHeaderCellscope="row">Light</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRowcolor="dark">
<CTableHeaderCellscope="row">Dark</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>

Since version4.3.0 also this way.

const columns=[
{key:'class',_props:{scope:'col'}},
{key:'heading_1',label:'Heading',_props:{scope:'col'}},
{key:'heading_2',label:'Heading',_props:{scope:'col'}},
]
const items=[
{
class:'Default',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
},
{
class:'Primary',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'primary'},
},
{
class:'Secondary',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'secondary'},
},
{
class:'Success',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'success'},
},
{
class:'Danger',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'danger'},
},
{
class:'Warning',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'warning'},
},
{
class:'Info',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'info'},
},
{
class:'Light',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'light'},
},
{
class:'Dark',
heading_1:'Cell',
heading_2:'Cell',
_cellProps:{class:{scope:'row'}},
_props:{color:'dark'},
},
]
return<CTablecolumns={columns}items={items}/>

Accented tables#

Striped rows#

Usestriped property to add zebra-striping to any react table row within the<CTableBody>.

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

<CTablestriped>
  ...
</CTable>

Striped columns#

UsestripedColumns boolean property to add zebra-striping to any table column.

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

<CTablestripedColumns>
  ...
</CTable>

These classes can also be added to react table variants:

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

<CTablecolor="dark"striped>
  ...
</CTable>

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

<CTablecolor="dark"stripedColumns>
  ...
</CTable>

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

<CTablecolor="success"striped>
  ...
</CTable>

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

<CTablecolor="success"stripedColumns>
  ...
</CTable>

Hoverable rows#

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

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

<CTablehover>
  ...
</CTable>

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

<CTablecolor="dark"hover>
  ...
</CTable>

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

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

<CTablestripedhover>
  ...
</CTable>

Active tables#

Highlight a table row or cell by adding aactive property.

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

As mentioned before since version4.3.0 we have two ways to generate tables, also with custom properties for rows, and cells.

const columns=[
{
key:'id',
label:'#',
_props:{scope:'col'},
},
{
key:'class',
_props:{scope:'col'},
},
{
key:'heading_1',
label:'Heading',
_props:{scope:'col'},
},
{
key:'heading_2',
label:'Heading',
_props:{scope:'col'},
},
]
const items=[
{
id:1,
class:'Mark',
heading_1:'Otto',
heading_2:'@mdo',
_props:{active:true},
_cellProps:{id:{scope:'row'}},
},
{
id:2,
class:'Jacob',
heading_1:'Thornton',
heading_2:'@fat',
_cellProps:{id:{scope:'row'}},
},
{
id:3,
class:'Larry the Bird',
heading_2:'@twitter',
_cellProps:{id:{scope:'row'},class:{active:true,colSpan:2}},
},
]
return<CTablecolumns={columns}items={items}/>

<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCellscope="col">#</CTableHeaderCell>
<CTableHeaderCellscope="col">Class</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRowactive>
<CTableHeaderCellscope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellscope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellscope="row">3</CTableHeaderCell>
<CTableDataCellcolSpan={2}active>
        Larry the Bird
</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>

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

const columns=[
{
key:'id',
label:'#',
_props:{scope:'col'},
},
{
key:'class',
_props:{scope:'col'},
},
{
key:'heading_1',
label:'Heading',
_props:{scope:'col'},
},
{
key:'heading_2',
label:'Heading',
_props:{scope:'col'},
},
]
const items=[
{
id:1,
class:'Mark',
heading_1:'Otto',
heading_2:'@mdo',
_props:{active:true},
_cellProps:{id:{scope:'row'}},
},
{
id:2,
class:'Jacob',
heading_1:'Thornton',
heading_2:'@fat',
_cellProps:{id:{scope:'row'}},
},
{
id:3,
class:'Larry the Bird',
heading_2:'@twitter',
_cellProps:{id:{scope:'row'},class:{active:true,colSpan:2}},
},
]
return<CTablecolor="dark"columns={columns}items={items}/>

Table borders#

Bordered tables#

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

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

<CTablebordered>
  ...
</CTable>

Border color utilities can be added to change colors:

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

<CTableborderedborderColor="primary">
  ...
</CTable>

Tables without borders#

Addborderless property for a react table without borders.

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

<CTableborderless>
  ...
</CTable>

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

<CTablecolor="dark"borderless>
  ...
</CTable>

Small tables#

Addsmall property to make any<CTable> more compact by cutting all cellpadding in half.

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

<CTablesmall>
  ...
</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 1	Heading 2	Heading 3	Heading 4
This cell inherits`vertical-align: middle;` from the table	This cell inherits`vertical-align: middle;` from the table	This cell inherits`vertical-align: middle;` from the table	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits`vertical-align: bottom;` from the table row	This cell inherits`vertical-align: bottom;` from the table row	This cell inherits`vertical-align: bottom;` from the table row	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits`vertical-align: middle;` from the table	This cell inherits`vertical-align: middle;` from the table	This cell is aligned to the top.	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

In version4.3.0 we introduced a new way to create a table, similarly to ourSmart Table component.

const columns=[
{
key:'heading_1',
_props:{className:'w-25',scope:'col'},
},
{
key:'heading_2',
_props:{className:'w-25',scope:'col'},
},
{
key:'heading_3',
_props:{className:'w-25',scope:'col'},
},
{
key:'heading_4',
_props:{className:'w-25',scope:'col'},
},
]
const items=[
{
heading_1:<>This cell inherits<code>vertical-align: middle;</code> from the table</>,
heading_2:<>This cell inherits<code>vertical-align: middle;</code> from the table</>,
heading_3:<>This cell inherits<code>vertical-align: middle;</code> from the table</>,
heading_4:'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
},
{
heading_1:<>This cell inherits<code>vertical-align: bottom;</code> from the table row</>,
heading_2:<>This cell inherits<code>vertical-align: bottom;</code> from the table row</>,
heading_3:<>This cell inherits<code>vertical-align: bottom;</code> from the table row</>,
heading_4:'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
_props:{align:'bottom'}
},
{
heading_1:<>This cell inherits<code>vertical-align: middle;</code> from the table</>,
heading_2:<>This cell inherits<code>vertical-align: middle;</code> from the table</>,
heading_3:'This cell is aligned to the top.',
heading_4:'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
_cellProps:{heading_3:{align:'top'}},
},
]
return<CTablealign="middle"columns={columns}items={items}/>

You can also put all table components together manually as hitherto.

<CTablealign="middle"responsive>
<CTableHead>
<CTableRow>
<CTableHeaderCellscope="col"className="w-25">
        Heading 1
</CTableHeaderCell>
<CTableHeaderCellscope="col"className="w-25">
        Heading 2
</CTableHeaderCell>
<CTableHeaderCellscope="col"className="w-25">
        Heading 3
</CTableHeaderCell>
<CTableHeaderCellscope="col"className="w-25">
        Heading 4
</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>
        This cell inherits<code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
        This cell inherits<code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
        This cell inherits<code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
</CTableDataCell>
</CTableRow>
<CTableRowalign="bottom">
<CTableDataCell>
        This cell inherits<code>vertical-align: bottom;</code> from the table row
</CTableDataCell>
<CTableDataCell>
        This cell inherits<code>vertical-align: bottom;</code> from the table row
</CTableDataCell>
<CTableDataCell>
        This cell inherits<code>vertical-align: bottom;</code> from the table row
</CTableDataCell>
<CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
        This cell inherits<code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
        This cell inherits<code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCellalign="top">This cell is aligned to the top.</CTableDataCell>
<CTableDataCell>
        This here is some placeholder text, intended to take up quite a bit of vertical space, to
        demonstrate how the vertical alignment works in the preceding cells.
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>

Nesting#

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

Class

Heading

Mark

Otto

@mdo

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

Larry the Bird

@twitter

<CTablestriped>
<CTableHead>
<CTableRow>
<CTableHeaderCellscope="col">#</CTableHeaderCell>
<CTableHeaderCellscope="col">Class</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
<CTableHeaderCellscope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCellscope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellcolSpan={4}>
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCellscope="col">Header</CTableHeaderCell>
<CTableHeaderCellscope="col">Header</CTableHeaderCell>
<CTableHeaderCellscope="col">Header</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCellscope="row">A</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellscope="row">B</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellscope="row">C</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CTableHeaderCell>
</CTableRow>
<CTableRow>
<CTableHeaderCellscope="row">3</CTableHeaderCell>
<CTableDataCellcolSpan={2}>Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>

Anatomy#

Table head#

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

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

<CTable>
<CTableHeadcolor="light">
    ...
</CTableHead>
<CTableBody>
    ...
</CTableBody>
</CTable>

If you generate a table using the new method incorporated in version4.3.0, you have to usetableHeadProps property to pass properties to the table header component.

const columns=[...]
const items=[...]
return<CTablecolumns={columns}items={items}tableHeadProps={{color:'light'}}/>

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

<CTable>
<CTableHeadcolor="dark">
    ...
</CTableHead>
<CTableBody>
    ...
</CTableBody>
</CTable>

Starting from version4.3.0 also this way.

const columns=[...]
const items=[...]
return<CTablecolumns={columns}items={items}tableHeadProps={{color:'dark'}}/>

Table foot#

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

<CTable>
<CTableHeadcolor="light">
    ...
</CTableHead>
<CTableBody>
    ...
<CTableHead>
<CTableRow>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
</CTableRow>
</CTableHead>
</CTable>

Starting from version4.3.0 also this way.

const columns=[...]
const footer=[
'Footer',
'Footer',
'Footer',
'Footer',
]
const items=[...]
return<CTablecolumns={columns}footer={footer}items={items}tableHeadProps={{color:'light'}}/>

Captions#

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

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

<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
    ...
</CTableHead>
<CTableBody>
    ...
</CTableBody>
</CTable>

Starting from version4.3.0 also this way.

const columns=[...]
const items=[...]
return<CTablecaption="List of users"columns={columns}items={items}/>

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

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

<CTablecaption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
    ...
</CTableHead>
<CTableBody>
    ...
</CTableBody>
</CTable>

Since version4.3.0 also this way.

const columns=[...]
const items=[...]
return<CTablecaptionTop="List of users"columns={columns}items={items}/>

Responsive tables#

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

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<CTableresponsive>
  ...
</CTable>

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<CTableresponsive="sm">
  ...
</CTable>

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<CTableresponsive="md">
  ...
</CTable>

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<CTableresponsive="lg">
  ...
</CTable>

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<CTableresponsive="xl">
  ...
</CTable>

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<CTableresponsive="xxl">
  ...
</CTable>

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

Movatterモバイル変換

React Table Component

Table

Other Frameworks

How to use React Table Component#

Variants#

Accented tables#

Striped rows#

Striped columns#

Hoverable rows#

Active tables#

Table borders#

Bordered tables#

Tables without borders#

Small tables#

Vertical alignment#

Nesting#

Anatomy#

Table head#

Table foot#

Captions#

Responsive tables#

API#