Компоненты данных
<List>, <Table> и <Tree>: виртуализация, сортировка и выбор.
<List>, <Table> и <Tree> отображают большие наборы данных. Рендерятся только видимые строки.
<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}`)}/>Навигация
<List>, <Table> и <Tree> используют общую модель управления с клавиатуры.
| Клавиши | Действие |
|---|---|
↑ ↓ / j k | Перемещение |
PgUp PgDn, Ctrl+U Ctrl+D | На страницу, на полстраницы |
Home End / g G | В начало, в конец |
↵ | onSelect |
| Колесо мыши | Перемещение курсора |
По умолчанию они заполняют родительский компонент. Передайте height, чтобы задать фиксированное число строк.
<List>
Виртуализированный список. Высота строки составляет одну ячейку.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Описание |
|---|---|
items | Любой массив |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Пропуск элемента курсором |
height | Видимые строки (по умолчанию: заполнение) |
highlightedIndex / onHighlight | Управляемый курсор |
vimKeys | j k g G (по умолчанию true) |
<Table>
Столбцы делят оставшуюся ширину, если для них не задано width. Заголовки и ячейки используют одинаковые правила flex, поэтому всегда выровнены.
| Поле столбца | Описание |
|---|---|
key | Идентификатор и ключ доступа по умолчанию |
width / grow | Фиксированное число ячеек или доля остатка |
align | left right center |
value | Значение для отображения и сортировки |
render | Пользовательское содержимое ячейки |
compare | Пользовательская сортировка |
Сортировка
При включённом sortable нажмите номер столбца для сортировки по нему (повторно для смены направления), s для перебора столбцов и S для смены направления. Сортировка стабильная. Управляйте ею через sort и onSortChange.
Выбор
selectionMode="multiple" добавляет столбец с флажками; Space переключает выбор подсвеченной строки. Используйте selectedKeys и onSelectionChange для управления выбором, а getRowKey для стабильных ключей.
<Tree>
Раскрываемое дерево с направляющими линиями.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ раскрывает ветвь или переходит в неё. ← сворачивает ветвь или переходит к родительскому узлу. Space переключает состояние раскрытия. flattenTree(data, expanded) предоставляет видимые строки, если вам нужен собственный рендерер.