TreeSelect

TreeSelect is a select component that allows users to select from a tree structure.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  const [value, setValue] = React.useState(undefined);
  const treeData = [
    {
      title: 'Databases',
      value: 'databases',
      children: [
        { title: 'PostgreSQL', value: 'postgres' },
        { title: 'MySQL', value: 'mysql' },
      ],
    },
    {
      title: 'Charts',
      value: 'charts',
      children: [
        { title: 'Bar Chart', value: 'bar' },
        { title: 'Line Chart', value: 'line' },
      ],
    },
  ];
  return (
    <TreeSelect
      style={{ width: 300 }}
      value={value}
      onChange={setValue}
      treeData={treeData}
      placeholder="Select an item"
      allowClear
      treeDefaultExpandAll
    />
  );
}

Result

Loading...

Multiple Selection with Checkboxes

Live Editor

function MultiSelectTree() {
  const [value, setValue] = React.useState([]);
  const treeData = [
    {
      title: 'Databases',
      value: 'databases',
      children: [
        { title: 'PostgreSQL', value: 'postgres' },
        { title: 'MySQL', value: 'mysql' },
        { title: 'SQLite', value: 'sqlite' },
      ],
    },
    {
      title: 'File Formats',
      value: 'formats',
      children: [
        { title: 'CSV', value: 'csv' },
        { title: 'Excel', value: 'excel' },
      ],
    },
  ];
  return (
    <TreeSelect
      style={{ width: 300 }}
      value={value}
      onChange={setValue}
      treeData={treeData}
      treeCheckable
      placeholder="Select data sources"
      treeDefaultExpandAll
      allowClear
    />
  );
}

Result

Loading...

With Tree Lines

Live Editor

function TreeLinesDemo() {
  const treeData = [
    {
      title: 'Dashboards',
      value: 'dashboards',
      children: [
        { title: 'Sales Dashboard', value: 'sales' },
        { title: 'Marketing Dashboard', value: 'marketing' },
      ],
    },
    {
      title: 'Charts',
      value: 'charts',
      children: [
        { title: 'Revenue Chart', value: 'revenue' },
        { title: 'User Growth', value: 'growth' },
      ],
    },
  ];
  return (
    <TreeSelect
      style={{ width: 300 }}
      treeData={treeData}
      treeLine
      treeDefaultExpandAll
      placeholder="Browse items"
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
allowClear	boolean	true	Whether to allow clearing the selected value.
disabled	boolean	false	Whether the component is disabled.
multiple	boolean	false	Whether to allow multiple selections.
placeholder	string	"Please select"	Placeholder text for the input field.
showSearch	boolean	true	Whether to show the search input.
size	string	"middle"	Size of the component.
treeCheckable	boolean	false	Whether to show checkable tree nodes.
treeDefaultExpandAll	boolean	true	Whether to expand all tree nodes by default.
treeLine	boolean	false	Whether to show tree lines.
variant	string	"outlined"	Variant of the component.
treeData	any	[{"title":"Node1","value":"0-0","children":[{"title":"Child Node1","value":"0-0-0"},{"title":"Child Node2","value":"0-0-1"}]},{"title":"Node2","value":"0-1","children":[{"title":"Child Node3","value":"0-1-0"}]}]	-

Import

import { TreeSelect } 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.