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
Design Spezifikation
Code Spezifikation
4.2 Gruppiert
Design Spezifikation
Code Spezifikation
4.3 Sortierbar
Diese Ausprägung hat folgende Zustände:
- Sorted
- Unsorted
