Tables - Joystick Design System

For data, not layout.

Tables have gotten a bit of a bad wrap in recent years, but they are still the best option for what they do best: displaying tabular data.

Tables Update

If you were using tables previous to v0.10.0, you no longer need to wrap your table in a .joy-scrollable--x div in order to achieve horizontal scrolling. Use the responsive table class instead.

Base

Apply the class .joy-table to any <table> element to apply the Joystick table styles.

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars Battlefront 2

<table class="joy-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars Battlefront 2</td>
    </tr>
  </tbody>
</table>

Inverse

Invert the table color to light text on dark backgrounds with .joy-table--inverse.

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Mass Effect: Andromeda

<table class="joy-table joy-table--inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Mass Effect: Andromeda</td>
    </tr>
  </tbody>
</table>

Table Head Options

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray: .joy-thead--dark and .joy-thead--light.

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars: Battlefront 2

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars Battlefront 2

<table class="joy-table">
  <thead class="joy-thead--dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars: Battlefront 2</td>
    </tr>
  </tbody>
</table>

<table class="joy-table">
  <thead class="joy-thead--light">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars Battlefront 2</td>
    </tr>
  </tbody>
</table>

Striped Rows

Use .joy-table--striped to add zebra-striping to any table row within the <tbody>.

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars Battlefront 2

<table class="joy-table joy-table--striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars Battlefront 2</td>
    </tr>
  </tbody>
</table>

Bordered Tables

Add .joy-table--bordered for borders on all sides of the table and cells.

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars Battlefront 2
4	Jordan the Product Manager		A Way Out

<table class="joy-table joy-table--bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars Battlefront 2</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Jordan the Product Manager</td>
      <td>A Way Out</td>
    </tr>
  </tbody>
</table>

Inverse Bordered

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars Battlefront 2
4	Jordan the Product Manager		Mass Effect: Andromeda

<table class="joy-table joy-table--bordered joy-table--inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars Battlefront 2</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Jordan the Product Manager</td>
      <td>Mass Effect: Andromeda</td>
    </tr>
  </tbody>
</table>

Hoverable Rows

Add .joy-table--hover to enable a hover state on table rows within a <tbody>.

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars Battlefront 2

<table class="joy-table joy-table--hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars Battlefront 2</td>
    </tr>
  </tbody>
</table>

Small Table

Add .joy-table--sm to make tables more compact by cutting cell padding in half.

#	Name	Title	Favorite Game
1	Ryan Rumsey	Director, Experience Design	FIFA 18
2	Andy McFee	UI Developer	Anthem
3	Yang Zhang	Interaction Designer	Star Wars Battlefront 2

<table class="joy-table joy-table--sm">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Title</th>
      <th>Favorite Game</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ryan Rumsey</td>
      <td>Director, Experience Design</td>
      <td>FIFA 18</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Andy McFee</td>
      <td>UI Developer</td>
      <td>Anthem</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Yang Zhang</td>
      <td>Interaction Designer</td>
      <td>Star Wars Battlefront 2</td>
    </tr>
  </tbody>
</table>

Contextual Row Classes

Use contextual classes to color table rows or individual cells:

Class	Description
`.joy-table--active`	Applies the hover color to a particular row or cell
`.joy-table--success`	Indicates a successful or positive action
`.joy-table--info`	Indicates a neutral informative change or action
`.joy-table--warning`	Indicates a warning that might need attention
`.joy-table--danger`	Indicates a dangerous or potentially negative action

#	Heading	Heading	Heading
1	Content	Content	Content
2	Content	Content	Content
3	Content	Content	Content
4	Content	Content	Content
5	Content	Content	Content
6	Content	Content	Content
7	Content	Content	Content
8	Content	Content	Content
9	Content	Content	Content
10	Content	Content	Content
11	Content	Content	Content

<table class="joy-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="joy-table--active">
      <th scope="row">1</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="joy-table--success">
      <th scope="row">3</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="joy-table--info">
      <th scope="row">5</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="joy-table--warning">
      <th scope="row">7</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr class="joy-table--danger">
      <th scope="row">9</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th scope="row">10</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th class="joy-table--active" scope="row">11</th>
      <td class="joy-table--success">Content</td>
      <td class="joy-table--warning">Content</td>
      <td class="joy-table--danger">Content</td>
    </tr>
  </tbody>
</table>

Responsive Table

Create responsive tables by adding .joy-table--responsive to any .joy-table to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

<table class="joy-table joy-table--responsive">
  <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>
      <th scope="row">1</th>
      <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>
      <th scope="row">2</th>
      <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>
      <th scope="row">3</th>
      <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>