Navigieren auf digital.sbb.ch

Zur Startseite von digital.sbb.ch

Table

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).
  • 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).

4. Variants and statuses

The component has the following statuses:

  • Default
  • Hover
  • Active

4.1 Standard

Image of the table component in the standard variant

Design specification

Code specification

4.2 Sortable

This variant has the following statuses:

  • Unsorted
  • Sorted
Image of the table component in the variant sortable

Design specification

Code specification

4.3 Groupable

Image of the table component in the variant groupable

Design specification

Code specification

4.4 Selectable

This variant has the following statuses:

  • Unselected
  • EntrySelected
  • AllSelected
Image of the table component in the variant selectable

Design specification

Code specification

4.5 Filterable

This variant has the following statuses:

  • Unfiltered
  • Filtered
Image of the table component in the variant filterable
  • 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".

Design specification

Code specification

4.6 Inline actions

Image of the table component in the variant with 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.

Design specification

Code specification

4.7 Batch actions

Image of the table component in the variant with 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.

Design specification

Code specification

5. Example application

Image of an example of a table with sorting, selection, filtering, paging and batch actions