Skip to content
+

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
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
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
    • @mui/x-data-grid editable
    • @mui/x-data-grid-pro editable
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
Press Enter to start editing

Limit editing to leaves

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

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
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
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro

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
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
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
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
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
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
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
    • Elena Kim
    • Noah Rodriguez
    • Maya Patel
  • Liam Clarke
    • Ethan Lee
    • Ava Jones
Press Enter to start editing

Imperative API

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,
);
Press Enter to start editing