What does the component do?
- Structured display of data within a table.
When should the component be used?
- It is used for displaying data, not for structuring content.
- Tables should be structured so that they grow vertically (lines) when data sets are added.
Rules
- Table cells may contain just information (e.g. text, person, status display, icon) or interaction elements (e.g. text field, select, button).
- Every column must have a header (including text or icon).
- Headers can contain subtitles in addition to the title.
- Header and line content may be left-aligned, right-aligned or centred within the table cell: Text left-aligned, icons centred, numbers right-aligned
- Units of measurement in content are ideally entered on the second line of the column header. Alternatively, they can appear directly next to the column header name in round brackets.
- Horizontal scrolling should be avoided as far as possible.
- Columns can be put into logical groups. There is no dividing line between grouped columns.
- Large amounts of data can be divided up using
pagination . Alternatively, infinite scrolling can be used if required. - Keyboard operation: between the lines can be navigated using the arrow keys (up, down).
States
The component has the following states:
- Default
- Hover
- Active
Variants
Default
Sortable
This variant has the following states:
- Unsorted
- Sorted
Groupable
Selectable
This variant has the following states:
- Unselected
- EntrySelected
- AllSelected
Filterable
This variant has the following states:
- Unfiltered
- Filtered
- The individual columns can be filtered according to content type (text, date, value, etc.) using the appropriate components (
Textfield ,Datepicker ,Select , etc.). - A separate
Filter can also be used to restrict large amounts of data. - It is advisable to display the number of filtered items to the users, e.g. "34 out of 3890".
Inline actions
- When hovering over rows or focusing them using tab navigation via the keyboard, actions can be offered on the elements.
- The actions are offered by using
icon button . Depending on the use case, it is decided in which column (first or last column) they are placed. There they overlay the existing content. - A maximum of 3 actions should be offered. If more are needed, a
contextmenu should be used. - Keyboard operation: if the focus is on a row in the table, it's possible to navigate to the actions using 'Tab'-key of the keyboard.
Batch actions
- Batch actions can be offered on selection of (multiple) elements.
- All versions of
buttons can be used for the actions. - The primary action is on the left, the secondary actions are on the right.
- A maximum of 3 actions should be offered. If more are needed, a
contextmenu should be used. - The batch actions are placed above the table on the right.
Example application
