Tables# Use the striped, bordered and hover props to customise the table.
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
< Table striped bordered hover >
< thead >
< tr >
< th > # </ th >
< th > First Name </ th >
< th > Last Name </ th >
< th > Username </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Mark </ td >
< td > Otto </ td >
< td > @mdo </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Jacob </ td >
< td > Thornton </ td >
< td > @fat </ td >
</ tr >
< tr >
< td > 3 </ td >
< td colSpan = " 2 " > Larry the Bird </ td >
< td > @twitter </ td >
</ tr >
</ tbody >
</ Table >
Small Table# Use size="sm" to make tables compact by cutting cell padding in half.
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
< Table striped bordered hover size = " sm " >
< thead >
< tr >
< th > # </ th >
< th > First Name </ th >
< th > Last Name </ th >
< th > Username </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Mark </ td >
< td > Otto </ td >
< td > @mdo </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Jacob </ td >
< td > Thornton </ td >
< td > @fat </ td >
</ tr >
< tr >
< td > 3 </ td >
< td colSpan = " 2 " > Larry the Bird </ td >
< td > @twitter </ td >
</ tr >
</ tbody >
</ Table >
Dark Table# Use variant="dark" to invert the colors of the table and get light text on a dark background.
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
< Table striped bordered hover variant = " dark " >
< thead >
< tr >
< th > # </ th >
< th > First Name </ th >
< th > Last Name </ th >
< th > Username </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Mark </ td >
< td > Otto </ td >
< td > @mdo </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Jacob </ td >
< td > Thornton </ td >
< td > @fat </ td >
</ tr >
< tr >
< td > 3 </ td >
< td colSpan = " 2 " > Larry the Bird </ td >
< td > @twitter </ td >
</ tr >
</ tbody >
</ Table >
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.
# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading 1 Table cell 0 Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table cell 5 Table cell 6 Table cell 7 Table cell 8 Table cell 9 Table cell 10 Table cell 11 2 Table cell 0 Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table cell 5 Table cell 6 Table cell 7 Table cell 8 Table cell 9 Table cell 10 Table cell 11 3 Table cell 0 Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table cell 5 Table cell 6 Table cell 7 Table cell 8 Table cell 9 Table cell 10 Table cell 11
< Table responsive >
< thead >
< tr >
< th > # </ th >
{ Array . from ( { length : 12 } ) . map ( ( _ , index ) => (
< th key = { index } > Table heading </ th >
) ) }
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
{ Array . from ( { length : 12 } ) . map ( ( _ , index ) => (
< td key = { index } > Table cell { index } </ td >
) ) }
</ tr >
< tr >
< td > 2 </ td >
{ Array . from ( { length : 12 } ) . map ( ( _ , index ) => (
< td key = { index } > Table cell { index } </ td >
) ) }
</ tr >
< tr >
< td > 3 </ td >
{ Array . from ( { length : 12 } ) . map ( ( _ , index ) => (
< td key = { index } > Table cell { index } </ td >
) ) }
</ tr >
</ tbody >
</ Table >
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.
# Table heading Table heading Table heading Table heading Table heading Table heading 1 Table cell Table cell Table cell Table cell Table cell Table cell 2 Table cell Table cell Table cell Table cell Table cell Table cell 3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading 1 Table cell Table cell Table cell Table cell Table cell Table cell 2 Table cell Table cell Table cell Table cell Table cell Table cell 3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading 1 Table cell Table cell Table cell Table cell Table cell Table cell 2 Table cell Table cell Table cell Table cell Table cell Table cell 3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading 1 Table cell Table cell Table cell Table cell Table cell Table cell 2 Table cell Table cell Table cell Table cell Table cell Table cell 3 Table cell Table cell Table cell Table cell Table cell Table cell
< div >
< Table responsive = " sm " >
< thead >
< tr >
< th > # </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 3 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
</ tbody >
</ Table >
< Table responsive = " md " >
< thead >
< tr >
< th > # </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 3 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
</ tbody >
</ Table >
< Table responsive = " lg " >
< thead >
< tr >
< th > # </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 3 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
</ tbody >
</ Table >
< Table responsive = " xl " >
< thead >
< tr >
< th > # </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
< th > Table heading </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > 1 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 2 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
< tr >
< td > 3 </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
< td > Table cell </ td >
</ tr >
</ tbody >
</ Table >
</ div >
API# 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.
