Tables

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

    #First NameLast NameUsername
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    Press esc to disable tab trapping

    Small Table

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

    #First NameLast NameUsername
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    Press esc to disable tab trapping

    Dark Table

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

    #First NameLast NameUsername
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    Press esc to disable tab trapping

    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.

    #Table headingTable headingTable headingTable headingTable headingTable heading
    1Table cellTable cellTable cellTable cellTable cellTable cell
    2Table cellTable cellTable cellTable cellTable cellTable cell
    3Table cellTable cellTable cellTable cellTable cellTable cell
    Press esc to disable tab trapping

    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 headingTable headingTable headingTable headingTable headingTable heading
    1Table cellTable cellTable cellTable cellTable cellTable cell
    2Table cellTable cellTable cellTable cellTable cellTable cell
    3Table cellTable cellTable cellTable cellTable cellTable cell
    #Table headingTable headingTable headingTable headingTable headingTable heading
    1Table cellTable cellTable cellTable cellTable cellTable cell
    2Table cellTable cellTable cellTable cellTable cellTable cell
    3Table cellTable cellTable cellTable cellTable cellTable cell
    #Table headingTable headingTable headingTable headingTable headingTable heading
    1Table cellTable cellTable cellTable cellTable cellTable cell
    2Table cellTable cellTable cellTable cellTable cellTable cell
    3Table cellTable cellTable cellTable cellTable cellTable cell
    #Table headingTable headingTable headingTable headingTable headingTable heading
    1Table cellTable cellTable cellTable cellTable cellTable cell
    2Table cellTable cellTable cellTable cellTable cellTable cell
    3Table cellTable cellTable cellTable cellTable cellTable cell
    Press esc to disable tab trapping

    API

    import Table from 'react-bootstrap/Table'
    NameTypeDefaultDescription
    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.