Tree view

A tree view is a structure that displays data in a hierarchical view.

Examples

Single selectable

Multiselectable

A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, the isMultiSelectable property must be passed.

With separate selection and expansion

The hasSelectableNodes modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected without toggling its expansion.

With search

A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.

With icons

With badges

With custom badges

With action items

Guides

Compact

Compact, no background

With memoization

Turning on memoization with the useMemo property helps prevent unnecessary re-renders for large data sets. With this flag active, activeItems must pass in an array of nodes along the selected item's path to update properly.

Props

TreeView

The main tree view component.
*required
Name	Type	Default	Description
datarequired	TreeViewDataItem[]		Data of the tree view.
activeItems	TreeViewDataItem[]		Active items of tree view.
allExpanded	boolean		Sets the expanded state on all tree nodes, overriding default behavior and current internal state.
aria-label	string		A text string that sets the accessible name of the tree view list. Either this or the aria-labelledby property must be passed in.
aria-labelledby	string		A space separated list of element id's that sets the accessible name of the tree view list. Either this or the aria-label property must be passed in.
className	string		Class to add if not passed a parentItem property.
compareItems	(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean	(item, itemToCheck) => item.id === itemToCheck.id	Comparison function for determining active items.
defaultAllExpanded	boolean	false	Sets the default expanded behavior.
expandedIcon	React.ReactNode		Icon for all expanded node items.
hasBadges	boolean	false	Flag indicating if all nodes in the tree view should have badges.
hasCheckboxes	boolean	false	Flag indicating if all nodes in the tree view should have checkboxes.
hasGuides	boolean	false	Flag indicating if the tree view has guide lines.
hasSelectableNodes	boolean	false	Flag indicating that tree nodes should be independently selectable, even when having children.
icon	React.ReactNode		Icon for all leaf or unexpanded node items.
id	string		ID of the tree view.
isMultiSelectable	boolean	false	Flag indicating whether multiple nodes can be selected in the tree view. This will also set the aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended. Can only be applied to the root tree view list.
isNested	boolean	false	Flag indicating if the tree view is nested.
onCheck	(event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void		Callback for item checkbox selection.
onCollapse	(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void		Callback for collapsing a node with children.
onExpand	(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void		Callback for expanding a node with children.
onSelect	(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void		Callback for item selection.
parentItem	TreeViewDataItem		Internal. Parent item of a tree view list item.
toolbar	React.ReactNode		Toolbar to display above the tree view.
useMemo	boolean		Flag indicating the tree view should utilize memoization to help render large data sets. Setting this property requires that the activeItems property is passed an array containing every node in the selected item's path.
variant	'default' \| 'compact' \| 'compactNoBackground'	'default'	Variant presentation styles for the tree view.

TreeViewDataItem

Properties that make up a tree view data item. These properties should be passed in as an object to one of the various tree view component properties which accept TreeViewDataItem as a type.
*required
Name	Type	Description
namerequired	React.ReactNode	Internal content of a tree view item.
action	React.ReactNode	Action of a tree view item, which can be either a button or dropdown component.
badgeProps	any	Additional properties of the tree view item badge.
checkProps	TreeViewCheckProps	Additional properties of the tree view item checkbox.
children	TreeViewDataItem[]	Child nodes of a tree view item.
customBadgeContent	React.ReactNode	Optional prop for a custom badge.
defaultExpanded	boolean	Flag indicating if node is expanded by default.
expandedIcon	React.ReactNode	Expanded icon of a tree view item.
hasBadge	boolean	Flag indicating if a tree view item has a badge.
hasCheckbox	boolean	Flag indicating if a tree view item has a checkbox.
icon	React.ReactNode	Default icon of a tree view item.
id	string	ID of a tree view item.
title	React.ReactNode	Title of a tree view item. Only used in compact presentations.

TreeViewSearch

Renders a search input for the tree view. This sub-component should be passed into the tree view component's toolbar property.
*required
Name	Type	Description
aria-label	string	Accessible label for the search input.
className	string	Classes applied to the wrapper for the search input.
id	string	Id for the search input.
name	string	Name for the search input.
onSearch	(event: React.ChangeEvent<HTMLInputElement>) => void	Callback for search input.

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub