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 |