Tables
Example
Use the striped, bordered and hover props to customise the table.
Result
Loading...
Live Editor
import Table from 'react-bootstrap/Table';function BasicExample() {return (<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>);}export default BasicExample;
Small Table
Use size="sm" to make tables compact by cutting cell padding in half.
Result
Loading...
Live Editor
import Table from 'react-bootstrap/Table';function SmallExample() {return (<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>);}export default SmallExample;
Dark Table
Use variant="dark" to invert the colors of the table and get light text
on a dark background.
Result
Loading...
Live Editor
import Table from 'react-bootstrap/Table';function DarkExample() {return (<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>);}export default DarkExample;
Striped rows
Use striped to add zebra-striping to any table row within the table.
Result
Loading...
Live Editor
import Table from 'react-bootstrap/Table';function StripedRowExample() {return (<Table striped><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>);}export default StripedRowExample;
Striped columns
Use striped="columns" to add zebra-striping to any table column.
Result
Loading...
Live Editor
import Table from 'react-bootstrap/Table';function StripedColumnsExample() {return (<Table striped="columns"><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>);}export default StripedColumnsExample;
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.
Result
Loading...
Live Editor
import Table from 'react-bootstrap/Table';function ResponsiveExample() {return (<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>);}export default ResponsiveExample;
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.
Result
Loading...
Live Editor
import Table from 'react-bootstrap/Table';function ResponsiveBreakpointsExample() {return (<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>);}export default ResponsiveBreakpointsExample;