Tree - Keep React

A Tree component is a user interface element that visually represents hierarchical data structures, often resembling a branching tree. It's commonly used to display parent-child relationships or nested information in a way that's easy to navigate and understand.

Table of Contents#

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.

  • Home Page
  • Footer

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.

  • Home Page(2)
  • Footer(2)

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.

  • Home Page(2)
  • Footer(2)

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.

  • Home Page(2)
  • Footer(2)

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.

  • Home Page(2)
  • Footer(2)

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.

  • Home Page(2)
  • Footer(2)

API Reference#

Explore the available props for the tree component

PropertyDescriptionTypeDefault
nodesAn array of Node objects to be displayed in the tree. It must have id,title and children propertiesArraynodes
showIconDetermines whether icons are displayed for nodes.booleanfalse
showItemsNumberSpecifies whether the number of child items is displayed for parent nodes.booleanfalse
showBorderSpecifies whether borders are displayed around nodes.booleanfalse
ParentIconAn icon to be displayed for parent nodes.ReactNode<FolderNotchOpen/>
ChildIconAn icon to be displayed for child nodes.ReactNode<File/>
showCheckboxDetermines whether checkboxes are displayed for nodes.booleanfalse
itemStyleCustom class to style the tree item.stringNone