Basic Usage
A quick tour of the props most trees end up using, before you need the deeper concept pages.
Expansion
Control which nodes start open with defaultExpandedIds, or take full control with expandedIds + onExpandedChange. Clicking anywhere on a parent row expands it by default, not just the chevron — set expandTrigger="chevron" if you want clicks restricted to the chevron only.
Show code
<TreeKit
data={data}
expandedIds={expandedIds}
onExpandedChange={setExpandedIds}
/>Search
Pass a searchValue and TreeKit filters to matching nodes plus the ancestors needed to reach them, highlighting the match by default.
Show code
<TreeKit data={data} searchValue={search} />Disabled nodes
Set disabled: true on any node in your data. By default this cascades to descendants and blocks checking/selecting, while still allowing expand/collapse.
Show code
const data = [
{ id: "users.remove", label: "Remove users", disabled: true },
// ...
];Click callbacks
For behavior beyond selection — opening a file, navigating a route — use onNodeClick and onNodeDoubleClick. Both receive the full TreeNode, so your own data field is available directly:
<TreeKit
data={fileTree}
onNodeDoubleClick={(node) => openFile(node.data.path)}
/>Where to go next
- Selection for the full cascading model.
- Controlled State vs Uncontrolled State.
- API Reference for every prop TreeKit accepts.