Componentes de dados
<List>, <Table> e <Tree>: virtualizados, ordenáveis e selecionáveis.
<List>, <Table> e <Tree> exibem grandes conjuntos de dados. Apenas as linhas visíveis são renderizadas.
<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}`)}/>Navegação
<List>, <Table> e <Tree> compartilham o mesmo modelo de navegação por teclado.
| Teclas | Ação |
|---|---|
↑ ↓ / j k | Mover |
PgUp PgDn, Ctrl+U Ctrl+D | Avançar ou recuar uma página, meia página |
Home End / g G | Ir para o primeiro, o último |
↵ | onSelect |
| Roda do mouse | Mover o cursor |
Por padrão, eles preenchem o elemento pai. Passe height para definir um número fixo de linhas.
<List>
Uma lista virtualizada. As linhas têm uma célula de altura.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Descrição |
|---|---|
items | Qualquer array |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Ignorado pelo cursor |
height | Linhas visíveis (padrão: preencher) |
highlightedIndex / onHighlight | Cursor controlado |
vimKeys | j k g G (padrão true) |
<Table>
As colunas compartilham a largura restante, a menos que definam width. Cabeçalhos e células usam as mesmas regras de flex, por isso ficam sempre alinhados.
| Campo da coluna | Descrição |
|---|---|
key | ID e acessor padrão |
width / grow | Células fixas ou fração do espaço restante |
align | left right center |
value | Valor de exibição e ordenação |
render | Conteúdo personalizado da célula |
compare | Ordenação personalizada |
Ordenação
Com sortable, pressione o número de uma coluna para ordenar por ela (novamente para inverter), s para alternar entre colunas e S para inverter a direção. A ordenação é estável. Controle-a com sort e onSortChange.
Seleção
selectionMode="multiple" adiciona uma coluna de caixas de seleção; Space alterna a seleção da linha destacada. Use selectedKeys e onSelectionChange para controlar a seleção, e getRowKey para chaves estáveis.
<Tree>
Uma árvore expansível com guias.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ expande ou entra em um ramo. ← recolhe ou vai para o nó pai. Space alterna entre expandido e recolhido. flattenTree(data, expanded) expõe as linhas visíveis se você precisar de um renderizador próprio.