Title

The title should be speaking in the sense of the user's understanding, rather than in the system's language and make it clear what type of data the table contains.

Header

Headers indicate what the rows or columns represent and must stand out, for example in bold.

They should be short (one or two words) and aligned with their related data.

The height of the header row must be the same as the height of the content.

The header provides clarity if data is non-descriptive or ambiguous. Tables should always include table headers.

Sorting

Sorting controls improve data tables usability. Sorting controls are located in the column headers and indicated with an arrow or a chevron icon.

A sorted table has 3 states:

unsorted (no icon)
sorted-up (chevron-up + accent color)
sorted-down (chevron-down + accent color)

The icon indicates the current sorted state and is only shown if sorting is activated.

If the data is numerical, the default sorting order is 0 to XXX. If the data is alphabetical, the sorting order will be A to Z. It could be reversed with one click. If the content is not sortable, the functionality is deactivated.

Rows

Can be expanded or collapsed by an icon button containing a chevron icon.

Columns

Numerical data is often right aligned. Text data is left aligned. Columns should be ordered by priority or in a way that tells a story with the data.

Pagination and scrolling

Prefer using pagination (see the pagination component) in cases where the user is searching for specific information due to its flexibility as it allows the user to skip straight to the last few sets if required, otherwise prefer infinite scrolling.

Filtering & Search

Any filtering controls that manipulate the dataset should be placed directly above the table with the option to clear all data. It is also possible to use built-in filters in the table column headers.

Time picker

Usage

When to use