Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lean Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Overview Base Components Overview Base Components Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Table Overview

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 and variants

States

The component has the following states:

  • Default
  • Hover
  • Active

Variants

Default

Image of a table, default

Sortable

This variant has the following states:

  • Unsorted

  • Sorted

    Image of a table, sortable

Groupable

Image of a table, groupable

Selectable

This variant has the following states:

  • Unselected

  • EntrySelected

  • AllSelected

    Image of a table, selectable

Filterable

This variant has the following states:

  • Unfiltered

  • Filtered

    Image of a table, 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".

Inline actions

Image of a table, filterable

  • 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

Image of a table, 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

Image of a example application

Specifications

DesignCode

Find component

Lean

Basics Brand Brand Divider Divider Icon Icon Text Text Typografie Typografie Components Accordion Accordion Autocompletion Autocompletion Breadcrumb Breadcrumb Button Button Buttonbar Buttonbar Checkbox Checkbox Chip Chip Contextmenu Contextmenu Datepicker Datepicker Dialog Dialog Fieldset Fieldset Fileselector Fileselector Filter Filter Header Header Link Link Loading Indicator Loading Indicator Menuitem Menuitem Notification Notification Pagination Pagination Processflow Processflow Radiobutton Radiobutton Select (Dropdown) Select (Dropdown) Sidebar Sidebar Slider Slider Status Status Tab Tab Table Table Tag Tag Textarea Textarea Textexpand Textexpand Textfield Textfield Timefield Timefield Toggle Toggle Tooltip Tooltip Tree Tree Usermenu Usermenu
Imprint Contact Cookie settings