Tree View

Docs

Tree View

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

Basic Example

src
public
package.json
README.md

Dense Example

src
public
package.json
README.md

Multi-select Example (hold CTRL)

Item 1
Item 2
Item 3

Selected nodes:

Search Example

Fruits
Vegetables
Grains

Context Menu Example

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" />
        )
      }
    />
  )}
/>

Tags Underlined Tabs