Komponenty danych
<List>, <Table> i <Tree>: wirtualizacja, sortowanie i zaznaczanie.
<List>, <Table> i <Tree> wyświetlają duże zbiory danych. Renderowane są tylko widoczne wiersze.
<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}`)}/>Nawigacja
<List>, <Table> i <Tree> mają wspólny model obsługi klawiatury.
| Klawisze | Działanie |
|---|---|
↑ ↓ / j k | Przesuwanie |
PgUp PgDn, Ctrl+U Ctrl+D | Przesuwanie o stronę, pół strony |
Home End / g G | Przejście do pierwszego, ostatniego wiersza |
↵ | onSelect |
| Kółko myszy | Przesuwanie kursora |
Domyślnie wypełniają element nadrzędny. Przekaż height, aby ustalić liczbę wierszy.
<List>
Lista wirtualizowana. Wiersze mają wysokość jednej komórki.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Opis |
|---|---|
items | Dowolna tablica |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Pomijanie przez kursor |
height | Widoczne wiersze (domyślnie: wypełnienie) |
highlightedIndex / onHighlight | Kontrolowany kursor |
vimKeys | j k g G (domyślnie true) |
<Table>
Kolumny dzielą pozostałą szerokość, chyba że mają ustawione width. Nagłówki i komórki używają tych samych reguł flex, więc zawsze są wyrównane.
| Pole kolumny | Opis |
|---|---|
key | Identyfikator i domyślny akcesor |
width / grow | Stała liczba komórek lub udział w pozostałej szerokości |
align | left right center |
value | Wartość do wyświetlania i sortowania |
render | Własna zawartość komórki |
compare | Własne sortowanie |
Sortowanie
Przy włączonym sortable naciśnij numer kolumny, aby według niej sortować (ponownie, aby odwrócić kierunek), s, aby przełączać kolumny, i S, aby odwrócić kierunek. Sortowanie jest stabilne. Kontroluj je za pomocą sort i onSortChange.
Zaznaczanie
selectionMode="multiple" dodaje kolumnę pól wyboru; Space przełącza zaznaczenie podświetlonego wiersza. Użyj selectedKeys i onSelectionChange, aby kontrolować zaznaczenie, oraz getRowKey, aby zapewnić stabilne klucze.
<Tree>
Rozwijane drzewo z liniami pomocniczymi.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ rozwija gałąź lub do niej przechodzi. ← zwija gałąź lub przechodzi do elementu nadrzędnego. Space przełącza rozwinięcie. flattenTree(data, expanded) udostępnia widoczne wiersze, jeśli potrzebujesz własnego renderera.