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.
• Jede Spalte hat zwingend einen Header (mit Text oder Icon).
• Header können zusätzlich zum Titel noch Untertitel beinhalten.
• 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.
• Spalten können zu logischen Gruppen zusammengefasst werden. Zwischen gruppierten Spalten gibt es keine Trennlinie.
• Mittels Pagination können grosse Datenmengen aufgeteilt werden. Alternativ kann je nach Bedarf auch ein Infinite Scrolling verwendet werden.
• Tastaturbedienung: Zwischen den Zeilen kann mittels Pfeiltasten (hoch, runter) navigiert werden.

4. Ausprägungen und Zustände

Die Komponente hat folgende Zustände:

• Default
• Hover
• Active

4.1 Standard

Design Spezifikation

• Default

Code Spezifikation

• SBB Angular Component Library

4.2 Sortierbar

Diese Ausprägung hat folgende Zustände:

• Unsorted
• Sorted

Design Spezifikation

• Default

Code Spezifikation

• SBB Angular Component Library

4.3 Gruppierbar

Design Spezifikation

• Default

Code Spezifikation

• SBB Angular Component Library

4.4 Selektierbar

Diese Ausprägung hat folgende Zustände:

• Unselected
• EntrySelected
• AllSelected

Design Spezifikation

• Default

Code Spezifikation

• SBB Angular Component Library

4.5 Filtrierbar

Diese Ausprägung hat folgende Zustände:

• Unfiltered
• Filtered

• Die einzelnen Spalten können je nach Inhaltstyp (Text, Datum, Wert etc.) mittels den passenden Komponenten (Textfield, Datepicker, Select etc.) gefiltert werden.
• Es kann auch ein übergreifender Filter zum Einschränken von grossen Datenmengen eingesetzt werden.
• Es empfiehlt sich, die Anzahl der gefilterten Elemente den Benutzer*innen anzuzeigen, z.B. "34 von 3890"

Design Spezifikation

• Default

Code Spezifikation

• SBB Angular Component Library

4.6 Inline Aktionen

• Beim Hover über Zeilen bzw. Fokussierung mittels Tab-Navigation über die Tastatur können Aktionen auf den Elementen angeboten werden.
• Die Aktionen werden mittels Icon Button angeboten. Je nach Anwendungsfall wird entschieden, in welcher Spalte (erste oder letzte Spalte) sie platziert werden. Dort überlagern sie jeweils den bestehenden Content.
• Es sollen maximal 3 Aktionen angeboten werden. Braucht es mehr, sollte ein Contextmenu verwendet werden.
• Tastaturbedienung: Bei Fokus auf einer Zeile der Tabelle kann mittels 'Tab' auf die Aktionen gesprungen werden.

Design Spezifikation

• Default

Code Spezifikation

• SBB Angular Component Library

4.7 Übergreifende Aktionen

• Bei (Mehrfach-)Selektion von Elementen können übergreifende Aktionen angeboten werden.
• Für die Aktionen können alle Ausprägungen von Buttons verwendet werden.
• Die primäre Aktion ist links, die sekundären Aktionen stehen rechts davon.
• Es sollen maximal 3 Aktionen angeboten werden. Braucht es mehr, sollte ein Contextmenu verwendet werden.
• Die übergreifenden Aktionen werden rechts oberhalb der Tabelle angeordnet.

Design Spezifikation

• Default

Code Spezifikation

• SBB Angular Component Library

5. Beispielanwendung