Table

Display data in ordered rows and columns.

Storybook documentation (opens in new tab)

Name	Instrument	Age
John	Guitar	20
Paul	Bass guitar	18
George	Guitar	17
Ringo	Drums	20

React

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Cell</TableCell>
      <TableCell>Cell</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Cell</TableCell>
      <TableCell>Cell</TableCell>
    </TableRow>
    {/* repeat <TableRow /> */}
  </TableBody>
</Table>

CSS

<div class="table">
  <table cellpadding="0" cellspacing="0" class="table_content">
    <thead class="table_head">
      <tr class="table_row">
        <th class="table_cell">Cell</th>
        <th class="table_cell">Cell</th>
      </tr>
    </thead>
    <tbody class="table_body">
      <tr class="table_row">
        <td class="table_cell">Cell</td>
        <td class="table_cell">Cell</td>
      </tr>
      <!-- repeat <tr /> -->
    </tbody>
  </table>
</div>

Props

Striped

Name	Instrument	Age
John	Guitar	20
Paul	Bass guitar	18
George	Guitar	17
Ringo	Drums	20

React

<Table striped>
  {/* insert content */}
</Table>

CSS

<div class="table table-striped">
  <table cellpadding="0" cellspacing="0" class="table_content">
    <!-- insert content -->
  </table>
</div>

HasHover

Name	Instrument	Age
John	Guitar	20
Paul	Bass guitar	18
George	Guitar	17
Ringo	Drums	20

React

<Table hasHover>
  {/* insert content */}
</Table>

CSS

<div class="table table-hasHover">
  <table cellpadding="0" cellspacing="0" class="table_content">
    <!-- insert content -->
  </table>
</div>

Dense

Name	Instrument	Age
John	Guitar	20
Paul	Bass guitar	18
George	Guitar	17
Ringo	Drums	20

React

<Table dense>
  {/* insert content */}
</Table>

CSS

<div class="table table-dense">
  <table cellpadding="0" cellspacing="0" class="table_content">
    <!-- insert content -->
  </table>
</div>

Border

Name	Instrument	Age
John	Guitar	20
Paul	Bass guitar	18
George	Guitar	17
Ringo	Drums	20

React

<Table border>
  {/* insert content */}
</Table>

CSS

<div class="table table-border">
  <table cellpadding="0" cellspacing="0" class="table_content">
    <!-- insert content -->
  </table>
</div>