Datenkomponenten
<List>, <Table> und <Tree>: virtualisiert, sortierbar und auswählbar.
<List>, <Table> und <Tree> zeigen große Datensätze an. Nur sichtbare Zeilen werden gerendert.
<Table columns={[ { key: "name", header: "Service" }, { key: "region", header: "Region", width: 8 }, { key: "p95", header: "p95", width: 7, align: "right" }, ]} rows={services} sortable selectionMode="multiple" onSelect={(s) => router.push(`/services/${s.name}`)}/>Navigation
<List>, <Table> und <Tree> verwenden dieselbe Tastatursteuerung.
| Tasten | Aktion |
|---|---|
↑ ↓ / j k | Bewegen |
PgUp PgDn, Ctrl+U Ctrl+D | Ganze Seite, halbe Seite |
Home End / g G | Erste, letzte Zeile |
↵ | onSelect |
| Mausrad | Cursor bewegen |
Standardmäßig füllen sie ihr Elternelement aus. Übergib height für eine feste Anzahl von Zeilen.
<List>
Eine virtualisierte Liste. Jede Zeile ist eine Zelle hoch.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Beschreibung |
|---|---|
items | Beliebiges Array |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Vom Cursor übersprungen |
height | Sichtbare Zeilen (Standard: ausfüllen) |
highlightedIndex / onHighlight | Gesteuerter Cursor |
vimKeys | j k g G (Standard: true) |
<Table>
Spalten teilen sich die verbleibende Breite, sofern sie kein width festlegen. Kopfzeilen und Zellen verwenden dieselben Flex-Regeln und bleiben so immer bündig.
| Spaltenfeld | Beschreibung |
|---|---|
key | ID und Standardzugriff |
width / grow | Feste Zellenanzahl oder Anteil am Rest |
align | left right center |
value | Anzeige- und Sortierwert |
render | Benutzerdefinierter Zelleninhalt |
compare | Benutzerdefinierte Sortierung |
Sortierung
Drücke bei aktiviertem sortable die Nummer einer Spalte, um danach zu sortieren (erneut drücken kehrt die Richtung um), s zum Wechseln der Spalte und S zum Umkehren der Richtung. Die Sortierung ist stabil. Steuere sie mit sort und onSortChange.
Auswahl
selectionMode="multiple" fügt eine Spalte mit Kontrollkästchen hinzu; Space schaltet die Auswahl der hervorgehobenen Zeile um. Verwende selectedKeys und onSelectionChange, um die Auswahl zu steuern, und getRowKey für stabile Schlüssel.
<Tree>
Ein aufklappbarer Baum mit Führungslinien.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ klappt einen Zweig auf oder wechselt hinein. ← klappt ihn zu oder springt zum übergeordneten Knoten. Space schaltet zwischen auf- und zugeklappt um. flattenTree(data, expanded) stellt die sichtbaren Zeilen bereit, falls du einen eigenen Renderer brauchst.