Data display
Virtual trees
A hierarchy painted one window at a time
registry-01
namespace-01
package-011.1.0
package-021.2.0
package-031.3.0
package-041.4.0
package-051.5.0
package-061.6.0
package-071.7.0
package-081.8.0
package-091.9.0
1–7 in view · 11 mounted of 1884
Usage
import { VirtualTree, useExpandedRows } from "@gpuixui/data";
const tree = useExpandedRows({ roots: files, keyOf, childrenOf, labelOf });
<VirtualTree
aria-label="Workspace files"
height={320}
rows={tree.rows}
cursor={tree.cursor}
onCursorChange={tree.setCursor}
labelOf={labelOf}
onActivate={(row) => open(row.node)}
/>;API
VirtualTree
| Prop | Type | Default | Consequence |
|---|---|---|---|
rows | TreeRow<T>[] | — | the whole flattened set, in paint order |
labelOf | (node: T) => string | — | the row's accessible name and what type-ahead matches; a blank label reads as the row's key |
cursor | TreeCursor | — | the caller's cursor; omit it for an uncontrolled tree |
onCursorChange | (cursor: TreeCursor) => void | — | reports every cursor a key, a press or a window move produces |
defaultCursor | TreeCursor | nothing open | the uncontrolled tree's start |
onActivate | (row: TreeRow<T>) => void | — | a press or Enter on a row |
renderRow | (row: TreeRow<T>) => ReactNode | labelOf as text | paints a row's content after its inset and chevron |
height | number | the bounded column's height | the viewport height; a height the layout cannot paint is no height, so the tree fills the column and windows against the height it measured |
rowHeight | number | the density's rowHeight, or the library's row when the theme carries no density group | every row paints exactly this height |
overdraw | number | 4 | rows mounted beyond the viewport on each side |
onVisibleRange | (range: VisibleRange) => void | — | the runtime's lagging report, for a readout or pagination |
instanceRef | (instance: PublicInstance | null) => void | — | the list's painted element, for a probe that reads its scroll anchor |
className | string | — | joined after the recipe |
testId | string | — | the tree; each row is ${testId}-row-${key} and its chevron slot ${testId}-row-${key}-slot |
Edit this page on GitHubpackages/data/docs/virtual-tree.mdx