Tree

data

TreeNodeType[]

required

renderHeader

((content: ReactNode) => ReactNode) | undefined

renderDescription

((content: ReactNode) => ReactNode) | undefined

onSelectItem

((event: SyntheticEvent<HTMLElement, Event>, item: TreeNodeType) => void) | undefined

onSelectedItemsChanged

((item: TreeNodeType[]) => void) | undefined

expandedIds

ReactText[] | undefined

onClick

((event: SyntheticEvent<HTMLElement, Event>, item: TreeNodeType) => void) | undefined

className

string | undefined

defaultSelected

string[] | undefined

Tree base usage

<Tree
  onClick={(...args) => console.log('onClick', args)}
  data={[
    {
      id: 1,
      header: 'root node 1',
      description: 'this is the root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
        },
      ],
    },
    {
      id: 4,
      header: 'root node 2',
      children: [{ id: 5, header: 'child 3' }],
    },
  ]}
  expandedIds={[4]}
/>

<Tree
  onClick={(...args) => console.log('onClick', args)}
  data={[
    {
      id: 1,
      header: 'root node 1',
      description: 'this is the root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
        },
      ],
    },
    {
      id: 4,
      header: 'root node 2',
      children: [{ id: 5, header: 'child 3' }],
    },
  ]}
  expandedIds={[4]}
/>

Tree with the checkboxes

<Tree
  onSelectItem={(...args) => console.log('onSelectItem', args)}
  onSelectedItemsChanged={(...args) =>
    console.log('onSelectedItemsChanged', ...args)
  }
  data={[
    {
      id: 1,
      header: 'root node',
      description: 'this is the root node',
      selectable: true,
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
          selectable: true,
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
          selectable: true,
        },
        {
          id: 4,
          header: 'child 3 with own children',
          description: 'child of the root node',
          selectable: true,
          children: [
            {
              id: 5,
              header: 'nested child 1',
              description: 'child',
              selectable: true,
            },
            {
              id: 6,
              header: 'nested child 2',
              description: 'child',
              selectable: true,
              children: [
                {
                  id: 7,
                  header: 'child with own children',
                  description: 'child of the root node',
                  selectable: true,
                  children: [
                    {
                      id: 8,
                      header: 'nested child 1',
                      description: 'child',
                      selectable: true,
                    },
                    {
                      id: 9,
                      header: 'nested child 2',
                      description: 'child',
                      selectable: true,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ]}
/>

<Tree
  onSelectItem={(...args) => console.log('onSelectItem', args)}
  onSelectedItemsChanged={(...args) =>
    console.log('onSelectedItemsChanged', ...args)
  }
  data={[
    {
      id: 1,
      header: 'root node',
      description: 'this is the root node',
      selectable: true,
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
          selectable: true,
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
          selectable: true,
        },
        {
          id: 4,
          header: 'child 3 with own children',
          description: 'child of the root node',
          selectable: true,
          children: [
            {
              id: 5,
              header: 'nested child 1',
              description: 'child',
              selectable: true,
            },
            {
              id: 6,
              header: 'nested child 2',
              description: 'child',
              selectable: true,
              children: [
                {
                  id: 7,
                  header: 'child with own children',
                  description: 'child of the root node',
                  selectable: true,
                  children: [
                    {
                      id: 8,
                      header: 'nested child 1',
                      description: 'child',
                      selectable: true,
                    },
                    {
                      id: 9,
                      header: 'nested child 2',
                      description: 'child',
                      selectable: true,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ]}
/>

Tree with icons

<Tree
  onClick={(...args) => console.log('onClick', args)}
  data={[
    {
      id: 1,
      header: 'root node 1',
      description: 'this is the root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
          icon: 'rhombus-icon',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
          icon: 'rhombus-fill-icon',
        },
      ],
    },
    {
      id: 4,
      header: 'root node 2',
      children: [{ id: 5, header: 'child 3', icon: 'tag-icon' }],
    },
  ]}
  expandedIds={[4]}
/>

<Tree
  onClick={(...args) => console.log('onClick', args)}
  data={[
    {
      id: 1,
      header: 'root node 1',
      description: 'this is the root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
          icon: 'rhombus-icon',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
          icon: 'rhombus-fill-icon',
        },
      ],
    },
    {
      id: 4,
      header: 'root node 2',
      children: [{ id: 5, header: 'child 3', icon: 'tag-icon' }],
    },
  ]}
  expandedIds={[4]}
/>

SearchableTree

SearchableTree usage

<SearchableTree
  data={[
    {
      id: 1,
      header: 'root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
        },
        {
          id: 4,
          header: 'child 3',
          description: 'child of the root node',
        },
        {
          id: 5,
          header: 'child 4',
          description: "disabled node can't be opened",
          disabled: true,
          children: [{ id: 6, header: 'nested child 1' }],
        },
        {
          id: 7,
          header: 'child 5',
          description: 'node with children',
          children: [{ id: 8, header: 'nested child 2' }],
        },
      ],
    },
  ]}
/>

<SearchableTree
  data={[
    {
      id: 1,
      header: 'root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
        },
        {
          id: 4,
          header: 'child 3',
          description: 'child of the root node',
        },
        {
          id: 5,
          header: 'child 4',
          description: "disabled node can't be opened",
          disabled: true,
          children: [{ id: 6, header: 'nested child 1' }],
        },
        {
          id: 7,
          header: 'child 5',
          description: 'node with children',
          children: [{ id: 8, header: 'nested child 2' }],
        },
      ],
    },
  ]}
/>

SearchableTree controlled

<SearchableTree
  input={
    <SearchableTree.Input icon="play-icon" placeholder="Введите значение" />
  }
  notFound={<SearchableTree.NotFound>Не найдено!</SearchableTree.NotFound>}
  searchValue="child 1"
  onSearchChange={value => console.log('onSearchChange:', value)}
  data={[
    {
      id: 1,
      header: 'root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
        },
        {
          id: 4,
          header: 'child 3',
          description: 'child of the root node',
        },
        {
          id: 5,
          header: 'child 4',
          description: "disabled node can't be opened",
          disabled: true,
          children: [{ id: 6, header: 'nested child 1' }],
        },
        {
          id: 7,
          header: 'child 5',
          description: 'node with children',
          children: [{ id: 8, header: 'nested child 2' }],
        },
      ],
    },
  ]}
/>

<SearchableTree
  input={
    <SearchableTree.Input icon="play-icon" placeholder="Введите значение" />
  }
  notFound={<SearchableTree.NotFound>Не найдено!</SearchableTree.NotFound>}
  searchValue="child 1"
  onSearchChange={value => console.log('onSearchChange:', value)}
  data={[
    {
      id: 1,
      header: 'root node',
      children: [
        {
          id: 2,
          header: 'child 1',
          description: 'child of the root node',
        },
        {
          id: 3,
          header: 'child 2',
          description: 'child of the root node',
        },
        {
          id: 4,
          header: 'child 3',
          description: 'child of the root node',
        },
        {
          id: 5,
          header: 'child 4',
          description: "disabled node can't be opened",
          disabled: true,
          children: [{ id: 6, header: 'nested child 1' }],
        },
        {
          id: 7,
          header: 'child 5',
          description: 'node with children',
          children: [{ id: 8, header: 'nested child 2' }],
        },
      ],
    },
  ]}
/>