Overview

A content tree provides users with a way to navigate nested hierarchical information using a parent-child relationship model. It is located on the left side of the screen and cannot be combined with Side Navigation or Toolbar.

Basic

Content tree can be created using the components TreeView in the root and TreeViewItem for nodes. TreeViewItem takes nodeId which should be a unique number and the label prop to display the node text.
Clicking on collapse/expand button expands or collapse a tree view item and clicking on the node selects it.

TreeView component uses modus icons, refer to Getting Started page on how to enable them.

Tree with Icons

Icons can be configured both at the root level and node level. Also an additional icon can be added to show before the label text using the prop itemIcon. For more operations, callback functions like onNodeToggle, onNodeSelect are available.

Condensed Tree

Set prop size to sm to shrink the size of Tree and its items.

Borderless Tree

Add a class of .list-group-borderless to your Tree view for a borderless variant.

Multi Selection Tree

Use the prop multiSelectNode to enable multiple selection and the nodes can be selected using Shift + Arrow Up/Down key or Ctrl + click.
For displaying checkbox on each node set checkBoxSelection and to enable multiple selection use multiSelectCheckBox.

Tree with Actions

Using the props and callback functions from the TreeView component we can perform more actions as shown in the example below.

Tree with Filter

Below is a sample code for implementing filtering of Tree items based on text search.

Tree with Drag and Drop

The example below shows a sample code for how to implement dragging and dropping of Tree items as a way of reordering. Click and drag the drag icon to reorder Tree items.

Accessibility

Every Tree Item and the elements inside such as drag icon, expand & collapse icon and the checkbox are accessible through keyboard. Tab key moves focus to the next focusable element and Shift + Tab moves focus to the previous focusable element. Make sure any element that needs focus has tabindex set.

Keyboard navigation

KeysDescription
Arrow LeftCollapses the Tree Node
Arrow RightExpands the Tree Node
Arrow UpMoves to the previous focusable Tree Item. Focus moves to a child node if the current or previous parent node is expanded.
Arrow DownMoves to the next focusable Tree Item. Focus moves to a child node if the current or next parent node is expanded.
EnterSelects the node if Tree Item is in focus and toggles the expansion state if the focus is on expand/collapse icon.
SpaceExpands/Collapses the Tree Item when it is in focus.
Shift + Arrow Up/DownIf multiSelectNode is true, it performs multiple selection starting from the Tree Item that is selected.
Ctrl + click on Tree ItemIf multiSelectNode is true, it performs multiple selection on the clicked Tree Items.

API

TreeView

import TreeView from `@trimbleinc/modus-react-bootstrap/TreeView`
NameTypeDefaultDescription
checkBoxSelection
boolean

Enables checkbox selection on all the Tree items.

collapseIcon
element

Default Collapse icon for all the Tree items including root node.

defaultExpanded
arrayOf

Tree items expanded by default.

defaultSelected
arrayOf

Tree items selected by default (if multiSelect not enabled only the first value is considered).

dragIcon
element

Default Dragging icon to appear before collapse/expand icon for all the Tree items including root node.

expandIcon
element

Default Expand icon for all the Tree items including root node.

expanded
arrayOf

To expand the Tree items.

id required
string

A HTML id attribute, necessary for proper form accessibility.

itemIcon
element

Default icon to appear before the label for all the Tree items including root node.

multiSelectCheckBox
boolean

Enables checkBox selection on multiple Tree items.

multiSelectNode
boolean

Enables selection on multiple Tree items by Shift + Arrow Up/Down or Ctrl + click.

nodeId required
number

An unique numerical id for the root Tree Item, necessary for keyboard navigation

onCheckBoxSelect
function

Callback when a Tree item checkbox is selected.

function onCheckBoxSelect(event: React.SyntheticEvent, selected: number[]) => void
 selected: An array of nodeId(s) of checkbox selected Tree Items
onNodeSelect
function

Callback when Tree item(s) selected.

function onNodeSelect(event: React.SyntheticEvent, selectedNodes: number[], nodeInFocus: number) => void
 selectedNodes: An array of nodeId(s) of selected Tree Items
 nodeInFocus: The current Tree item that is selected.
onNodeToggle
function

Callback when a Tree item expands or collapse.

function onNodeToggle(event: React.SyntheticEvent, expandedNodes: number[], nodeInFocus: number) => void
 expandedNodes: An array of nodeId(s) of expanded Tree Items.
 nodeInFocus: The current Tree item that is expanded.
size
string

To shrink or large the size of Tree and its items size as sm | lg.

TreeViewItem

import TreeViewItem from `@trimbleinc/modus-react-bootstrap/TreeViewItem`
NameTypeDefaultDescription
collapseIcon
element

Collapse icon for the Tree node.

disabled
boolean

Disables the Tree node and its children.

dragIcon
element

Drag icon to appear before collapse/expand icon.

expandIcon
element

Expand icon for the Tree node.

itemIcon
element

Icon to appear before the label.

label required
string | element

Tree Item label

nodeId required
number

An unique numerical id for Tree Item