Tables are used 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 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.
Cosmos Work uses a 8px system (multiples of eight pixels) to define relationships with the data.
- 8px: The padding to the left & right in a cell.
- 16px (8px * 2): The space between buttons, icons, or text in cell.
- 40px (8px * 5): Default row height.
Last updated: Feb 2020