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

TreeSelect

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

Live Example

<StoryWithControls component="TreeSelect" props={{ allowClear: true, disabled: false, multiple: false, placeholder: "Please select", showSearch: true, size: "middle", treeCheckable: false, treeDefaultExpandAll: true, treeLine: false, variant: "outlined", treeData: [ { 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" } ] } ] }} controls={[ { name: "allowClear", label: "Allow Clear", type: "boolean", description: "Whether to allow clearing the selected value." }, { name: "disabled", label: "Disabled", type: "boolean", description: "Whether the component is disabled." }, { name: "multiple", label: "Multiple", type: "boolean", description: "Whether to allow multiple selections." }, { name: "placeholder", label: "Placeholder", type: "text", description: "Placeholder text for the input field." }, { name: "showSearch", label: "Show Search", type: "boolean", description: "Whether to show the search input." }, { name: "size", label: "Size", type: "select", options: [ "large", "middle", "small" ], description: "Size of the component." }, { name: "treeCheckable", label: "Tree Checkable", type: "boolean", description: "Whether to show checkable tree nodes." }, { name: "treeDefaultExpandAll", label: "Tree Default Expand All", type: "boolean", description: "Whether to expand all tree nodes by default." }, { name: "treeLine", label: "Tree Line", type: "boolean", description: "Whether to show tree lines." }, { name: "variant", label: "Variant", type: "select", options: [ "outlined", "borderless", "filled" ], description: "Variant of the component." } ]} />

Try It

Edit the code below to experiment with the component:

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

Multiple Selection with Checkboxes

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

With Tree Lines

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

Props

Import

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