Tree View

A component that displays a hierarchical list of items, such as a file system or a navigation menu.

Usage

The component is built using the compound component pattern. You'll need to provide a collection created with createTreeCollection and recursively render the nodes using TreeView.NodeProvider.

import { TreeView, createTreeCollection, Item, Icon } from "@elemnts-ui/react"

const collection = createTreeCollection({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      { id: "public", name: "public", children: [{ id: "favicon.ico", name: "favicon.ico" }] },
      { id: "package.json", name: "package.json" },
    ],
  },
})

const TreeNode = ({ node, indexPath }) => (
  <TreeView.NodeProvider node={node} indexPath={indexPath}>
    {node.children ? (
      <TreeView.Branch>
        <TreeView.BranchControl/>
        <TreeView.BranchContent>
          <TreeView.BranchIndentGuide />
          {node.children.map((child, index) => (
            <TreeNode key={child.id} node={child} indexPath={[...indexPath, index]} />
          ))}
        </TreeView.BranchContent>
      </TreeView.Branch>
    ) : (
      <TreeView.Item />
    )}
  </TreeView.NodeProvider>
)

const Demo = () => (
  <TreeView.Root collection={collection}>
    <TreeView.Label>Project Files</TreeView.Label>
    <TreeView.Tree>
      {collection.rootNode.children.map((node, index) => (
        <TreeNode key={node.id} node={node} indexPath={[index]} />
      ))}
    </TreeView.Tree>
  </TreeView.Root>
)

Checkbox Selection

You can add checkboxes to your tree nodes to allow multiple selection.

API Reference

TreeView

The root component for the tree view.

Prop	Type	Default
collection	`TreeCollection`	required
fileIcons	`Record<string, React.JSX.ElementType \| null>`	-
selectedValue	`string[]`	-
checkedValue	`string[]`	-
onCheckedChange	`(details: CheckedChangeDetails) => void`	-
canRename	`(details: RenameDetails) => boolean`	-
onRenameComplete	`(details: RenameCompleteDetails) => void`	-
defaultSelectedValue	`string[]`	-
onSelectionChange	`(details: SelectionChangeDetails) => void`	-
expandedValue	`string[]`	-
defaultExpandedValue	`string[]`	-
onExpandedChange	`(details: ExpandedChangeDetails) => void`	-
selectionMode	`"single" \| "multiple"`	`"single"`
lazyMount	`boolean`	`true`
unmountOnExit	`boolean`	`true`
className	`string`	-

TreeViewLabel

The label for the tree view.

Prop	Type	Default
asChild	`boolean`	`false`

TreeViewTree

Wraps the root node of the tree view.

Prop	Type	Default
asChild	`boolean`	`false`

TreeViewNode

Wraps a node in the tree view.

Prop	Type	Default
node	`TreeNodeType`	`undefined`
indexPath	`number[]`	`undefined`

TreeViewBranch

The branch component for the tree view.

Prop	Type	Default
asChild	`boolean`	`false`

TreeViewBranchItem

The item component for the tree view branch.

Prop	Type	Default
asChild	`boolean`	`false`

TreeViewBranchContent

The content component for the tree view branch.

Prop	Type	Default
asChild	`boolean`	`false`

TreeViewContent

The content component for the tree view.

Prop	Type	Default
asChild	`boolean`	`false`

TreeViewItem

The item component for the tree view.

Prop	Type	Default
asChild	`boolean`	`false`

TreeViewCheckbox

The checkbox component for the tree view.

Prop	Type	Default
asChild	`boolean`	`false`