Docs
Tree View
Tree View
Used for hierarchical navigation and is implemented using react-accessible-treeview.
- src
- public
- package.json
- README.md
- src
- public
- package.json
- README.md
- Item 1
- Item 2
- Item 3
Selected nodes:
- Fruits
- Vegetables
- Grains
- src
- public
- package.json
- README.md
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" />
)
}
/>
)}
/>