Table

A table displays collections of raw data grouped into rows with supporting headers.

Guidelines

Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to match their current needs.

Tables

Usage

Use tables to structure information and provide an overview, allowing the user to spot patterns and possible issues without being overrun with all the details.

Behaviour

A table always contains a header row that holds the names for each column. Summary should be located at the bottom of a table.

If a table does not fit horizontally, it should then be scrollable within its container or device viewport.

The whole row should be clickable, with a few exceptions;
- when a value needs special attention (highlighted value)
- if a row contains additional information (chevron)

The above actions supersede the default behaviour of a row for contextual actions.

When necessary, table row layout can be converted to a regular list that groups the content within a row in a stack.

Do's and don'ts

Do

  • Try to keep the column names short, preferably to one word. Use tooltip if needed to further explain.
  • It is OK to let content inside a table cell wrap into 2 or more rows. 

Don't

  • Nesting tables can be difficult. Group content as list items instead within a expanded row.
  • Having all rows expanded at first does not achieve a better overview. Urge a user to explore interesting content in a specific row or slideout modal.

 

Examples we like

Responsive tables

https://s.codepen.io/dbushell/debug/wGaamR

More tables

https://uxdesign.cc/design-better-data-tables-4ecc99d23356

Specification

Table - specification

Styles

Tables A

Table - styles A

Tables B

Table - styles B 

Tables C

 Table - styles C

Tables D

 Table - styles D