Tables

import TableBasic from '!!raw-loader!../examples/Table/Basic'; import TableDark from '!!raw-loader!../examples/Table/Dark'; import TableStripedRow from '!!raw-loader!../examples/Table/StripedRow'; import TableStripedColumns from '!!raw-loader!../examples/Table/StripedColumns'; import TableResponsive from '!!raw-loader!../examples/Table/Responsive'; import TableResponsiveBreakpoints from '!!raw-loader!../examples/Table/ResponsiveBreakpoints'; import TableSmall from '!!raw-loader!../examples/Table/Small';

Example

Use the striped, bordered and hover props to customise the table.

<CodeBlock language="jsx" live> {TableBasic} </CodeBlock>

Small Table

Use size="sm" to make tables compact by cutting cell padding in half.

<CodeBlock language="jsx" live> {TableSmall} </CodeBlock>

Dark Table

Use variant="dark" to invert the colors of the table and get light text on a dark background.

<CodeBlock language="jsx" live> {TableDark} </CodeBlock>

Striped rows

Use striped to add zebra-striping to any table row within the table.

<CodeBlock language="jsx" live> {TableStripedRow} </CodeBlock>

Striped columns

Use striped="columns" to add zebra-striping to any table column.

<CodeBlock language="jsx" live> {TableStripedColumns} </CodeBlock>

Responsive

Responsive tables allow tables to be scrolled horizontally with ease.

Always Responsive

Across every breakpoint, use responsive for horizontally scrolling tables. Responsive tables are wrapped automatically in a div. The following example has 12 columns that are scrollable horizontally.

<CodeBlock language="jsx" live> {TableResponsive} </CodeBlock>

Breakpoint specific

Use responsive="sm", responsive="md", responsive="lg", or responsive="xl" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

<CodeBlock language="jsx" live> {TableResponsiveBreakpoints} </CodeBlock>

API

Table

<PropsTable name="Table" />