Tables

Tables

Use a table when displaying tabular data, or comparing data both vertically and horizontally.

Example of a table

Usage

  • Tables should extend to 100% of the available space.
  • Numeric cell data should align right, otherwise the data should be left-aligned.
  • Columns containing a single icon should be aligned to the center.
  • Column headings should always match the text alignment of the data in the column.
  • Columns should be presented in a logical order.

Table actions

Tables can have actions that apply to the entire list, or to specific items.

The primary table action (such as adding a new row) should display as a button at the top right of the container in the header of the table. Exceptions are for multiple grids appearing in a single container, grids appearing in tabs, or inline actions on tiny lists.

Table with

If there are more than two table actions available, they should be consolidated into a dropdown labeled “Actions”. An exception to this is for an action that adds a new row to the grid; this should appear in its own button, since it’s not truly a bulk action (it doesn’t apply to the entire grid).

Table with multiple actions

If there are actions that apply to specific items in a table, display them at the far right of the table row, right-justified. If there is more than 1 action, they should be in this order: [Action], [Configure/Edit], [Delete/Remove], [More].

Table with two inline actions

If there are three or more inline actions, they should appear inside a three-dots hamburger menu, in descending order of importance or frequency of use. If there is a “delete” option, it should be at the bottom, separated by a horizontal rule.

Table with three inline actions, shown in a menu

Last updated: Jul 2018

Mobile tables

Table controls are responsive, and on mobile devices they will reformat automatically to work for that form factor. The primary column from the table becomes the header for the item, and other columns in the table are listed with the labels on the left and values on the right.

Mobile table list example

Last updated: Jul 2018

Next: Tabs