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

You can disable some of the items using the isItemDisabled prop on the RichTreeView component:

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

<RichTreeView isItemDisabled={isItemDisabled} />;

Interact with disabled items

The behavior of disabled tree items depends on the disabledItemsFocusable prop.

If it is false:

• Arrow keys will not focus disabled items, and the next non-disabled item will be focused.
• Typing the first character of a disabled item's label will not focus the item.
• 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.
• Programmatic focus will not focus disabled items.

If it is true:

• Arrow keys will focus disabled items.
• Typing the first character of a disabled item's label will focus the item.
• 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.

API

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

• <RichTreeView />
• <TreeItem />