Tables

Examples for opt-in styling of tables.

React Bootstrap docs

Basic example

#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
4JaneBirkinsSupport+3 774 28 50
import Table from 'react-bootstrap/Table'

{/* Basic responsive table */}
<Table responsive>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
    <tr>
      <th scope='row'>4</th>
      <td>Jane</td>
      <td>Birkins</td>
      <td>Support</td>
      <td>+3 774 28 50</td>
    </tr>
  </tbody>
</Table>

Dark table

#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
4JaneBirkinsSupport+3 774 28 50
import Table from 'react-bootstrap/Table'

{/* Dark responsive table */}
<Table responsive variant='dark'>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
    <tr>
      <th scope='row'>4</th>
      <td>Jane</td>
      <td>Birkins</td>
      <td>Support</td>
      <td>+3 774 28 50</td>
    </tr>
  </tbody>
</Table>

Small table

#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
4JaneBirkinsSupport+3 774 28 50
import Table from 'react-bootstrap/Table'

{/* Small responsive table */}
<Table responsive size='sm'>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
    <tr>
      <th scope='row'>4</th>
      <td>Jane</td>
      <td>Birkins</td>
      <td>Support</td>
      <td>+3 774 28 50</td>
    </tr>
  </tbody>
</Table>

Striped rows

#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
import Table from 'react-bootstrap/Table'

{/* Light table with striped rows */}
<Table responsive striped>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
  </tbody>
</Table>

{/* Dark table with striped rows */}
<Table responsive striped variant='dark'>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
  </tbody>
</Table>

Bordered table

#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
import Table from 'react-bootstrap/Table'

{/* Light bordered table */}
<Table responsive bordered>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
  </tbody>
</Table>

{/* Dark bordered table */}
<Table responsive bordered variant='dark'>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
  </tbody>
</Table>

{/* Table with color border. Supports all theme colors */}
<Table responsive bordered className='border-primary'>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
  </tbody>
</Table>

Hoverable rows

#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
#First NameLast NamePositionPhone
1JohnDoeCEO, Founder+3 555 68 70
2AnnaCabanaDesigner+3 434 65 93
3KaleThorntonDeveloper+3 285 42 88
import Table from 'react-bootstrap/Table'

{/* Light table with hoverable rows */}
<Table responsive hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
  </tbody>
</Table>

{/* Dark table with hoverable rows */}
<Table responsive hover variant='dark'>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>John</td>
      <td>Doe</td>
      <td>CEO, Founder</td>
      <td>+3 555 68 70</td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td>Anna</td>
      <td>Cabana</td>
      <td>Designer</td>
      <td>+3 434 65 93</td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td>Kale</td>
      <td>Thornton</td>
      <td>Developer</td>
      <td>+3 285 42 88</td>
    </tr>
  </tbody>
</Table>

Contextual colors

#ClassHeadingHeading
1ActiveColumn contentColumn content
2DefaultColumn contentColumn content
3PrimaryColumn contentColumn content
4DefaultColumn contentColumn content
5AccentColumn contentColumn content
6DefaultColumn contentColumn content
7SecondaryColumn contentColumn content
8DefaultColumn contentColumn content
9SuccessColumn contentColumn content
10DefaultColumn contentColumn content
11InfoColumn contentColumn content
12DefaultColumn contentColumn content
13WarningColumn contentColumn content
14DefaultColumn contentColumn content
15DangerColumn contentColumn content
import Table from 'react-bootstrap/Table'

{/* Table with contextual colored rows */}
<Table responsive>
  <thead>
    <tr>
      <th>#</th>
      <th>Class</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr className='table-active'>
      <th scope='row'>1</th>
      <td>Active</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr className='table-primary'>
      <th scope='row'>2</th>
      <td>Primary</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr className='table-accent'>
      <th scope='row'>3</th>
      <td>Accent</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr className='table-secondary'>
      <th scope='row'>4</th>
      <td>Secondary</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr className='table-success'>
      <th scope='row'>5</th>
      <td>Success</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr className='table-info'>
      <th scope='row'>6</th>
      <td>Info</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr className='table-warning'>
      <th scope='row'>7</th>
      <td>Warning</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr className='table-danger'>
      <th scope='row'>8</th>
      <td>Danger</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</Table>