Simple Tree View - Expansion

Learn how to handle expanding and collapsing Tree View items.

Controlled expansion

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

Track item expansion change

Use the onItemExpansionToggle prop to trigger an action upon an item being expanded.

Imperative API

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,
);

API

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

• <SimpleTreeView />
• <TreeItem />