Rich Tree View - Expansion

Handle how users can expand items.

Controlled expansion

Use the expandedItems prop to control the expanded items.

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

Data Grid
Date and Time Pickers
Charts
Tree View

<div>
  <Button onClick={handleExpandClick}>
    {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedItems={expandedItems}
    onExpandedItemsChange={handleExpandedItemsChange}
  />
</Box>

<div>
  <Button onClick={handleExpandClick}>
    {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedItems={expandedItems}
    onExpandedItemsChange={handleExpandedItemsChange}
  />
</Box>

Press Enter to start editing

Track item expansion change

Use the onItemExpansionToggle prop if you want to react to an item 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.itemId}
  </Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemExpansionToggle={handleItemExpansionToggle}
  />
</Box>

{action == null ? (
  <Typography>No action recorded</Typography>
) : (
  <Typography>
    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
  </Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemExpansionToggle={handleItemExpansionToggle}
  />
</Box>

Press Enter to start editing

Limit expansion to icon container

You can use the expansionTrigger prop to decide if the expansion interaction should be triggered by clicking on the icon container instead of the whole Tree Item content.

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />

<RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />

Press Enter to start editing

Imperative API

To use the apiRef object, you need to initialize it using the useTreeViewApiRef hook as follows:

const apiRef = useTreeViewApiRef();

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

When your component first renders, apiRef will be undefined. After this initial render, apiRef holds methods to interact imperatively with the Tree View.

Change an item expansion

Use the setItemExpansion API method to change the expansion of an item.

apiRef.current.setItemExpansion(
  // The DOM event that triggered the change
  event,
  // The ID of the item to expand or collapse
  itemId,
  // `true` if the item should be expanded, `false` if it should be collapsed
  isExpanded,
);

Data Grid
Date and Time Pickers
Charts
Tree View

<Stack spacing={2} direction="row">
  <Button onClick={handleExpandClick}>Expand Data Grid</Button>
  <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

<Stack spacing={2} direction="row">
  <Button onClick={handleExpandClick}>Expand Data Grid</Button>
  <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</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.