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 above 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.

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 />