UI Kit - Tables
Use a table when displaying tabular data or comparing data both vertically and horizontally.
- 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.
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).
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].
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 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.