Usage
Basic usage of TreeView with hierarchical data.
TreeView
TreeView component for displaying hierarchical data, such as file systems or organizational charts.
Playground
Experiment with the TreeView component properties.
Properties
styleLines
Style of the connection lines.
size
Size of the tree items.
isDirectory
Render as a directory structure (folder icons).
showLines
Show connection lines between nodes.
Directory Mode
Use isDirectory prop to render the tree as a file system structure with folder icons.
With Lines
Enable connection lines with showLines and customize their style with styleLines.
Root
Child 3
Custom Icons
You can provide custom icons for each node in the data structure.
Selection
Manage selection state with selectedId and onNodeSelect.
Default Expanded
Use defaultExpanded to specify which nodes should be expanded initially.
Custom Label Rendering
Customize how node labels are rendered using the renderLabel prop.
TreeView Props
Props
Prop | Default | Type |
|---|---|---|
data | undefined | TreeNode[] |
defaultExpanded | undefined | string[] |
selectedId | undefined | string |
onNodeSelect | undefined | (id: string) => void |
size | "medium" | "small" | "medium" | "large" |
isDirectory | false | boolean |
showLines | false | boolean |
styleLines | "solid" | "solid" | "dashed" | "dotted" |
renderLabel | undefined | (node: TreeNode) => ReactNode |