Table
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
- Header row
- Subheader row
- Row
- Separator
- Checkbox column
- Icon column
- Header column
- Info Icon
- Sort icon
- 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.
Row and Columns Variants
Starting from the two types of cells, multiple combinations of rows and columns can be created.
Rows
Columns
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.
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.
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
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.