<TreeKit />
Every prop the TreeKit component accepts, grouped by concern.
TreeKit is generic over your node data: TreeKit<T>, inferred automatically from the data prop in almost every case. See Types for the full type definitions referenced below.
Data
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | TreeNode<T>[] | — | Root nodes of the tree. Treated as immutable — TreeKit never mutates it. |
Expansion
| Prop | Type | Default | Description |
|---|---|---|---|
| expandedIds | string[] | — | Controlled set of expanded node ids. |
| defaultExpandedIds | string[] | — | Initial expanded ids for uncontrolled usage. |
| onExpandedChange | (ids: string[]) => void | — | Fires whenever the expanded set changes. |
| onNodeExpand | (node: TreeNode<T>) => void | — | Fires when a specific node transitions to expanded. |
| onNodeCollapse | (node: TreeNode<T>) => void | — | Fires when a specific node transitions to collapsed. |
| expandTrigger | "chevron" | "label" | "either" | "either" | What triggers expand/collapse for a node with children. "either" means the whole row, not just the chevron. |
Checkbox selection
| Prop | Type | Default | Description |
|---|---|---|---|
| showCheckboxes | boolean | true | Render checkboxes at all. |
| checkOnClick | boolean | true | Whether clicking anywhere on a leaf row's body also toggles its checkbox, not just the checkbox itself. |
| checkedIds | string[] | — | Controlled checked ids. |
| defaultCheckedIds | string[] | — | Initial checked ids for uncontrolled usage. |
| onCheckedChange | (ids: string[], meta: { node: TreeNode<T> }) => void | — | Fires whenever the checked set changes. |
| selectionPropagation | { toChildren?: boolean; toParents?: boolean } | { toChildren: true, toParents: true } | Cascade rules — see Selection. |
Active / row selection
| Prop | Type | Default | Description |
|---|---|---|---|
| selectionMode | "none" | "single" | "multiple" | "none" | Whether row clicks drive an 'active' selection, independent of checkboxes. |
| selectedIds | string[] | — | Controlled selected (active) ids. |
| defaultSelectedIds | string[] | — | Initial selected ids for uncontrolled usage. |
| onSelectionChange | (ids: string[], meta: { node: TreeNode<T> }) => void | — | Fires whenever the active selection changes. |
Disabled nodes
| Prop | Type | Default | Description |
|---|---|---|---|
| disabledBehavior | { cascadeToChildren?: boolean; allowExpand?: boolean } | { cascadeToChildren: true, allowExpand: true } | How disabled state propagates — see Disabled Nodes. |
Interaction callbacks
| Prop | Type | Default | Description |
|---|---|---|---|
| onNodeClick | (node: TreeNode<T>, event: MouseEvent) => void | — | Fires on any row click, regardless of selectionMode. |
| onNodeDoubleClick | (node: TreeNode<T>, event: MouseEvent) => void | — | Fires on row double-click. |
| onKeyDown | (event: KeyboardEvent) => void | — | Fires after TreeKit's own keyboard handling, for additional shortcuts. |
Search
| Prop | Type | Default | Description |
|---|---|---|---|
| searchValue | string | — | Active search term. Empty string disables filtering. |
| filterFn | (node: TreeNode<T>, value: string) => boolean | case-insensitive label match | Custom match predicate. |
| highlightMatches | boolean | true | Wrap matched substrings in <mark> in the default renderer. |
| autoExpandOnSearch | boolean | true | Auto-reveal ancestors of a match. |
Async loading
| Prop | Type | Default | Description |
|---|---|---|---|
| onLoadChildren | (node: TreeNode<T>) => Promise<TreeNode<T>[]> | — | Called on first expand of a node with hasChildren and no children array. |
Rendering & appearance
| Prop | Type | Default | Description |
|---|---|---|---|
| renderNode | (context: TreeNodeRenderContext<T>) => ReactNode | — | Replace row markup entirely — see Custom Rendering. |
| icons | TreeKitIcons<T> | — | Chevron / leaf / loading icon overrides — see Icons. |
| classNames | TreeKitClassNames | — | Extra classes on TreeKit's internal row parts — see Styling. |
| variant | "default" | "connected" | "compact" | "spacious" | "file-explorer" | "default" | Built-in layout preset — see Themes & Variants. |
| rowHeight | number | 32 | Row height in px. Drives virtualization math. |
| indent | number | 18 | Indentation per level, in px. |
| disableAnimations | boolean | false | Force all transitions/animations off. |
Virtualization
| Prop | Type | Default | Description |
|---|---|---|---|
| virtualized | boolean | false | Only mount rows in the current scroll viewport. |
| height | number | — | Required with virtualized — fixed pixel viewport height. |
| overscan | number | 6 | Extra rows rendered outside the viewport. |
Misc / DOM
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Extra class on the root element. |
| style | CSSProperties | — | Inline styles on the root — also how you set CSS variables per-instance. |
| id | string | — | id attribute on the root element. |
| aria-label / aria-labelledby | string | — | Accessible name for the root role="tree" element. |