TreeView

A tree view presents a hierarchical list.

Usage

The TreeView component will handle the expand/collapse behaviour.

NOTE: It's important that we use React.useMemo (ref) when flattening our data to ensure that it isn't recreated on every render. Otherwise the component will behave unexpectedly.

Selection

Use the onSelect and isSelected properties to manage node selection.

NOTE: The component uses the id property internally to track branches, so you must use another key to identify nodes. In this example we're using nodeID.

Rendering

Using the nodeRenderer compose Balance components to create the desired interface.

NOTE: It's important that we use React.useCallback (ref) when creating our nodeRenderer to ensure that it isn't recreated on every render. Otherwise you could see performance issues.