Explore hierarchical data with expandable nodes.
123456789101112131415161718| Prop | Type | Default | Description |
|---|---|---|---|
nodes? | TreeNode[] | [] | Array of TreeNode objects representing the tree structure (optional) |
selectedIds? | string[] | [] | Array of selected node IDs (optional) |
expandedIds? | string[] | [] | Array of expanded node IDs (optional) |
onSelectionChange? | (selectedIds: string[]) => void | — | Callback when selection changes (optional) |
onExpansionChange? | (expandedIds: string[]) => void | — | Callback when expansion changes (optional) |
showCheckboxes? | boolean | false | Show checkboxes for selection (optional) |
showIcons? | boolean | true | Show default folder/file icons (optional) |
defaultExpanded? | boolean | false | Expand all nodes by default (optional) |
onNodeClick? | (node: TreeNode) => void | — | Callback when a node is clicked (optional) |
onNodeDoubleClick? | (node: TreeNode) => void | — | Callback when a node is double-clicked (optional) |
renderNodeActions? | (node: TreeNode) => ReactNode | — | Function to render custom actions for each node (optional) |
indentSize? | number | 20 | Pixel indentation per level (optional) |
className? | string | — | Additional CSS classes (optional) |
TreeNode interface:
id – string. Unique identifier (required)label – string | ReactNode. Node label text or React node (required)children? – TreeNode[]. Array of child TreeNode objects (optional)icon? – ReactNode | function. Custom icon or function returning icon: (isSelected: boolean) => ReactNode (optional)disabled? – boolean. Disable node interaction (optional)alwaysExpanded? – boolean. Keep node always expanded (optional)hideChevron? – boolean. Hide expand/collapse chevron (optional)data? – object. Additional data for drag & drop, context menu, etc. (optional)className? – string. Additional CSS classes for the node (optional)