Skip to content
+

Rich Tree View - Customization

Learn how to customize the Rich Tree View component.

Basics

Custom icons

Use the collapseIcon slot, the expandIcon slot and the defaultEndIcon prop to customize the Tree View icons. The demo below shows how to add icons using both an existing icon library, such as Material Icons, and creating an icon from scratch using Material UI's SVG Icon component.

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

Custom toggle animations

Use the groupTransition slot on the TreeItem to pass a component that handles your animation.

The demo below is animated using Material UI's Collapse component together with the react-spring library.

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

Custom styling

Use treeItemClasses to target internal elements of the Tree Item component and change their styles.

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
Press Enter to start editing

Custom label

Use the label slot to customize the Tree Item label or to replace it with a custom component.

The slotProps prop allows you to pass props to the label component. The demo below shows how to pass an id attribute to the Tree Item label:

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

The slots prop allows you to replace the default label with your own component: The demo below shows how to add a basic edition feature on the Tree Item label:

  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro

Headless API

Use the useTreeItem2 hook to create your own component. The demo below shows how to add an avatar and custom typography elements.

  • B
    Bailey Monroe
    • F
      Freddie Reed

Common examples

Limit expansion to icon container

The demo below shows how to trigger the expansion interaction just by clicking on the icon container instead of the whole Tree Item surface.

File explorer

The demo below shows many of the previous customization examples brought together to make the Tree View component look completely different than its default design.

  • Documents

    • Company

      • Invoice

      • Meeting notes

      • Tasks list

      • Equipment

      • Video conference

    • Personal

    • Group photo

  • History

  • Trash

API

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