Rich Tree View - Expansion

Handle how users can expand and collapse items.

Controlled expansion

Use the expandedItems prop to control the expanded items.

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

Track item expansion change

Use the onItemExpansionToggle prop to react to an item expansion change:

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 TreeItem content.

Imperative API

To use the apiRef object, you need to initialize it using the useRichTreeViewApiRef() or useRichTreeViewProApiRef() hook as follows:

// Community package
const apiRef = useRichTreeViewApiRef();

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

// Pro package
const apiRef = useRichTreeViewProApiRef();

return <RichTreeViewPro apiRef={apiRef} items={ITEMS} />;

When your component first renders, apiRef.current is undefined. After the initial render, apiRef holds methods to interact imperatively with RichTreeView.

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,
  // If `true` the item is expanded
  // If `false` the item is collapsed
  // If not defined, the item's expansion status is toggled.
  shouldBeExpanded,
});

Check if an item is expanded

Use the isItemExpanded() API method to check the expansion of an item.

apiRef.current.isItemExpanded(
  // The id of the item to check
  itemId,
);

API

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

• <RichTreeView />
• <TreeItem />