Table

Display data in ordered rows and columns.

Storybook documentation

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>