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:

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,
);

API

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

• <SimpleTreeView />
• <TreeItem />