Skip to content
+

Simple Tree View - Items

Learn how to add simple data to the Tree View component.

Basics

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

The Simple Tree View component receives its items directly as JSX children.

Item identifier

Each Tree Item must have a unique itemId. This is used internally to identify the item in the various models, and to track it across updates.

<SimpleTreeView>
  <TreeItem itemId="item-unique-id" {...otherItemProps} />
</SimpleTreeView>

Item label

You must pass a label prop to each Tree Item component, as shown below:

<SimpleTreeView>
  <TreeItem label="Item label" {...otherItemProps} />
</SimpleTreeView>

Disabled items

Use the disabled prop on the Tree Item component to disable interaction and focus:

The disabledItemsFocusable prop

Note that the demo below also includes a switch. This toggles the disabledItemsFocusable prop, which controls whether or not a disabled Tree Item can be focused.

When this prop is set to false:

  • Navigating with keyboard arrow keys will not focus the disabled items, and the next non-disabled item will be focused instead.
  • Typing the first character of a disabled item's label will not move the focus to it.
  • Mouse or keyboard interaction will not expand/collapse disabled items.
  • Mouse or keyboard interaction will not select disabled items.
  • Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected instead.
  • Programmatic focus will not focus disabled items.

When it's set to true:

  • Navigating with keyboard arrow keys will focus disabled items.
  • Typing the first character of a disabled item's label will move focus to it.
  • Mouse or keyboard interaction will not expand/collapse disabled items.
  • Mouse or keyboard interaction will not select disabled items.
  • Shift + arrow keys will not skip disabled items, but the disabled item will not be selected.
  • Programmatic focus will focus disabled items.

Track item clicks

Use the onItemClick prop to track the clicked item:

No item click recorded

Imperative API

Get an item's DOM element by ID

Use the getItemDOMElement API method to get an item's DOM element by its ID.

const itemElement = apiRef.current.getItemDOMElement(
  // The id of the item to get the DOM element of
  itemId,
);
  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
  • Charts
    • @mui/x-charts
  • Tree View
    • @mui/x-tree-view

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.