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.
  • Initial display set to 100 rows in most use-cases. Progressive scroll of the primary table on a list-page is preferred.


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: Oct 2020