Tables

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

Small Table

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

Dark Table

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

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.

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.

API

Table

import Table from 'react-bootstrap/Table'Copy import code for the Table component
Name Type Default Description
bordered
boolean

Adds borders on all sides of the table and cells.

borderless
boolean

Removes all borders on the table and cells, including table header.

hover
boolean

Enable a hover state on table rows within a <tbody>.

responsive
boolean | string

Responsive tables allow tables to be scrolled horizontally with ease. Across every breakpoint, use responsive for horizontally scrolling tables. Responsive tables are wrapped automatically in a div. 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.

size
string

Make tables more compact by cutting cell padding in half by setting size as sm.

striped
boolean

Adds zebra-striping to any table row within the <tbody>.

variant
string

Invert the colors of the table — with light text on dark backgrounds by setting variant as dark.

bsPrefix
string
'table'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/table/