Skip to content

Rich Tree View - Selection

Handle how users can select items.

Single selection

By default, the Tree View allows selecting a single item.

Press Enter to start editing

Multi selection

Use the multiSelect prop to enable multi-selection.

Press Enter to start editing

Disable selection

Use the disableSelection prop if you don't want your items to be selectable:

Press Enter to start editing

Checkbox selection

To activate checkbox selection set checkboxSelection={true}:

Press Enter to start editing

This is also compatible with multi selection:

Press Enter to start editing

Controlled selection

Use the selectedItems prop to control the selected items.

You can use the onSelectedItemsChange prop to listen to changes in the selected items and update the prop accordingly.

Press Enter to start editing

Track item selection change

Use the onItemSelectionToggle prop if you want to react to an item selection change:

No item selection recorded

Press Enter to start editing

Parent / children selection relationship

Automatically select an item when all of its children are selected and automatically select all children when the parent is selected.

If you cannot wait for the official implementation, you can create your own custom solution using the selectedItems, onSelectedItemsChange and onItemSelectionToggle props:

Press Enter to start editing

Imperative API

Select or deselect an item

Use the selectItem API method to select or deselect an item:

  // The DOM event that triggered the change
  // The id of the item to select or deselect
  // If `true`, the other already selected items will remain selected
  // Otherwise, they will be deselected
  // This parameter is only relevant when `multiSelect` is `true`
  // If `true` the item will be selected
  // If `false` the item will be deselected
  // If not defined, the item's new selection status will be the opposite of its current one
  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

You can use the keepExistingSelection property to avoid losing the already selected items when using multiSelect:

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium


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