Tree view

A tree view widget presents a hierarchical list.

Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

Basic tree view

Multi-selection

Tree views also support multi-selection.

Controlled tree view

The tree view also offers a controlled API.

Rich object

While the TreeView/TreeItem component API maximizes flexibility, an extra step is needed to handle a rich object.

Let's consider a data variable with the following shape, recursion can be used to handle it.

const data = {
  id: 'root',
  name: 'Parent',
  children: [
    {
      id: '1',
      name: 'Child - 1',
    },
    // …
  ],
};

ContentComponent prop

You can use the ContentComponent prop and the useTreeItem hook to further customize the behavior of the TreeItem.

Such as limiting expansion to clicking the icon:

Or increasing the width of the state indicator:

Customization

Custom icons, border and animation

Gmail clone

Disabled tree items

The behavior of disabled tree items depends on the disabledItemsFocusable prop.

If it is false:

• Arrow keys will not focus disabled items and, the next non-disabled item will be focused.
• Typing the first character of a disabled item's label will not focus the item.
• Mouse or keyboard interaction will not expand/collapse disabled items.
• Mouse or keyboard interaction will not select disabled items.
• Shift + arrow keys will skip disabled items and, the next non-disabled item will be selected.
• Programmatic focus will not focus disabled items.

If it is true:

• Arrow keys will focus disabled items.
• Typing the first character of a disabled item's label will focus the item.
• Mouse or keyboard interaction will not expand/collapse disabled items.
• Mouse or keyboard interaction will not select disabled items.
• Shift + arrow keys will not skip disabled items but, the disabled item will not be selected.
• Programmatic focus will focus disabled items.

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)

The component follows the WAI-ARIA authoring practices.

To have an accessible tree view you must use aria-labelledby or aria-label to reference or provide a label on the TreeView, otherwise screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <TreeItem />
• <TreeView />