Tree

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

  • Category (1)
    • Category (1)
  • Category

Edit the code below to see your changes live!

API

Tree

Prop Name
Type
Default
Description
iconlessboolean

Hides/shows all icons on the tree.

initialNodes *TreeNode[]

Initial set of nodes to render. If you modify initialNodes, the component will not rerender. Use onCollapse or onSelect to mutate nodes. See below for usage.

onCollapse(node: TreeNode) => TreeNodeRef | void

Function that will get called when a tree node is collapsed. You can modify the children by returning an object with children as a key/value pair.

onExpand(node: TreeNode) => TreeNodeRef | void

Function that will get called when a tree node is expanded. You can modify the children by returning an object with children as a key/value pair.

onSelect(value: T[] | T) => void

Function that will get called when a tree node is collapsed. Based on the selectable prop, it'll return either an array of values, or a single value.

selectablemulti | radio

Function that will get called when a tree node is expanded.

Props ending with * are required

Tree[TreeNode]

Prop Name
Type
Default
Description
childrenTreeNode[]

Children for the current node.

disabledboolean

Determines if the TreeNode is disabled.

expandedboolean

Determines if the TreeNode is expanded by default.

iconIcon

Custom icon, in place of the folder icon.

id *string | number

TreeNode identifier, must be unique.

label *string

Label for the tree node.

selectedstring

Determines if the TreeNode is selected by default.

valueT

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

Edit the code below to see your changes live!

Custom Icons

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

  • Storefront - US

Edit the code below to see your changes live!

Modifying Children

By returning a object containing new children nodes, you have the freedom of modifying/replacing children nodes. This is useful when you need to asyncronously load in child nodes. We don't recommend modifying the nodes passed into the Tree prop, as it rerenders the entire tree.

Edit the code below to see your changes live!

Beta