Tree View

Import#

import { TreeView } from '@volue/wave-react';

// you can also access TreeView's context via hook:
// import { useTreeViewContext } from '@volue/wave-react';

TreeView is a compound component that consists of multiple parts:

• ​
  TreeView: The wrapper that contains all the parts of a tree view and provides context for its children.
• ​
  TreeView.Item: A single item of the tree.
• ​
  TreeView.SubTree: The wrapper for the items that should be nested under a parent item.

Examples#

Basic#

TreeView is best used to organize large amounts of information that can nest within multiple levels. Tree items with sub trees create a parent-child relationship and automatically use a chevron to indicate the ability to expand and collapse child items. As the tree hierarchy increases nesting levels, the size of the indentation is increased as well.

TreeView works in an uncontrolled way by default, meaning that each instance of TreeView.Item containing TreeView.Subtree is responsible for managing its own expanded state internally.

Controlled#

The expansion state of each subtree can be controlled via isExpanded prop on its parent TreeView.Item and state changes can be listened via onIsExpandedChange prop, allowing you to sync state.

Sizes#

TreeView component comes in two sizes: medium and small. By default, it uses medium size. Use the size prop to control the size.

Active item#

TreeView.Item components can be in active state, that is indicated by a different background color. Use isActive prop to set the active state.

Selecting items#

Use onSelect prop to enable item selection. onSelect handler of TreeView.Item is called when an item is selected using either the mouse or keyboard. It can be used to track currently selected item.

Decorators#

Use startElement and endElement props to add custom elements to the start and end of the TreeView.Item.

These are useful for adding a Label to the item or providing an Icon that visually represents and supports the item.

Accessibility#

Tree View implements the WAI-ARIA Tree View design pattern​.

• ​

  All relevant ARIA attributes are automatically managed.

• ​

  Tree view can be focused with Tab or Shift + Tab. Tab moves focus outside of the tree view to the next focusable node.

• ​

  After focusing the tree view with keyboard, focus is set on the previously active item or on the first item if none of the items were active.

• ​

  Focus movement is managed using roving focus technique​. ↓ and ↑ keys move the focus among focusable tree view items without opening or closing them.

• ​
  Home and Page Up moves focus to the first item without opening or closing it.
• ​
  End and Page Down moves focus to the last item without expanding any nodes that are closed.
• ​
  Enter perfoms the default action (triggering `onSelect` event when specified or toggling expansion) for the focused item.
• ​

  Clicking the chevron only expands or collapses the node. Clicking anywhere else will perform the default action on the item.

API Reference#

TreeView#

TreeView.Item#

TreeView.SubTree#