Rich Tree View - Selection

Handle how users can select items.

Multi selection

The Tree View also supports multi-selection:

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

Press Enter to start editing

Disable selection

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

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

Press Enter to start editing

Controlled selection

Use the selectedNodes prop to control the selected items.

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

Data Grid
Date and Time Pickers
Charts
Tree View

<Box sx={{ mb: 1 }}>
  <Button onClick={handleSelectClick}>
    {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</Box>
<Box sx={{ minHeight: 200, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedNodes={selectedNodes}
    onSelectedNodesChange={handleSelectedNodesChange}
    multiSelect
  />
</Box>

<Box sx={{ mb: 1 }}>
  <Button onClick={handleSelectClick}>
    {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</Box>
<Box sx={{ minHeight: 200, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedNodes={selectedNodes}
    onSelectedNodesChange={handleSelectedNodesChange}
    multiSelect
  />
</Box>

Press Enter to start editing

Track node selection change

Use the onNodeSelectionToggle prop if you want to react to a node selection change:

No node selection recorded

Data Grid
Date and Time Pickers
Charts
Tree View

<Typography>
  {lastSelectedNode == null
    ? 'No node selection recorded'
    : `Last selected node: ${lastSelectedNode}`}
</Typography>
<Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onNodeSelectionToggle={handleNodeSelectionToggle}
  />
</Box>

<Typography>
  {lastSelectedNode == null
    ? 'No node selection recorded'
    : `Last selected node: ${lastSelectedNode}`}
</Typography>
<Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onNodeSelectionToggle={handleNodeSelectionToggle}
  />
</Box>

Press Enter to start editing

API

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