Tree View

TreeView pattern presents hierarchical data in a tree-like structure, where parent nodes can expand to reveal child nodes.

Basic

Source Code

import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const Basic = () => {
  return (
    <div className="p-8 bg-white">
      <TreeView>
        <TreeItem helperText="Helper text" label="Branch - level 1">
          <TreeItem helperText="Helper text" label="Leaf - level 2" />

          <TreeItem helperText="Helper text" label="Branch - level 2">
            <TreeItem helperText="Helper text" label="Leaf - level 3" />

Sizes

  • TreeView supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

Source Code

import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const Sizes = () => {
  return (
    <div className="flex gap-16 p-8 bg-white" style={{ justifyContent: 'space-around' }}>
      <TreeView size="sm">
        <TreeItem helperText="Helper text" label="Branch - level 1">
          <TreeItem helperText="Helper text" label="Leaf - level 2" />
          <TreeItem helperText="Helper text" label="Branch - level 2">
            <TreeItem helperText="Helper text" label="Leaf - level 3" />
            <TreeItem helperText="Helper text" label="Branch - level 3">
              <TreeItem helperText="Helper text" label="Leaf - level 4" />
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const Responsive = () => {
  return (
    <div className="p-8 bg-white">
      <TreeView size="responsive">
        <TreeItem helperText="Helper text" label="Branch - level 1">
          <TreeItem helperText="Helper text" label="Leaf - level 2" />
          <TreeItem helperText="Helper text" label="Branch - level 2">
            <TreeItem helperText="Helper text" label="Leaf - level 3" />
            <TreeItem helperText="Helper text" label="Branch - level 3">
              <TreeItem helperText="Helper text" label="Leaf - level 4" />

Disabled

  • TreeView can be disabled by setting disabled prop to true in component TreeView.

Source Code

import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const Disabled = () => (
  <div className="p-8 bg-white">
    <TreeView size="responsive" disabled>
      <TreeItem helperText="Helper text" label="Branch - level 1">
        <TreeItem helperText="Helper text" label="Leaf - level 2" />
        <TreeItem helperText="Helper text" label="Branch - level 2">
          <TreeItem helperText="Helper text" label="Leaf - level 3" />
          <TreeItem helperText="Helper text" label="Branch - level 3">
            <TreeItem helperText="Helper text" label="Leaf - level 4" />
            <TreeItem helperText="Helper text" label="Leaf - level 4" />
  • A specific TreeItem can be disabled by setting disabled prop to true in component TreeItem.
  • If a TreeItem is disabled, all its children will be disabled.

Source Code

import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const DisabledSubBranch = () => (
  <div className="p-8 bg-white">
    <TreeView size="responsive">
      <TreeItem helperText="Helper text" label="Branch - level 1">
        <TreeItem helperText="Helper text" label="Leaf - level 2" />
        <TreeItem helperText="Helper text" label="Branch - level 2">
          <TreeItem helperText="Helper text" label="Leaf - level 3" />
          <TreeItem helperText="Helper text" label="Branch - level 3" disabled>
            <TreeItem helperText="Helper text" label="Leaf - level 4" />
            <TreeItem helperText="Helper text" label="Leaf - level 4" />

Variants

  • TreeView supports 2 variants default and branch-line and can be changed by passing the variant prop.
  • Default variant is default.

Source Code

import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const Variants = () => (
  <div className="flex gap-16 p-8 bg-white justify-around">
    <TreeView variant="default">
      <TreeItem helperText="Helper text" label="Branch - level 1">
        <TreeItem helperText="Helper text" label="Leaf - level 2" />
        <TreeItem helperText="Helper text" label="Branch - level 2">
          <TreeItem helperText="Helper text" label="Leaf - level 3" />
          <TreeItem helperText="Helper text" label="Branch - level 3">
            <TreeItem helperText="Helper text" label="Leaf - level 4" />
            <TreeItem

Prefix - Suffix

  • TreeItem supports prefix and suffix props to add content before and after the label.

Source Code

import { FileCheck2Outline, FilePlusOutline } from '@ocean-network-express/magenta-ui/icons';
import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const PrefixSuffix = () => {
  const prefixElement = <FileCheck2Outline />;
  return (
    <div className="p-8 bg-white">
      <TreeView variant="branch-line">
        <TreeItem
          prefix={prefixElement}
          suffix={<FilePlusOutline className="ml-auto" />}
          helperText="Helper text"

Controlled open state

  • TreeItem supports defaultOpen prop to set the initial open state of the branch.
  • Default value is true.

Source Code

import { TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';

export const DefaultOpenState = () => (
  <div className="p-8 bg-white">
    <TreeView variant="branch-line">
      <TreeItem helperText="Helper text" label="Level 1 - defaultOpen={true}">
        <TreeItem helperText="Helper text" label="Level 2" />
      </TreeItem>
      <TreeItem helperText="Helper text" label="Level 1 - defaultOpen={false}" defaultOpen={false}>
        <TreeItem helperText="Helper text" label="Level 2" />
      </TreeItem>
    </TreeView>
  • TreeItem supports open and onOpenChange props to control the open state of the branch.

Source Code

import { Button, TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export const ControlOpenState = () => {
  const [openState, setOpenState] = React.useState<{ [key: string]: boolean }>({
    branch1: true,
    branch2: true,
    branch3: true,
  });

  const isCloseAll = Object.values(openState).every((state) => !state);

Selectable TreeView

  • TreeView can turn to selectable tree by using the selectable prop.
  • Default value is false.
  • To select multiple items, hold Ctrl (or ⌘ Command on macOS) and click the items.
  • To select a range of items, click on the first item of the range, then hold the Shift key while clicking on the last item of the range.
  • In selectable mode, onSelectedItemsChange prop can be used to handle the selected items change.

Source Code

const [selectedItems, setSelectedItems] = useState<Map<string, boolean>>(new Map());

return (

  <TreeView
    variant="branch-line"
    size={'responsive'}
    selectable
    onSelectedItemsChange={(items: (TreeOption | undefined)[] | undefined) => {
      if (items) {
        const newSelectedItems = new Map();
        items.forEach((item: TreeItemCheckType) => {
  • The const TreeItems data we using for these examples:

Source Code

const TreeItems: TreeItemCheckType[] = [
  {
    label: 'Branch - level 1',
    subItems: [
      {
        label: 'Branch - level 2',
        subItems: [
          {
            label: 'Leaf - level 3',
          },
          {
            label: 'Leaf - level 3',
  • TreeItem can have a selected prop to indicate the selected state of the item.
  • TreeItem supports the item prop with type TreeOption.
  • TreeOption can have multiple properties and can be used to pass additional data.
  • The TreeItemCheckType, TreeOption, TreeItemWithSelection we using for these examples:

Source Code


  import {
      type TreeOption,
      type TreeItemProps,
      // ...others needed components
  } from '@ocean-network-express/magenta-ui/react';

  type TreeItemCheckType = TreeItemProps & {
    subItems?: TreeItemCheckType[];
  };

  export const TreeItemWithSelection = ({

OnItemClick

  • TreeView supports onItemClick prop to handle the click event on the TreeItem.

Source Code

const [selectedItem, setSelectedItem] = React.useState<string>();

<TreeView
  onItemClick={(e: MouseEvent, item: TreeOption | undefined) => {
    if (item && !item.branchNode) {
      setSelectedItem(item.value);
    }
  }}
  // ...other props
>
  // ...TreeItems render
</TreeView>

Examples

  • TreeView can be used to display a list of items in a tree structure with checkboxes.

Source Code

import { Checkbox, TreeItem, TreeView } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { TreeItemCheckType, TreeItems } from '../../utils/TreeView/helper';

const isUncheckedAllMenuList = (selectedItems: (null | boolean)[]) => {
  return selectedItems.every((i) => i === false);
};

const isCheckedAllMenuList = (selectedItems: (null | boolean)[]) => {
  return selectedItems.every((i) => i === true);
};

Accessibility

TreeView is a regular ul[role="tree"] follow WAI-ARIA recommendations.

Roles, States, and Properties

  • TreeView has role="tree".
  • TreeItem has role="treeitem".
  • TreeItem has div[role="group"] element that contains all it children TreeItem.
  • TreeItem has aria-expanded="true" when it is open and aria-expanded="false" when it is closed.
  • All TreeItem elements in TreeView are focusable, but only one is included in the tab sequence and has tabindex="0".

Keyboard interactions

Key

Function

Condition

Down Arrow

Moves focus to the next node that is focusable without opening or closing a node.

When the any TreeItem has focus.
Up Arrow

Moves focus to the previous node that is focusable without opening or closing a node.

When the any TreeItem has focus.
Right Arrow

- When focus is on a closed node, opens the node; focus does not move.
- When focus is on an open node, moves focus to the first child node.
- When focus is on an end node, does nothing.

When the any TreeItem has focus.
Left Arrow

- When focus is on an open node, closes the node.
- When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
- When focus is on a root node that is also either an end node or a closed node, does nothing.

When the any TreeItem has focus.
Home

Moves focus to the first node in the tree without opening or closing a node.

When the any TreeItem has focus.
End

Moves focus to the last node in the tree that is focusable without opening a node.

When the any TreeItem has focus.

Was this page helpful?