Navigieren auf



1. What does the component do?

  • Structured display of data within a table.

2. 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.

3. Rules

  • Table cells may contain just information (e.g. text, person, status display, icon) or interaction elements (e.g. text field, select, button).
  • Various actions can be positioned per line (e.g. buttons, icon buttons, links).
  • Every column must have a header (text or icon).
  • Headers can be single or multi-line.
  • 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.
  • When hovering over lines, actions can be provided in the elements using icons.
  • Columns can be put into logical groups. There is no dividing line between grouped columns.

4. Variants and statuses

The component has the following statuses:

  • Default
  • Hover

4.1 Standard

Image of the table component in the standard variant

Design specification

Code specification

4.2 Grouped

Image of the table component with grouped content

Design specification

Code specification

4.3 Sortable

This variant has the following statuses:

  • Sorted
  • Unsorted
Image of the table component with sorting

Design specification

Code specification