Composants de données
<List>, <Table> et <Tree> : virtualisés, triables et sélectionnables.
<List>, <Table> et <Tree> affichent de grands jeux de données. Seules les lignes visibles sont rendues.
<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> et <Tree> partagent les mêmes commandes clavier.
| Touches | Action |
|---|---|
↑ ↓ / j k | Déplacement |
PgUp PgDn, Ctrl+U Ctrl+D | Page, demi-page |
Home End / g G | Premier, dernier |
↵ | onSelect |
| Molette | Déplacement du curseur |
Ils remplissent leur parent par défaut. Passez height pour fixer le nombre de lignes.
<List>
Une liste virtualisée. Chaque ligne a une hauteur d’une cellule.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Description |
|---|---|
items | Tableau quelconque |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Élément ignoré par le curseur |
height | Lignes visibles (par défaut : remplissage) |
highlightedIndex / onHighlight | Curseur contrôlé |
vimKeys | j k g G (par défaut true) |
<Table>
Les colonnes se partagent la largeur restante, sauf si elles définissent width. Les en-têtes et les cellules utilisent les mêmes règles flex et restent donc toujours alignés.
| Champ de colonne | Description |
|---|---|
key | Identifiant et accesseur par défaut |
width / grow | Nombre fixe de cellules ou part de l’espace restant |
align | left right center |
value | Valeur d’affichage et de tri |
render | Contenu personnalisé de la cellule |
compare | Tri personnalisé |
Tri
Avec sortable, appuyez sur le numéro d’une colonne pour trier selon celle-ci (une seconde fois pour inverser l’ordre), sur s pour parcourir les colonnes et sur S pour inverser le sens du tri. Le tri est stable. Contrôlez-le avec sort et onSortChange.
Sélection
selectionMode="multiple" ajoute une colonne de cases à cocher ; Space sélectionne ou désélectionne la ligne surlignée. Utilisez selectedKeys et onSelectionChange pour contrôler la sélection, et getRowKey pour obtenir des clés stables.
<Tree>
Une arborescence dépliable avec des lignes de guidage.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ déplie une branche ou y entre. ← replie une branche ou passe au parent. Space bascule entre les deux états. flattenTree(data, expanded) expose les lignes visibles si vous avez besoin de votre propre moteur de rendu.