Componentes de datos
<List>, <Table> y <Tree>: virtualizados, ordenables y seleccionables.
<List>, <Table> y <Tree> muestran grandes conjuntos de datos. Solo se renderizan las filas visibles.
<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}`)}/>Navegación
<List>, <Table> y <Tree> comparten un modelo de navegación por teclado.
| Teclas | Acción |
|---|---|
↑ ↓ / j k | Desplazarse |
PgUp PgDn, Ctrl+U Ctrl+D | Avanzar o retroceder una página, media página |
Home End / g G | Ir al principio, al final |
↵ | onSelect |
| Rueda | Mover el cursor |
Por defecto, ocupan todo el espacio de su contenedor padre. Pasa height para fijar el número de filas.
<List>
Una lista virtualizada. Las filas tienen una altura de una celda.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Descripción |
|---|---|
items | Cualquier array |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Elemento omitido por el cursor |
height | Filas visibles (por defecto: ocupar todo el espacio) |
highlightedIndex / onHighlight | Cursor controlado |
vimKeys | j k g G (por defecto true) |
<Table>
Las columnas se reparten el ancho restante salvo que definan width. Los encabezados y las celdas usan las mismas reglas flex, por lo que siempre quedan alineados.
| Campo de columna | Descripción |
|---|---|
key | Identificador y función de acceso por defecto |
width / grow | Número fijo de celdas o proporción del espacio restante |
align | left right center |
value | Valor para mostrar y ordenar |
render | Contenido personalizado de la celda |
compare | Ordenación personalizada |
Ordenación
Con sortable, pulsa el número de una columna para ordenar por ella (otra vez para invertir el orden), s para recorrer las columnas y S para invertir la dirección. La ordenación es estable. Contrólala con sort y onSortChange.
Selección
selectionMode="multiple" añade una columna de casillas de selección; Space alterna la selección de la fila resaltada. Usa selectedKeys y onSelectionChange para controlarla, y getRowKey para obtener claves estables.
<Tree>
Un árbol expandible con guías.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ expande una rama o entra en ella. ← contrae una rama o salta al nodo padre. Space alterna entre expandir y contraer. flattenTree(data, expanded) expone las filas visibles si necesitas tu propio renderizador.