Table
Search the component library

Table

v1.1.0-beta.1
Download UI Kit v2.1.0

Provides standard designs and layouts for static (i.e. CSS-only) tables.

Download UI Kit v2.1.0

Usage Guidelines

Every instance of a static table should use this component. For more complex tables with sorting, filtering, etc. see the Interactive Table component.

Features

  • Standard and small sizes
  • Hoverable rows
  • Integration with inputs and buttons
  • Secondary data line within each cell
  • Three responsive strategies
  • Sortable columns <span class="js-tag">JS</span>
  • Selectable rows and a toolbar <span class="js-tag">JS</span>

Basic Table

The basic table does what you would expect, presenting data in a static tabular format with headers.

Columns can be left, center, or right aligned.

Multiline cell content should be avoided where possible, but is allowed if necessary. Content should be top aligned.

Note that headers are required for accessibility compliance.

Small Table

A more compact table for situations where the table needs to fit in a smaller space or a large amount of data needs to be presented.

Multiline cell content should be avoided where possible, but is allowed if necessary. Content should be top aligned.

Advanced Features

There are a couple special features available for the basic table (not the small size).

Inputs and Buttons

Forms can include smaller form inputs or buttons if necessary.

Secondary Row

Cells may contain a secondary line of related data below the main entry.

This option should not be used if any of the cells wrap to two or more lines on content.

Interactive Features

Sortable Columns

Clicking on a column heading sorts the table by the values in that column. Selecting the same column heading twice alternates between ascending and descending order.

If a table has a default sort order it should display the relevant icon at initial presentation.

Sort icon positioning correlates with the alignment of the column it belongs to. A left-aligned column gets the icon on the far right, etc.

Example of a sortable table showing the header hover state.

Illustration of the icon positioning for various header alignments.

The animations for sorting a centered column and when alternating between ascending and descending order.

Selectable Rows

In cases where users may need to select and act on one or more rows you may add a checkbox column and include a toolbar at the top of the table.

Clicking or tapping any non-interactive part of a row will select that row. Holding down shift and selecting a second row will select all the intervening rows as well.

The toolbar should contain any actions that can be performed on selected rows, such as copy or delete. It may also contain tools which don't require a selection, such as search or filter.

Responsive

There are several strategies for ensuring a table works at each breakpoint.

Removing columns

If you determine that certain fields in your table are optional in nature, you can simply remove them to reduce the overall table width until it fits in mobile viewports.

Combining fields

Depending on the type of information presented, a simple way to fit tables into a smaller viewport is combining multiple columns into one. For example, dedicated First and Last name columns can be joined under 'Name'.

Secondary row

Less important information may be moved from a dedicated column to the secondary row option.

This method should not be used if any cell might wrap to two or more lines.

Switching designs

For larger, more complex tables with a lot of non-optional data it may be necessary to change from using a table to some other display strategy in the mobile view. For example, you may adopt a list view where each item can be opened up to view its complete dataset.

Redlines

Basic Table

Header20px horizontal padding
12px vertical padding
Brightly lit (#e6e6e6) background
Bold Label typography
1px solid Hairline Gray (#d0d0d0) border around each cell
Vertically aligned to the center (if a header wraps to two columns)
Headers are a non-optional feature of all table types (for accessibility compliance)
Rows20px horizontal padding
14px vertical padding
Alternate White (#ffffff) and Dirty Ice (#f8f8f8) background colors
1px solid Hairline Gray (#d0d0d0) top/bottom border
Basic Label typography
Vertically align to the top (if a cell wraps to two or more columns)
Secondary RowBasic Label, secondary color
3px below main row
Inputs/ButtonsInputs and buttons are vertically centered in the row
They don't push out the 14px vertical padding, however

Small Table

Header12px horizontal padding
10px vertical padding
Otherwise same as basic table
Rows12px horizontal padding
8px vertical padding
Small Label typography
Otherwise same as basic table

Changelog

1.1.0-beta.1

  • ADDED: Sortable column feature
  • ADDED: Selectable rows and table toolbar features

1.0.0

Initial Version