File Explorer Basic - Expansion

Learn how to handle expanding and collapsing File Explorer 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.

Notes
Images
Movies
Data

Track item expansion change

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

No action recorded

Data Grid
Date and Time Pickers
Charts
File Explorer

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.

Notes
Images
Movies
Data

<FileExplorerBasic aria-label="icon expansion" expansionTrigger="iconContainer">
  <FileElement name={"Notes"}>
    <FileElement name="doc.pdf" />
    <FileElement name="notes.txt" />
  </FileElement>
  <FileElement name={"Images"}>
    <FileElement name={"logo.png"} />
    <FileElement name={"favicon.ico"} />
  </FileElement>
  <FileElement name={"Movies"}>
    <FileElement name={"feature.mp4"} />
  </FileElement>
  <FileElement name={"Data"}>
    <FileElement name={"client-data.xls"} />
  </FileElement>
</FileExplorerBasic>

<FileExplorerBasic aria-label="icon expansion" expansionTrigger="iconContainer">
  <FileElement name={"Notes"}>
    <FileElement name="doc.pdf" />
    <FileElement name="notes.txt" />
  </FileElement>
  <FileElement name={"Images"}>
    <FileElement name={"logo.png"} />
    <FileElement name={"favicon.ico"} />
  </FileElement>
  <FileElement name={"Movies"}>
    <FileElement name={"feature.mp4"} />
  </FileElement>
  <FileElement name={"Data"}>
    <FileElement name={"client-data.xls"} />
  </FileElement>
</FileExplorerBasic>

Press Enter to start editing

Imperative API

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

const apiRef = useFileExplorerApiRef();

return <FileExplorerBasic apiRef={apiRef}>{children}</FileExplorerBasic>;

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

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 will be expanded
  // If `false` the item will be collapsed
  isExpanded,
);

Notes
Images
Movies
Data

API

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