Table
Semantische Datentabelle für Berichte, Listen und den Data Table. Der Kopf nutzt eine kleine, gedämpfte Schrift, Zeilen trennt eine Haarlinie und Hover legt die versenkte Fläche darunter. Sortierbare Spalten setzen aria-sort und einen echten Button; priority blendet Spalten auf schmalen Viewports aus.
Sortierbar
Jeder Kopf mit onSort wird ein Button. aria-sort meldet den Zustand, der zugängliche Name enthält den Spaltennamen und die nächste Richtung. Zahlen stehen rechtsbündig und tabellarisch.
| Status | |||
|---|---|---|---|
| JKJonas Krenn | NA | Wartet | 40,0 |
| LMLena Maier | 3B | Bestätigt | 38,5 |
| SPSara Pichler | ICU | Getauscht | 36,0 |
| TKTim Keller | 3B | Bestätigt | 39,5 |
| Summe | 154,0 | ||
Dichte und Streifen
density=compact verkleinert die Innenabstände; ohne Prop folgt die Tabelle der Dichte des Providers. striped legt die versenkte Fläche auf ungerade Zeilen, selected hebt eine Zeile mit der Akzentfläche hervor.
| Person | Station | Stunden |
|---|---|---|
| Lena Maier | 3B | 38,5 |
| Jonas Krenn | NA | 40,0 |
| Sara Pichler | ICU | 36,0 |
Klebender Kopf
stickyHeader lässt den Kopf im nächsten Scroll-Container stehen; die Kopfzeile bekommt dafür die Oberflächenfarbe, damit darunter laufende Zeilen nicht durchscheinen.
Spaltenpriorität
priority=3 blendet eine Spalte unterhalb von md aus, priority=2 unterhalb von sm; priority=1 bleibt immer sichtbar. So verliert der Data Table auf dem Handy keine Daten, statt horizontal zu scrollen.
| Person | Station | Status | Stunden |
|---|---|---|---|
| Lena Maier | 3B | Bestätigt | 38,5 |
| Jonas Krenn | NA | Wartet | 40,0 |
| Sara Pichler | ICU | Getauscht | 36,0 |
| Tim Keller | 3B | Bestätigt | 39,5 |