Tables

Sortable and paginated tables are needed to display complex data sets and allow users to find what they’re looking for.

Sortable table

A sortable table should have icons indicating that each column can be used to sort. The active sorting state will be shown with a down or up arrow indicating that the data is being sorted by that column in either ascending or descending order. The “off” columns will show the standard double arrow indicating they are not the active column.

The hover state will highlight the entire icon indicating the whole thing is clickable to toggle between ascending and descending.

Each column should be sized automatically to fit the content. There is a 16px margin between columns. The entire table should fit the width of the screen without needing any horizontal scrolling. Use zebra striping as the default view of tables.

Responsive

When the screen is too small to fit the content, adapt the table to the mobile version where each row has the column data displayed with the labels inside it.

If possible, keep the ability to sort. An example of that is seen above - where the table gains a dropdown field that allows the user to choose the column and direction to sort by.

Specs

• Table labels font size: base1 (mobile), base3 (desktop)

• Table labels line height: base5 (mobile), base7 (desktop)

• Table content font size: body copy small

• Row padding: 4px 8px

Inspect sortable tables in brand styles in Figma

Pagination

Pagination may be needed on tables or long lists. List 3-4 of the surrounding page numbers (depending on what fits). Use double caret icons to indicate if there are more page to the left or right. Always include a “previous” and “next” button. Use a disabled state for the current page and disabled previous/next buttons.

Specs

• Button outline: 1px solid gray 20

• Default button text color: primary 100

• Default button hover outline: 2px solid dark accent

• Default button hover text color: dark accent

• Disabled/current button background color: gray 5

• Disabled/current button text color: gray 100

• Button height/width: 44px 44px (mobile), 48px 54px (desktop)

• Next/prev button padding: auto 8px (mobile), auto 12px (desktop)

• Font size: base3 (mobile), base5 (desktop)

Inspect pagination in brand styles in Figma