Rich Tree View - Label editing

Learn how to edit the label of Tree View items.

Enable label editing

You can use the isItemEditable prop to enable editing. If set to true, this prop will enable label editing on all items:

Data Grid
Date and time pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

Press Enter to start editing

Limit editing to some items

If you pass a method to isItemEditable, only the items for which the method returns true will be editable:

Data Grid
Date and time pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable={(item) => Boolean(item?.editable)}
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable={(item) => Boolean(item?.editable)}
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

Press Enter to start editing

Limit editing to leaves

You can limit the editing to just the leaves of the tree.

Data Grid
Date and time pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  apiRef={apiRef}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable={(item) =>
    apiRef.current!.getItemOrderedChildrenIds(item.id).length === 0
  }
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  apiRef={apiRef}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable={(item) =>
    apiRef.current!.getItemOrderedChildrenIds(item.id).length === 0
  }
  defaultExpandedItems={['grid', 'pickers']}
/>

Press Enter to start editing

Track item label change

Use the onItemLabelChange prop to trigger an action when the label of an item changes.

No item has been edited yet

Data Grid
Date and time pickers
Charts
Tree View

Change the default behavior

By default, blurring the tree item saves the new value if there is one. To modify this behavior, use the slotProps of the TreeItem2.

Data Grid
Date and time pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
/>

Press Enter to start editing

Validation

You can override the event handlers of the labelInput and implement a custom validation logic using the interaction methods from useTreeItem2Utils.

Data Grid
Date and time pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

Press Enter to start editing

Enable editing using only icons

The demo below shows how to entirely override the editing behavior, and implement it using icons.

Data Grid
Date and time pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
  expansionTrigger="iconContainer"
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
  expansionTrigger="iconContainer"
/>

Press Enter to start editing

Create a custom labelInput

The demo below shows how to use a different component in the labelInput slot.

Jane Doe
Liam Clarke

<RichTreeView
  items={ITEMS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['1', '2']}
  getItemLabel={(item) => `${item.firstName} ${item.lastName}`}
/>

<RichTreeView
  items={ITEMS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['1', '2']}
  getItemLabel={(item) => `${item.firstName} ${item.lastName}`}
/>

Press Enter to start editing

Imperative API

To use the apiRef object, you need to initialize it using the useTreeViewApiRef hook as follows:

const apiRef = useTreeViewApiRef();

return <RichTreeView apiRef={apiRef} items={ITEMS}>;

When your component first renders, apiRef will be undefined. After this initial render, apiRef holds methods to interact imperatively with the Tree View.

Change the label of an item

Use the setItemExpansion API method to change the expansion of an item.

apiRef.current.updateItemLabel(
  // The id of the item to to update
  itemId,
  // The new label of the item.
  newLabel,
);

Data Grid
Date and time pickers
Charts
Tree View

<Stack spacing={2} direction="row">
  <Button onClick={handleUpdateLabel}>
    {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
  </Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

<Stack spacing={2} direction="row">
  <Button onClick={handleUpdateLabel}>
    {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
  </Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

Press Enter to start editing