Rich Tree View - Items

Pass data to your Tree View.

Basic usage

The items can be defined with the items prop, which expects an array of objects.

Item identifier

Each item must have a unique identifier.

This identifier is used internally to identify the item in the various models and to track the item across updates.

By default, the Rich Tree View component looks for a property named id in the data set to get that identifier:

const ITEMS = [{ id: 'tree-view-community' }];

<RichTreeView items={ITEMS} />;

If the item's identifier is not called id, then you need to use the getItemId prop to tell the Rich Tree View component where it is located.

The following demo shows how to use getItemId to grab the unique identifier from a property named internalId:

const ITEMS = [{ internalId: 'tree-view-community' }];

function getItemId(item) {
  return item.internalId;
}

<RichTreeView items={ITEMS} getItemId={getItemId} />;

Item label

Each item must have a label which does not need to be unique.

By default, the Rich Tree View component looks for a property named label in the data set to get that label:

const ITEMS = [{ label: '@mui/x-tree-view' }];

<RichTreeView items={ITEMS} />;

If the item's label is not called label, then you need to use the getItemLabel prop to tell the Rich Tree View component where it's located:

The following demo shows how to use getItemLabel to grab the unique identifier from a property named name:

const ITEMS = [{ name: '@mui/x-tree-view' }];

function getItemLabel(item) {
  return item.name;
}

<RichTreeView items={ITEMS} getItemLabel={getItemLabel} />;

Disabled items

Use the isItemDisabled prop on the Rich Tree View to disable interaction and focus on a Tree Item:

function isItemDisabled(item) {
  return item.disabled ?? false;
}

<RichTreeView isItemDisabled={isItemDisabled} />;

Focus disabled items

Use the disabledItemsFocusable prop to control if disabled Tree Items 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 by ID

Use the getItem API method to get an item by its ID.

const item = apiRef.current.getItem(
  // The id of the item to retrieve
  itemId,
);

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

Get the current item tree

Use the getItemTree API method to get the current item tree.

const itemTree = apiRef.current.getItemTree();

Get an item's children by ID

Use the getItemOrderedChildrenIds API method to get an item's children by its ID.

const childrenIds = apiRef.current.getItemOrderedChildrenIds(
  // The id of the item to retrieve the children from
  itemId,
);

API

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

• <RichTreeView />
• <TreeItem />