Demo

Tree View

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

Loading...

Usage

example-usage.tsx
<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" />
        )
      }
    />
  )}
/>