TreeView

The TreeView component is the main container that renders the tree structure. It's a wrapper around react-accessible-treeview and accepts all of its props.

Import

import { TreeView } from "shadcn-treeview";

Props

Required Props

Prop	Type	Description
`data`	`INode[]`	Flattened tree data. Use `flattenTree()` to convert hierarchical data.
`nodeRenderer`	`(props: INodeRendererProps) => ReactNode`	Render function for each node.

Optional Props

Prop	Type	Default	Description
`multiSelect`	`boolean`	`false`	Enable multi-selection mode.
`togglableSelect`	`boolean`	`false`	Allow toggling selection on click.
`clickAction`	`"EXCLUSIVE_SELECT" \| "SELECT" \| "FOCUS"`	`"SELECT"`	Action performed on click.
`defaultExpandedIds`	`NodeId[]`	`[]`	IDs of nodes expanded by default.
`defaultSelectedIds`	`NodeId[]`	`[]`	IDs of nodes selected by default.
`defaultDisabledIds`	`NodeId[]`	`[]`	IDs of nodes disabled by default.
`expandOnKeyboardSelect`	`boolean`	`false`	Expand node when selected via keyboard.
`propagateSelect`	`boolean`	`false`	Select children when parent is selected.
`propagateSelectUpwards`	`boolean`	`false`	Select parent when all children are selected.

Event Props

Prop	Type	Description
`onSelect`	`(props: ITreeViewOnSelectProps) => void`	Called when selection changes.
`onExpand`	`(props: ITreeViewOnExpandProps) => void`	Called when a node is expanded/collapsed.
`onLoadData`	`(props: ITreeViewOnLoadDataProps) => Promise<any>`	Called to load data asynchronously on expand.
`onBlur`	`(event: { treeState, dispatch }) => void`	Called when focus leaves the tree.

Node Renderer Props

The nodeRenderer function receives these props:

interface INodeRendererProps {
  element: INode;           // The node data
  isBranch: boolean;        // Whether node has children
  isExpanded: boolean;      // Whether node is expanded
  isSelected: boolean;      // Whether node is selected
  isDisabled: boolean;      // Whether node is disabled
  isHalfSelected: boolean;  // For partial selection in propagate mode
  level: number;            // Nesting depth (1-based)
  getNodeProps: () => object;  // Props to spread on the item element
  handleSelect: (event: React.MouseEvent | React.KeyboardEvent) => void;
  handleExpand: (event: React.MouseEvent | React.KeyboardEvent) => void;
}

Usage Example

import { TreeView, TreeViewItem, flattenTree } from "shadcn-treeview";

const data = flattenTree({
  name: "Root",
  children: [{ name: "Child 1" }, { name: "Child 2" }]
});

function Example() {
  return (
    <TreeView
      data={data}
      aria-label="Example tree"
      className="w-64 border rounded p-2"
      onSelect={(props) => console.log("Selected:", props.element.name)}
      nodeRenderer={({
        element,
        isBranch,
        isExpanded,
        isSelected,
        getNodeProps,
        level
      }) => (
        <TreeViewItem
          {...getNodeProps()}
          name={element.name}
          level={level}
          isBranch={isBranch}
          isExpanded={isExpanded}
          isSelected={isSelected}
          indentation={16}
        />
      )}
    />
  );
}