Tables are used when displaying tabular data or comparing data both vertically and horizontally.

table component

Best practices

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

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.

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 as a separate button as it is not truly a bulk action (it does not apply to the entire grid).

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 one action, they should appear in this order: Action, Configure/Edit, Delete/Remove, More.

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.

Last updated: Dec 2019