React MUI TreeItem API

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google. 

In this article, we are going to discuss the React MUI TreeItem API. The TreeView displays a hierarchical list. It is generally used to display a file system or can be used as a file system navigator. The TreeItem is the component that contains the text/value inside the TreeView. The API provides a lot of functionality and we are going to learn to implement them.

Import TreeItem API

import TreeItem from '@mui/lab/TreeItem';
// or
import { TreeItem } from '@mui/lab';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

• children: It is a component similar to the table row.
• classes: This overrides the existing styles or adds new styles to the component.
• sx: The system prop allows defining system overrides as well as additional CSS styles. 
• nodeId: It takes the id of the node.
• collapseIcon: It is used to set the icon used for collapsing
• ContentComponent: It should be a TreeItemContent and used as a content node.
• ContentProps: It is used for content props.
• disabled: It is used to disable the item.
• endIcon: It is the icon displayed at the end of the item.
• expandIcon: It is the icon used to expand it.
• icon: It is the icon displayed at the end of the item.
• label: It is used to set the label of the item.
• TransitionComponent: It is used for transition in the MUI.
• TransitionProps: The Props are applied to the transition component.

Syntax: Create the TreeItem as follows:

<TreeView defaultCollapseIcon={<ExpandMoreIcon />} 
  defaultExpandIcon={<ChevronRightIcon />}>
  <TreeItem nodeId="1" label="Applications">
    <TreeItem nodeId="2" label="Calendar" />
  </TreeItem>
</TreeView>

Installing and Creating React app, and adding the MUI dependencies.

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have a TreeView with TreeItem.

App.js

Output:

Example 2: In the following example, we have a disabled item.

App.js

Output:

Reference: https://mui.com/material-ui/api/tree-item/