Tree
DisplayRecursive expandable tree view with selection, drag-reorder, and virtualization for 1000+ nodes.
TreeDisplay · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Tree from @otfdashkit/ui.
Code
// Tree — Recursive expandable tree view with selection, drag-reorder, and virtualization for 1000+ nodes.
//
// Install:
// bun add @otfdashkit/ui
import { Tree } from '@otfdashkit/ui'
export function Example() {
return (
<Tree>
{/* your content */}
</Tree>
)
}Props
Props declared in the Tree source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | TreeNode[] | ||
| defaultExpandedIds | string[] | ||
| estimatedRowHeight | number | 32 | Used when virtualize=true. Default 32. |
| expandedIds | string[] | Controlled expanded ids. | |
| onExpandedChange | (ids: string[]) => void | ||
| onMove | (sourceId: string, targetId: string, position: TreeMovePosition) => void | Define to enable drag-reorder. Omit to disable drag entirely. | |
| onSelect | (node: TreeNode) => void | ||
| selectedId | string | ||
| showLines | boolean | true | Show vertical guide lines from caret to children. Default true. |
| virtualize | boolean | false | Use @tanstack/react-virtual to virtualize visible rows. Default false. |