Components

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

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