import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Tree

The Tree component is used to display hierarchical data in a tree structure. It allows for features such as selection, expansion, and drag-and-drop functionality.

Live Example

<StoryWithControls component="Tree" props={{ checkable: false, defaultExpandAll: false, disabled: false, draggable: false, multiple: false, selectable: true, showIcon: false, showLine: false, treeData: [ { title: "parent 1", key: "0-0", children: [ { title: "parent 1-0", key: "0-0-0", children: [ { title: "leaf", key: "0-0-0-0" }, { title: "leaf", key: "0-0-0-1" }, { title: "leaf", key: "0-0-0-2" } ] }, { title: "parent 1-1", key: "0-0-1", children: [ { title: "leaf", key: "0-0-1-0" } ] }, { title: "parent 1-2", key: "0-0-2", children: [ { title: "leaf", key: "0-0-2-0" }, { title: "leaf", key: "0-0-2-1" } ] } ] } ], defaultExpandedKeys: [ "0-0", "0-0-0" ] }} controls={[ { name: "checkable", label: "Checkable", type: "boolean", description: "Add a Checkbox before the treeNodes" }, { name: "defaultExpandAll", label: "Default Expand All", type: "boolean", description: "Whether to expand all treeNodes by default" }, { name: "disabled", label: "Disabled", type: "boolean", description: "Whether disabled the tree" }, { name: "draggable", label: "Draggable", type: "boolean", description: "Specifies whether this Tree or the node is draggable" }, { name: "multiple", label: "Multiple", type: "boolean", description: "Allows selecting multiple treeNodes" }, { name: "selectable", label: "Selectable", type: "boolean", description: "Whether can be selected" }, { name: "showIcon", label: "Show Icon", type: "boolean", description: "Controls whether to display the icon node" }, { name: "showLine", label: "Show Line", type: "boolean", description: "Shows a connecting line" } ]} />

Try It

Edit the code below to experiment with the component:

function Demo() {
  const treeData = [
    {
      title: 'Databases',
      key: 'databases',
      children: [
        { title: 'PostgreSQL', key: 'postgres' },
        { title: 'MySQL', key: 'mysql' },
        { title: 'SQLite', key: 'sqlite' },
      ],
    },
    {
      title: 'Charts',
      key: 'charts',
      children: [
        { title: 'Bar Chart', key: 'bar' },
        { title: 'Line Chart', key: 'line' },
        { title: 'Pie Chart', key: 'pie' },
      ],
    },
  ];
  return <Tree treeData={treeData} defaultExpandAll />;
}

Checkable Tree

function CheckableTree() {
  const [checkedKeys, setCheckedKeys] = React.useState(['postgres']);
  const treeData = [
    {
      title: 'Databases',
      key: 'databases',
      children: [
        { title: 'PostgreSQL', key: 'postgres' },
        { title: 'MySQL', key: 'mysql' },
      ],
    },
    {
      title: 'Charts',
      key: 'charts',
      children: [
        { title: 'Bar Chart', key: 'bar' },
        { title: 'Line Chart', key: 'line' },
      ],
    },
  ];
  return (
    <Tree
      treeData={treeData}
      checkable
      defaultExpandAll
      checkedKeys={checkedKeys}
      onCheck={setCheckedKeys}
    />
  );
}

With Lines and Icons

function LinesAndIcons() {
  const treeData = [
    {
      title: 'Dashboards',
      key: 'dashboards',
      children: [
        { title: 'Sales Dashboard', key: 'sales' },
        { title: 'Marketing Dashboard', key: 'marketing' },
      ],
    },
    {
      title: 'Reports',
      key: 'reports',
      children: [
        { title: 'Weekly Report', key: 'weekly' },
        { title: 'Monthly Report', key: 'monthly' },
      ],
    },
  ];
  return <Tree treeData={treeData} showLine showIcon defaultExpandAll />;
}

Props

Import

import { Tree } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::