StatefulTree

The StatefulTree component is used to display a tree of items. Useful for defining a tree of categories or subcollections.

Category (1)
- Category (1)
  - Category
Category
- Category
Category
Category (1)
- Category
Category
- Category

Edit the code below to see your changes live!

function Example() {
  const nodes = [
    {
      id: '0',
      value: 0,
      label: 'Category',
      children: [
        {
          id: '5',
          value: 5,
          label: 'Category',
          children: [{ id: '9', value: 9, label: 'Category' }],
        },
      ],
    },
    {
      id: '1',
      value: 1,
      label: 'Category',
      children: [{ id: '6', value: 6, label: 'Category' }],
    },
    { id: '2', value: 2, label: 'Category' },
    {
      id: '3',
      value: 3,
      label: 'Category',
      children: [{ id: '7', value: 7, label: 'Category' }],
    },
    { id: '4', value: 4, label: 'Category', children: [{ id: '8', value: 8, label: 'Category' }] },
  ];

  return (
    <StatefulTree
      defaultExpanded={['0', '5', '1']}
      defaultSelected={['9', '3', '7']}
      disabledNodes={['1']}
      nodes={nodes}
      selectable="multi"
    />
  );
}

function Example() {
  const nodes = [
    {
      id: '0',
      value: 0,
      label: 'Category',
      children: [
        {
          id: '5',
          value: 5,
          label: 'Category',
          children: [{ id: '9', value: 9, label: 'Category' }],
        },
      ],
    },
    {
      id: '1',
      value: 1,
      label: 'Category',
      children: [{ id: '6', value: 6, label: 'Category' }],
    },
    { id: '2', value: 2, label: 'Category' },
    {
      id: '3',
      value: 3,
      label: 'Category',
      children: [{ id: '7', value: 7, label: 'Category' }],
    },
    { id: '4', value: 4, label: 'Category', children: [{ id: '8', value: 8, label: 'Category' }] },
  ];
  return (
    <StatefulTree
      defaultExpanded={['0', '5', '1']}
      defaultSelected={['9', '3', '7']}
      disabledNodes={['1']}
      nodes={nodes}
      selectable="multi"
    />
  );
}

API

StatefulTree

Prop Name	Type	Description
`defaultExpanded`	`string[]`	An array of expanded node ids. Can also be used to reset expanded nodes.
`defaultSelected`	`string[]`	An array of selected node ids. Can also be used to reset selected nodes.
`disabledNodes`	`string[]`	An array of disabled node ids. Nodes will not be abled to be selectedable but can still expand/collapse.
`iconless`	`boolean`	Hides/shows all icons on the tree.
`id`	`string`	Defines a HTML id attribute to the parent wrapper.
`nodes` *	`TreeNode[]`	Nodes to render in the tree. See below for usage.
`onExpandedChange`	`(expandedNodes: string[]) => void`	Function that will get called when a tree node is expanded/collapsed. Passes the ids of expanded nodes as an argument.
`onNodeClick`	`(event: React.MouseEvent<HTMLLIElement>, nodeId: string) => void`	Function that will get called when a tree node is clicked.
`onSelectionChange`	`(selectedValues: T[]) => void`	Function that will get called when a tree node is selected/deselecteds. Passes the values of selected nodes as an argument.
`selectable`	`multi` \| `radio`	Determines the type of selectable tree to render.

Props ending with * are required

StatefulTree[TreeNode]

Prop Name	Type	Description
`children`	`TreeNode[]`	Children for the current node.
`icon`	`Icon`	Custom icon, in place of the folder icon.
`id` *	`string`	TreeNode identifier, must be unique.
`label` *	`string`	Label for the tree node.
`value`	`T`	Value of the selected node. A checkbox or radio will not appear if `value` and `selectable` is not defined.

Props ending with * are required

Examples

Radio

Category
- Subcategory
Category
Category

Edit the code below to see your changes live!

function Example() {
  const nodes = [
    {
      id: '0',
      value: 0,
      label: 'Category',
      children: [{ id: '3', value: 3, label: 'Subcategory' }],
    },
    { id: '1', value: 1, label: 'Category' },
    { id: '2', value: 2, label: 'Category' },
  ];

  return <StatefulTree selectable="radio" nodes={nodes} defaultExpanded={['0']} disabledNodes={['0', '2']} />;
}

function Example() {
  const nodes = [
    {
      id: '0',
      value: 0,
      label: 'Category',
      children: [{ id: '3', value: 3, label: 'Subcategory' }],
    },
    { id: '1', value: 1, label: 'Category' },
    { id: '2', value: 2, label: 'Category' },
  ];
  return <StatefulTree selectable="radio" nodes={nodes} defaultExpanded={['0']} disabledNodes={['0', '2']} />;
}

Custom Icons

You can replace the folder icon with a custom icon of your choice.

If you use the iconless prop, ALL icons will be hidden (including custom ones).

Storefront - US
- Subcategory
Storefront - CA
Storefront - EU

Edit the code below to see your changes live!

function Example() {
  const nodes = [
    {
      id: '0',
      icon: <StoreIcon color="primary" />,
      label: 'Storefront - US',
      children: [{ id: '3', label: 'Subcategory' }],
    },
    { id: '1', icon: <LanguageIcon color="primary" />, label: 'Storefront - CA' },
    { id: '2', icon: <AssignmentIcon color="primary" />, label: 'Storefront - EU' },
  ];

  return <StatefulTree defaultExpanded={['0']} nodes={nodes} />;
}

function Example() {
  const nodes = [
    {
      id: '0',
      icon: <StoreIcon color="primary" />,
      label: 'Storefront - US',
      children: [{ id: '3', label: 'Subcategory' }],
    },
    { id: '1', icon: <LanguageIcon color="primary" />, label: 'Storefront - CA' },
    { id: '2', icon: <AssignmentIcon color="primary" />, label: 'Storefront - EU' },
  ];
  return <StatefulTree defaultExpanded={['0']} nodes={nodes} />;
}

Beta