Table ​

Overview

The table component allows building tables with several different types of information.

Usage guidelines ​

When to use ​
  • To organize and display data in a scannable format.
Writing guidelines ​

Length and language

Include only relevant text or data in your table, so that it's easy to scan and understand. Label columns and rows with simple language.

Overflow

If the text is too long to fit in one single cell line, it will wrap to form another line.

Capitalization and case

Write headers and text in sentence case.

Specifications ​

Anatomy ​

Table Anatomy
  1. Header row
  2. Subheader row
  3. Row
  4. Separator
  5. Checkbox column
  6. Icon column
  7. Header column
  8. Info Icon
  9. Sort icon
  10. Alternate column

Cell types ​

There are two main types of cells that can be personalized and combined to create more complex tables layouts:

  • Header cells: are assets specifically designed for headers and sub-headers rows or columns.
  • Regular cells: are assets designed for every other use case outside header and sub-headers. These include regular text cells or cells that display links, tags, buttons or icons.
Header cells
Header cells
Regular cells
Regular cells

Row and Columns Variants ​

Starting from the two types of cells, multiple combinations of rows and columns can be created.

Rows

HeaderRow
HeaderRow
SubHeaderRow
SubHeaderRow
RegularRow
RegularRow

Columns

Checkbox
Checkbox
Text
Text
Tag
Tag
Link
Link
Icon
Icon

Size ​

Table is available in two sizes: Default and Mobile.

You can hide any amount of rows and columns to create the table that suits your needs. When hiding columns from a table, the remaining ones expand in size. You can resize a table horizontally to make it fit into the grid.

To suggest that horizontal scrolling is available in a table, you can add a scroll bar at the bottom and a mask over the last visible column to indicate that there is more content. The same can be done for vertical scrolling, if needed.

Default
Default
Mobile
Mobile

Styling ​

Both regular and header cells can have a White or a Overlay-Sky Blue fill as background. A combination of the two styles can facilitate content scanning for users.

Default
Default
Alternate
Alternate

Behavior ​

Positioning ​

Tables are placed in a page's main content area, ideally with plenty of space around to facilitate readability. If a table doesn't fit horizontally or vertically into a container or device size, add a scrollbar and a mask to suggest that scrolling is available.

Alignment ​

Table should be used in a grid and can be resized to fit in it.

Interaction ​

Checkbox
Checkbox
Tooltip
Tooltip

Accessibility guidelines ​

Keyboard interactions ​

Standard keyboard interactions apply:

  • Tab: give items keyboard focus with the tab key (or shift + tab when tabbing backwards)
  • Enter/Space: activate items.

Accessibility guidelines ​

Keyboard Interactions ​

Standard keyboard interactions apply:

  • Tab: give items keyboard focus with the tab key (or shift + tab when tabbing backwards)
  • Enter/Space: activate items.