Tree - Keep React
Table of Contents#
- Default Tree
- Tree With Items Number
- Tree Items With Border
- Tree With Checkbox
- Tree Items With Folder Icon
- Tree With Checkbox Folder Icon
- API Reference
Default Tree#
The DefaultTree component is a pre-configured Tree component that uses a list of nodes to display hierarchical data in a branching structure.
Tree With Items Number#
Tree with Items Number is a Tree component that provides a numerical representation of the quantity of items associated with each node in the hierarchy. The feature is activated by setting the showItemsNumber prop to true.
Tree Items With Border#
Tree Items with Border is a Tree component that displays its hierarchical structure with each item enclosed in a border. The showBorder prop, when set to true, activates this feature.
Tree With Checkbox#
Tree with Checkbox is a Tree component that enhances its hierarchical structure by including checkboxes next to each node. The showCheckbox prop, set to true, enables this feature.
Tree Items With Folder Icon#
Tree Items with Folder Icon is a Tree component that augments its hierarchical structure with icons representing folders for parent nodes and files for child nodes. The showIcon prop, when set to true, activates this feature. For parent nodes, the ParentIcon prop displays a folder icon, while the ChildIcon prop presents a file icon for child nodes.
Tree With Checkbox Folder Icon#
Tree with Checkbox and Folder Icon is a Tree component that combines checkboxes with icons representing folders for parent nodes and files for child nodes. To achieve this combination, you can utilize the showIcon={true}, showCheckbox={true}, ParentIcon, and ChildIcon props.
API Reference#
Explore the available props for the tree component
| Property | Description | Type | Default |
|---|---|---|---|
| nodes | An array of Node objects to be displayed in the tree. It must have id,title and children properties | Array | nodes |
| showIcon | Determines whether icons are displayed for nodes. | boolean | false |
| showItemsNumber | Specifies whether the number of child items is displayed for parent nodes. | boolean | false |
| showBorder | Specifies whether borders are displayed around nodes. | boolean | false |
| ParentIcon | An icon to be displayed for parent nodes. | ReactNode | <FolderNotchOpen/> |
| ChildIcon | An icon to be displayed for child nodes. | ReactNode | <File/> |
| showCheckbox | Determines whether checkboxes are displayed for nodes. | boolean | false |