Rich Tree View - Label editing

Learn how to edit Tree View item labels.

Enable label editing

Use the isItemEditable prop to enable editing. If set to true, this prop enables label editing on all items as shown in the demo below:

Data Grid
Date and Time pickers
Charts
Tree View

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

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

Press Enter to start editing

Limit editing to some items

If you pass a method to isItemEditable, then 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)}
  defaultExpandedItems={['grid', 'pickers']}
/>

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

Press Enter to start editing

Limit editing to leaves

You can limit editing to just the leaves of the tree, as shown below:

Data Grid
Date and Time pickers
Charts
Tree View

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  apiRef={apiRef}
  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 an item label changes:

No item has been edited yet

Data Grid
Date and Time pickers
Charts
Tree View

{lastEditedItem ? (
  <Typography>
    The label of item with id <em>{lastEditedItem!.itemId}</em> has been edited
    to <em>{lastEditedItem!.label}</em>
  </Typography>
) : (
  <Typography>No item has been edited yet</Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    isItemEditable
    defaultExpandedItems={['grid', 'pickers']}
    onItemLabelChange={(itemId, label) => setLastEditedItem({ itemId, label })}
  />
</Box>

{lastEditedItem ? (
  <Typography>
    The label of item with id <em>{lastEditedItem!.itemId}</em> has been edited
    to <em>{lastEditedItem!.label}</em>
  </Typography>
) : (
  <Typography>No item has been edited yet</Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    isItemEditable
    defaultExpandedItems={['grid', 'pickers']}
    onItemLabelChange={(itemId, label) => setLastEditedItem({ itemId, label })}
  />
</Box>

Press Enter to start editing

Change the default behavior

By default, blurring a TreeItem saves the new value if there is one. To modify this behavior, use the slotProps on the TreeItem as shown below:

Data Grid
Date and Time pickers
Charts
Tree View

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem }}
  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 useTreeItemUtils():

Data Grid
Date and Time pickers
Charts
Tree View

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

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

Press Enter to start editing

Enable editing using only icons

The demo below shows how to completely 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: CustomTreeItem }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
  expansionTrigger="iconContainer"
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem }}
  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: CustomTreeItem }}
  isItemEditable
  defaultExpandedItems={['1', '2']}
  getItemLabel={(item) => `${item.firstName} ${item.lastName}`}
/>

<RichTreeView
  items={ITEMS}
  slots={{ item: CustomTreeItem }}
  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 useRichTreeViewApiRef() or useRichTreeViewProApiRef() hook as follows:

// Community package
const apiRef = useRichTreeViewApiRef();

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

// Pro package
const apiRef = useRichTreeViewProApiRef();

return <RichTreeViewPro apiRef={apiRef} items={ITEMS} />;

When your component first renders, apiRef.current is undefined. After the initial render, apiRef holds methods to interact imperatively with RichTreeView.

Change the label of an item

Use the updateItemLabel() API method to imperatively update the label of an item.

apiRef.current.updateItemLabel(
  // The id of the item 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

Change edition mode of an item

Use the setEditedItem() API method to set which item is being edited.

apiRef.current.setEditedItem(
  // The id of the item to edit, or `null` to exit editing mode
  itemId,
);

Jane Doe

<Stack spacing={2} direction="row">
  <Button onClick={handleAddFolder}>+ Add Folder</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView
    items={items}
    apiRef={apiRef}
    isItemEditable={(item) => item.editable}
    onItemLabelChange={handleItemLabelChange}
  />
</Box>

<Stack spacing={2} direction="row">
  <Button onClick={handleAddFolder}>+ Add Folder</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView
    items={items}
    apiRef={apiRef}
    isItemEditable={(item) => item.editable}
    onItemLabelChange={handleItemLabelChange}
  />
</Box>

Press Enter to start editing

Editing lazy loaded children

To store the updated item labels on your server, use the onItemLabelChange() callback function.

Changes to the label are not automatically updated in the dataSourceCache and must be updated manually.

const handleItemLabelChange = (itemId: TreeViewItemId, newLabel: string) => {
  // update your cache here
};

<RichTreeViewPro
  items={[]}
  onItemLabelChange={handleItemLabelChange}
  isItemEditable
  dataSource={{
    getChildrenCount: (item) => item?.childrenCount as number,
    getTreeItems: fetchData,
  }}
  {...otherProps}
/>;

See lazy loading for more details.

API

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