Tree

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

Report Issue Github

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[]`	-	-

Table

Callout