Buy Pro
Docs
Tree View

Tree View

Used for hierarchical navigation and is implemented using react-accessible-treeview.

Selected nodes:

Usage

import { flattenTree } from 'react-accessible-treeview';
 
import { TreeView, TreeViewItem } from '@/components/ui/tree-view';
<TreeView
  data={flattenTree(data)}
  nodeRenderer={({
    element,
    isBranch,
    isExpanded,
    isSelected,
    getNodeProps,
    level
  }) => (
    <TreeViewItem
      {...getNodeProps()}
      name={element.name}
      isBranch={isBranch}
      isExpanded={isExpanded}
      isSelected={isSelected}
      level={level}
      indentation={16}
      icon={
        isBranch ? (
          <FolderOpenClosedIcon
            className="h-4 w-4 shrink-0"
            isOpen={isExpanded}
          />
        ) : (
          <FileIcon className="h-4 w-4 shrink-0" />
        )
      }
    />
  )}
/>