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

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

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 />;
}

Result

Loading...

Checkable Tree

Live Editor

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}
    />
  );
}

Result

Loading...

With Lines and Icons

Live Editor

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 />;
}

Result

Loading...

Props

Prop	Type	Default	Description
checkable	boolean	false	Add a Checkbox before the treeNodes
defaultExpandAll	boolean	false	Whether to expand all treeNodes by default
disabled	boolean	false	Whether disabled the tree
draggable	boolean	false	Specifies whether this Tree or the node is draggable
multiple	boolean	false	Allows selecting multiple treeNodes
selectable	boolean	true	Whether can be selected
showIcon	boolean	false	Controls whether to display the icon node
showLine	boolean	false	Shows a connecting line
treeData	any	[{"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	any	["0-0","0-0-0"]	-

Import

import Tree from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.