Table

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

Short description

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

When and how to use it

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 the user is transported (to another view, to a slide-out, etc), the whole row should be clickable. There are a few exceptions:

  • When a value needs special attention (highlighted value)
  • If a row contains additional information (chevron)

Big, huge tables

If a table does not fit horizontally, it should be scrollable within its container or device viewport. When necessary, table row layout can be converted to a regular list that groups the content within a row in a stack.

What about responsive tables? 

This is something we talk about all the time. It all depends on the size of the tables, the amount of data in it and what you can do with it. Primarily we see the following three ways to do responsive tables:

1. Prioritised columns

This is the way that makes most sense. Make careful choices as to what columns should be presented or hidden in smaller viewports. Usually it is possible to hide more than you think! 

2. Scrolling table

The table size is fixed and our user can scroll in horizontally to view all columns.

3. Cell table

All, or prioritized columns, are grouped into one cell that may be spread on multiple lines to summarize the columns of the table.

 

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.
  • When needed, use the smaller input fields and buttons within in a table or a list. 

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

  • Header font: 16 px, medium, Grey 800 #333333

Sorting icon

  • Normal = Grey 300 (#DEDEDE), Selected= Dark Blue 2 (#007AC7), Hover = Blue (#41B0EE)
  • FontAwesome solid "chevron-up" and solid "chevron-down", on top of each other, width 10 px height 16 px (together)

Styles