Skip to content
search icon
clear
Component Status

Tables display data in a structured format.

Guidelines

Tables display information in an easy to scan format. Tables can be in cards or free floating within a page.

Don't

  • Do not use a table without a header row.
  • Do not add zebra striping.
  • Do not use a table with less than two columns.
  • Do not spell out numbers in tables.
  • Do not mix text/label alignments within the same column.
  • Do not use center alignment.
  • Do not create a null state that can be confused as content.

Compact

Compact tables could be implemented as a supplement to the default/comfortable table. If implemented, the selection of display density should be accessed through the accessibility menu in the top bar. The change of density is global, and will therefore affect all tables in the product.

Variations

Header

The header row can have icons and text. Icons can be used for sorting columns as well as a text alternative.

Avoid labels that are too long. Titles should be to the point and short and no more than three words. Note that if the label is longer than the width available, it will be truncated and should have a tooltip provided. Labels should be aligned left except when numeric---then either left or right alignment is permitted.

Header icon (with placeholder icon)

FigmaExternal linkFigma design of table header icon

Header text

The header text component includes options for writing unit for the column and a placeholder icon for sorting icons. This component uses auto layout to place Label text, icon and/or unit with the right spacing next to each other. Make sure to resize the component so that the spacing on the right is aligned to the most right part of the contents.

FigmaExternal linkFigma design of table header text

Cell

The cell row can have icons, text, links, inputs, numbers, monospaced numbers and other custom content (by using the placeholder). For cells containing numbers only, use Cell monospaced numeric for better readability and easier comparison and scannability of numbers between rows.

Cell icon (with placeholder icon)

Use the color ´Text +static icons/Default´ for icons that are not interactive, but use ´Interactive Primary/Resting´ for icons that are interactive, like checkboxes. For disabled state, use the color ´Interactive Disabled/Text´ for icons that are not interactive, but use ´Interactive Disabled/Fill´ for icons that are interactive, like checkboxes.

FigmaExternal linkFigma design of table cell icon

Cell text

FigmaExternal linkFigma design of table cell text

Cell monospaced numeric

FigmaExternal linkFigma design of table cell with monospaced numeric

Cell placeholder

FigmaExternal linkFigma design of table cell

Cell with text input

If Cell input is used in a column made out of Cell monospaced numeric components, the text should be aligned to the right to match the alignment of the other cells in the column.

FigmaExternal linkFigma design of table cell with text input

Demo

NameAllegianceKill count
Luke SkywalkerRepublic369470
Darth VaderSith59
Edit this page on GitHub