Balance Logo
Balance
Reckon Design System

Tree View

The tree view presents a hierarchical list.
Install
pnpm add @reckon-web/tree-view
Import usage
import {
flattenTreeData,
TreeView
} from '@reckon-web/tree-view';
  • Code
  • API

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.

Open in Playroom

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.

Selected ID: none

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.

  • O
    Other
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo