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.

Alignment

Table header (labels)

• The header row holds the labels for each column. The label should align (left or right) with the data in its column.
• Sorting arrows are placed after the label.
• If checkboxes are used, the “select all” checkbox is placed in the header.

Aligning text and numbers

Right-align

• Numeric data. The user should easily be able to compare when scanning down columns. Use the same number of decimal places. (Values in SEK or % etc.)
• Last column. For a nice clean ending of the table. Could be a text or a button.

Left-align

• Text. (Name, product, description etc.)
• Non-numeric numbers. (Date, account number, phone number, ID number etc.)

Column order

Left-hand side

• Checkbox
• Expanding chevron (down-arrow)
• If both checkbox and expanding chevron, then the chevron is to the left.

Right-hand side

• Buttons
• Chevron link to another page or modal (right-arrow)
• If both button and chevron link, then the chevron is to the right.

Links

• When there are links to another page, modal or to expand the row, then the whole row is clickable. A hover effect on the row makes this more obvious for the user.
• Exceptions: If you need multiple links/clickable areas in one row, then separate and use regular links.

Table footer (summary)

• When used it’s located at the bottom of the table. Use a label (e.g. Total) on the left-hand side.

Big 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.

Responsive tables 

Depending 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

• 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. 

• 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

These are examples of table behaviours that we like:

• Responsive tables: https://s.codepen.io/dbushell/debug/wGaamR
• More on tables: https://uxdesign.cc/design-better-data-tables-4ecc99d23356

Column labels

Use short column labels, preferably one word, but no more than three if there is enough space. Use tooltips if you need further explanations.

Upper and lower case

Don’t start each word in headings and labels with upper case. Only use upper case in:

• The first letter of the first word
• The first letter of proper names
• Abbreviations

Use soft hyphens in case of insufficient space

In need of hyphenation, use soft hyphens (­), so that the word is hyphened only if needed.

Empty values

Show the character en dash (–) – instead of empty values.

Aligning numbers

While plain text normally should be left-aligned, values that are numbers should be right-aligned.

Error messages or other messages in tables

In some cases error handling might be needed in tables. Remember to be concise as space is usually extra limited. If the message is short it can be shown in one of the table columns, longer messages are shown in a separate row below the data it concerns. Messages may contain a link to the help page or another page. Messages below should be limited to two rows, including the link.

Example

When a mutual fund has been removed from our range, but the customer still hasn’t changed her or his default fund distribution. When the customer wants to buy funds in accordance with the default fund distribution or change the distribution, an error message is shown in under the old fund.

It is no longer possible to trade in the fund. Change the fund distribution

Measurements

• Text: Grey 800
• Header font: 16 px, medium

Specification

Icon

• FontAwesome solid "chevron-up" and solid "chevron-down", on top of each other
• Width 10 px
• Height 16 px (together)

States

• Normal: Grey 300
• Selected: Dark blue 2
• Hover: Blue

Colours

• Grey 800
• Grey 300
• Dark blue 2
• Blue

Dark mode

Read more about Pattern: Dark mode