Rich Tree View - Expansion

Handle how users can expand items.

Controlled expansion

Use the expandedNodes prop to control the expanded items.

You can use the onExpandedNodesChange prop to listen to changes in the expanded items and update the prop accordingly.

Data Grid
Date and Time Pickers
Charts
Tree View

<Box sx={{ mb: 1 }}>
  <Button onClick={handleExpandClick}>
    {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</Box>
<Box sx={{ minHeight: 200, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedNodes={expandedNodes}
    onExpandedNodesChange={handleExpandedNodesChange}
  />
</Box>

<Box sx={{ mb: 1 }}>
  <Button onClick={handleExpandClick}>
    {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</Box>
<Box sx={{ minHeight: 200, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedNodes={expandedNodes}
    onExpandedNodesChange={handleExpandedNodesChange}
  />
</Box>

Press Enter to start editing

Track node expansion change

Use the onNodeExpansionToggle prop if you want to react to a node expansion change:

No action recorded

Data Grid
Date and Time Pickers
Charts
Tree View

{action == null ? (
  <Typography>No action recorded</Typography>
) : (
  <Typography>
    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
  </Typography>
)}
<Box sx={{ minHeight: 200, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onNodeExpansionToggle={handleNodeExpansionToggle}
  />
</Box>

{action == null ? (
  <Typography>No action recorded</Typography>
) : (
  <Typography>
    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
  </Typography>
)}
<Box sx={{ minHeight: 200, flexGrow: 1 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onNodeExpansionToggle={handleNodeExpansionToggle}
  />
</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.