Data Table
Sortierbare, filterbare Tabelle für echte Datenmengen. Suche, Spalten-Sichtbarkeit, Auswahl mit Bulk-Leiste und Pagination sind eingebaut; ab 200 Zeilen schaltet die Virtualisierung ein. Auf dem Handy verschwinden niedrig priorisierte Spalten oder die Tabelle wechselt in eine Kartenansicht. Alle Zahlen sind tabellarisch, alle Zustände folgen den gemeinsamen Control- und Tabellen-Tokens.
Team diese Woche
Suche, Sortierung, Spalten-Sichtbarkeit und Auswahl in einer Tabelle. Der Filter-Builder darüber nutzt toPredicate und filtert dieselben Zeilen clientseitig; die Suche arbeitet zusätzlich auf der gefilterten Menge. „Alle auswählen“ bezieht sich immer auf die sichtbare Menge, der Zähler in der Bulk-Leiste zeigt entsprechend nur diese Zeilen. PRIORITY = 2 blendet eine Spalte unterhalb von sm aus, PRIORITY = 3 unterhalb von md.
6 von 6 Zeilen sichtbar
| LMLena Maier | 3B | Bestätigt | 38,5 | |
| JKJonas Krenn | NA | Wartet | 40,0 | |
| SPSara Pichler | ICU | Getauscht | 36,0 | |
| TKTim Keller | 3B | Bestätigt | 39,5 | |
| NBNora Berger | NA | Wartet | 34,0 |
Karten auf dem Handy
Mit mobile=cards rendert der Data Table unterhalb von md eine Karte pro Zeile statt einer gequetschten Tabelle. renderCard erhält die Originaldaten und kann Avatar, Status und Aktionen frei anordnen. Auf größeren Viewports bleibt die Tabelle sichtbar.
| LMLena Maier | 3B | Bestätigt | 38,5 | |
| JKJonas Krenn | NA | Wartet | 40,0 | |
| SPSara Pichler | ICU | Getauscht | 36,0 | |
| TKTim Keller | 3B | Bestätigt | 39,5 | |
| NBNora Berger | NA | Wartet | 34,0 |
Viele Zeilen
virtualize=auto schaltet ab 200 Zeilen auf Virtualisierung um: Nur der sichtbare Ausschnitt landet im DOM, Sortieren und Filtern arbeiten weiter auf der vollen Menge. Hier scrollen 500 Zeilen flüssig im Tabelle-Rahmen.
| L1Lena Maier 1 | 3B | Bestätigt | 32,0 |
| J1Jonas Krenn 1 | NA | Wartet | 33,0 |
| S1Sara Pichler 1 | ICU | Getauscht | 34,0 |
| T1Tim Keller 1 | 3B | Bestätigt | 35,0 |
| N1Nora Berger 1 | NA | Wartet | 36,0 |
| P1Paul Winter 1 | ICU | Getauscht | 37,0 |
| L2Lena Maier 2 | 3B | Bestätigt | 38,0 |
| J2Jonas Krenn 2 | NA | Wartet | 39,0 |
| S2Sara Pichler 2 | ICU | Getauscht | 40,0 |
| T2Tim Keller 2 | 3B | Bestätigt | 41,0 |
| N2Nora Berger 2 | NA | Wartet | 42,0 |
| P2Paul Winter 2 | ICU | Getauscht | 43,0 |
| L3Lena Maier 3 | 3B | Bestätigt | 32,0 |
| J3Jonas Krenn 3 | NA | Wartet | 33,0 |
| S3Sara Pichler 3 | ICU | Getauscht | 34,0 |
| T3Tim Keller 3 | 3B | Bestätigt | 35,0 |
| N3Nora Berger 3 | NA | Wartet | 36,0 |
| P3Paul Winter 3 | ICU | Getauscht | 37,0 |