components
Table (design)
A table is used to organise and display tabular data in a way that's easy to scan.
Every table consists out of one or more:
- Headers
- Rows
- Columns
- Cells
They can be individually combined in a specific way according to the data to be displayed.
Options
Standard table
Use a standard table to display static tabular data.
Large screens
Small screens
On smaller screens a table will display a horizontal scroll bar if the available screen size is too small to display the full table content.
Emtpy state
An empty state is used when a table has no items to show. It provides an explanation and conveys meaning to the user by displaying an appropriate Icon and description.
Guidelines
- Left align textual data, never use center alignment.
- Numerical data should always be right-aligned for the sake of readability. The corresponding headers should follow.
- Don't use zebra stripes, use column dividers instead.
Related components
List: To display a simple list of text-only related content, use the List component.
Wide List: When you're looking to create a list of related items (that potentially are actionable), use the Wide List component.