Componenti per i dati
<List>, <Table> e <Tree>: virtualizzati, ordinabili e selezionabili.
<List>, <Table> e <Tree> mostrano grandi insiemi di dati. Solo le righe visibili vengono renderizzate.
<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}`)}/>Navigazione
<List>, <Table> e <Tree> condividono lo stesso modello di navigazione da tastiera.
| Tasti | Azione |
|---|---|
↑ ↓ / j k | Spostamento |
PgUp PgDn, Ctrl+U Ctrl+D | Pagina, mezza pagina |
Home End / g G | Primo, ultimo |
↵ | onSelect |
| Rotella | Spostamento del cursore |
Per impostazione predefinita riempiono il contenitore padre. Passa height per un numero fisso di righe.
<List>
Una lista virtualizzata. Le righe sono alte una cella.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Descrizione |
|---|---|
items | Qualsiasi array |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Saltato dal cursore |
height | Righe visibili (predefinito: riempimento) |
highlightedIndex / onHighlight | Cursore controllato |
vimKeys | j k g G (predefinito: true) |
<Table>
Le colonne condividono la larghezza rimanente, a meno che non impostino width. Intestazioni e celle usano le stesse regole flex, quindi restano sempre allineate.
| Campo della colonna | Descrizione |
|---|---|
key | Identificatore e funzione di accesso predefinita |
width / grow | Numero fisso di celle o quota dello spazio rimanente |
align | left right center |
value | Valore per visualizzazione e ordinamento |
render | Contenuto personalizzato della cella |
compare | Ordinamento personalizzato |
Ordinamento
Con sortable, premi il numero di una colonna per ordinare in base a essa (premilo di nuovo per invertire), s per passare da una colonna all’altra e S per invertire la direzione. L’ordinamento è stabile. Controllalo con sort e onSortChange.
Selezione
selectionMode="multiple" aggiunge una colonna di spunta; Space attiva o disattiva la selezione della riga evidenziata. Usa selectedKeys e onSelectionChange per controllarla, e getRowKey per chiavi stabili.
<Tree>
Un albero espandibile con linee guida.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ espande un ramo o vi entra. ← comprime un ramo o passa al padre. Space alterna espansione e compressione. flattenTree(data, expanded) espone le righe visibili se ti serve un renderer personalizzato.