Daten / Framework
Tabellen
Kompakte Datentabellen: klare Typografie, Status-Badges, Suche, Sortierung und Pagination.
Tabelle wird geladen …
Kompakte Datentabellen: klare Typografie, Status-Badges, Suche, Sortierung und Pagination.
Tabelle wird geladen …
| Team | Typ | Status | ||||
|---|---|---|---|---|---|---|
| DS-001 | Navigation | Design | Komponente | Entwurf | 60 % | |
| DS-002 | Design-Tokens | Engineering | Muster | Entwurf | 61 % | |
| DS-003 | Präsentation | Produkt | Vertrag | In Prüfung | 62 % | |
| DS-004 | Formulare | Betrieb | Komponente | In Prüfung | 63 % | |
| DS-005 | Tabellen | Design | Muster | Freigegeben | 64 % | |
| DS-006 | Diagramme | Engineering | Vertrag | Freigegeben | 65 % | |
| DS-007 | Benachrichtigungen | Produkt | Komponente | Entwurf | 66 % | |
| DS-008 | Typografie | Betrieb | Muster | Entwurf | 67 % | |
| DS-009 | Suche | Design | Vertrag | In Prüfung | 68 % | |
| DS-010 | Bildwelt | Engineering | Komponente | In Prüfung | 69 % | |
| DS-011 | Navigation | Produkt | Muster | Freigegeben | 70 % | |
| DS-012 | Design-Tokens | Betrieb | Vertrag | Freigegeben | 71 % |
Kompakte Zeilen, ruhige Konturen und Badges nach dem gemeinsamen Tabellenmuster. Kennungen und Zahlen stehen in Monospace, numerische Werte sind rechtsbündig. Die Suche durchsucht den vollständigen Datensatz vor der Pagination.
const table = useReactTable({
data, columns,
state: { sorting, globalFilter: search },
onSortingChange: setSorting,
onGlobalFilterChange: setSearch,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: { pagination: { pageSize: 12 } }
});TanStack Table · 250 illustrative Datensätze · lokale Suche, Sortierung und Pagination. Auf kleinen Bildschirmen bleibt die Tabelle innerhalb ihres Rahmens horizontal scrollbar.