Was macht die Komponente?

• Strukturierte Darstellung von Daten innerhalb einer Tabelle.

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.

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.

Zustände

Die Komponente hat folgende Zustände:

• Default
• Hover
• Active

Varianten

Standard

Sortierbar

Diese Variante hat folgende Zustände:

• Unsorted

• Sorted

  

Gruppierbar

Selektierbar

Diese Variante hat folgende Zustände:

• Unselected

• EntrySelected

• AllSelected

  

Filtrierbar

Diese Variante 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"

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.

Übergreifende Aktionen

• Bei (Mehrfach-)Selektion von Elementen können übergreifende Aktionen angeboten werden.
• Für die Aktionen können alle Varianten 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.

Beispielanwendung

Spezifikationen

DesignCode