Tree

The Tree component is used to display hierarchical data, such as a directory structure or nested categories.

Usage

Use the Tree component to present nested items in a collapsible format. This component supports drag-and-drop capabilities for reordering.

Basic Usage

Displays a simple tree with default styling.

<Tree items={[{ id: '1', label: 'Root Node', children: [{ id: '2', label: 'Child Node' }] }]} />

Drag-and-Drop

To enable drag-and-drop functionality.

<Tree
  items={[
    {
      id: '1',
      label: 'Parent 1',
      children: [
        {
          id: '3',
          label: 'Child 1',
        },
        {
          id: '4',
          label: 'Child 2',
          children: [
            {
              id: '5',
              label: 'Grandchild 1',
            },
            {
              id: '6',
              label: 'Grandchild 2',
            },
          ],
        },
      ],
    },
    {
      id: '2',
      label: 'Parent 2',
      children: [{ id: '7', label: 'Child 3' }],
    },
  ]}
/>

Icons

Display icons in the tree item.

<Tree
  items={[
    {
      id: '1',
      label: 'Root Node',
      iconPrepend: <Icon type={'Zap'} />,
      children: [{ id: '2', label: 'Child Node', iconPrepend: <Icon type={'Zap'} />, iconAppend: <Icon type={'Zap'} /> }],
    },
  ]}
/>

Props

Tree

Prop	Type	Default	Required
items	TreeItemProps[]	-	Yes
styles	object	-	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
size	Responsive<Size>	'medium'	-

Tree Item

Prop	Type	Default	Required
id	string	-	Yes
label	string	-	Yes
iconPrepend	ReactNode	-	-
iconAppend	ReactNode	-	-
children	TreeItemProps[]	-	-