MUI X Tree View

A Tree View widget presents a hierarchical list.

Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

Available components

There are two versions of the Tree View available.

SimpleTreeView

The SimpleTreeView component receives its items as JSX children. It is designed for simple use-cases where the items are hardcoded.

Data Grid
Date and Time Pickers

<TreeView
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
>
  <TreeItem nodeId="grid" label="Data Grid">
    <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
    <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
    <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
  </TreeItem>
  <TreeItem nodeId="pickers" label="Date and Time Pickers">
    <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
    <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
  </TreeItem>
</TreeView>

<TreeView
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
>
  <TreeItem nodeId="grid" label="Data Grid">
    <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
    <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
    <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
  </TreeItem>
  <TreeItem nodeId="pickers" label="Date and Time Pickers">
    <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
    <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
  </TreeItem>
</TreeView>

Press Enter to start editing

RichTreeView

The RichTreeView component receives its items through the items prop. It is designed for more advanced use-cases where the items are dynamically loaded from a data source.

Data Grid
Date and Time Pickers

<RichTreeView
  items={MUI_X_PRODUCTS}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
/>

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.