UI Kit - Tables

Tables

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

Example of a table
  • 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.

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 is not truly a bulk action (it does not 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

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