v0.27.0
The StatefulTree
component is used to display a tree of items. Useful for defining a tree of categories or subcollections.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
defaultExpanded | string[] |
| An array of expanded node ids. Can also be used to reset expanded nodes. |
defaultSelected | string[] |
| An array of selected node ids. Can also be used to reset selected nodes. |
disabledNodes | string[] |
| An array of disabled node ids. Nodes will not be abled to be selectedable but can still expand/collapse. |
iconless | boolean |
| Hides/shows all icons on the tree. |
id | string |
| Defines a HTML id attribute to the parent wrapper. |
nodes * | TreeNode[] |
| Nodes to render in the tree. See below for usage. |
onExpandedChange | (expandedNodes: string[]) => void |
| Function that will get called when a tree node is expanded/collapsed. Passes the ids of expanded nodes as an argument. |
onNodeClick | (event: React.MouseEvent<HTMLLIElement>, nodeId: string) => void |
| Function that will get called when a tree node is clicked. |
onSelectionChange | (selectedValues: T[]) => void |
| Function that will get called when a tree node is selected/deselecteds. Passes the values of selected nodes as an argument. |
selectable | multi | radio |
| Determines the type of selectable tree to render. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
children | TreeNode[] |
| Children for the current node. |
icon | Icon |
| Custom icon, in place of the folder icon. |
id * | string |
| TreeNode identifier, must be unique. |
label * | string |
| Label for the tree node. |
value | T |
| Value of the selected node. A checkbox or radio will not appear if |
Props ending with * are required
Edit the code below to see your changes live!
You can replace the folder icon with a custom icon of your choice.
Edit the code below to see your changes live!