Tables display data in a structured format.
Tables display information in an easy to scan format. Tables can be in cards or free floating within a page.
- 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 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.
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)
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.
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.