Navigieren auf digital.sbb.ch

Beta

Table

1. Was macht die Komponente?

  • Strukturierte Darstellung von Daten innerhalb einer Tabelle.

2. Wann soll die Komponente eingesetzt werden?

  • Einsatz bei der Darstellung von Daten, nicht zur Strukturierung von Content.
  • Tabellen sollen so aufgebaut werden, dass diese beim Hinzufügen von Datensätzen in der Vertikalen (Zeilen) wächst.

3. Regeln

  • Tabellenzellen können entweder nur Information (z.B. Text, Person, Statusanzeige, Icon, ...) oder Interaktionselemente (z.B. Textfeld, Select, Button, ...) enthalten.
  • Pro Zeile können verschiedene Aktionen platziert werden (z.B. Buttons, Icon-Buttons, Links).
  • Jede Spalte hat zwingend einen Header (Text oder Icon).
  • Header können ein- oder mehrzeilig sein.
  • Header- und Zeileninhalte können innerhalb der Tabellenzelle links-, rechtsbündig oder zentriert sein: Text linksbündig, Icons zentriert, Zahlen rechtsbündig
  • Masseinheiten von Inhalten werden optimalerweise auf der zweiten Zeile des Spaltenheaders eingefügt. Alternativ können sie direkt neben der Spaltenheader-Bezeichnung in runden Klammern angezeigt.
  • Horizontales Scrolling sollte wo möglich vermieden werden.
  • Beim Hover über Zeilen können Aktionen auf den Elementen mittels Icons angeboten werden.
  • Spalten können zu logischen Gruppen zusammengefasst werden. Zwischen gruppierten Spalten gibt es keine Trennlinie.

4. Ausprägungen und Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover

4.1 Standard

Darstellung der Komponente Tabelle in der Standard Ausprägung

Design Spezifikation

4.2 Gruppiert

Darstellung der Komponente Tabelle mit gruppierten Inhalten

Design Spezifikation

4.3 Sortierbar

Diese Ausprägung hat folgende Zustände:

  • Sorted
  • Unsorted
Darstellung der Komponente Tabelle mit Sortierung

Design Spezifikation