VOOZH about

URL: https://mui.com/x/react-tree-view/

⇱ Tree View React component - MUI X

Skip to content

👁 Image
👁 Image
MUI X

MUI X Tree View

The Tree View components let users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

  • Paper
    • Header container
      • Avatar
        • Text Content
      • Header Title
      • Header Caption
      • Action Button
    • Image
    • Content
      • Text Content
    • Action Bar
      • Icon Button
      • Icon Button

R

Shrimp and Chorizo Paella

September 14, 2016
👁 Paella dish

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.

Using the MUI X Tree View

Create stunning tree structures

A highly performant, customizable React component with best-in-class developer experience.

Customizable and flexible

Easily adapt the look, feel, and behavior to fit any brand—no matter your use case.

Inclusive by design

Built to meet accessibility standards, ensuring a seamless experience for every user.

Performant and scalable

Leverage features like virtualization and lazy loading to deliver lightning-fast performance at any scale.

Community and Pro

Two packages for every need

Start with the free-forever Community version, then upgrade to Pro when you're ready for additional features and components.

About licensing
👁 Image

Community

Free forever under MIT license. Includes core features such as expansion, selection, and label editing.

Requires a commercial license. Better suited for data-rich and enterprise applications, with features such as reordering, lazy loading, and virtualization.

Customization

Superior developer experience for customization

Intuitive APIs, a modern customization approach, and detailed documentation make it effortless to tailor the component to your specific use case.

  • Paper
    • Header container
      • Avatar
        • Text Content
      • Header Title
      • Header Caption
      • Action Button
    • Image
    • Content
      • Text Content
    • Action Bar
      • Icon Button
      • Icon Button

Advanced features

Support for label editing

👁 Image

Support for label editing

Provides users with control over the presentation of their data.

👁 Image

Drag and drop reordering

Offers an intuitive and efficient way to reorganize the tree structure.

👁 Image

Lazy loading children

Improves performance by loading children on demand, especially for large trees.

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
<RichTreeView
 items={MUI_X_PRODUCTS}
 isItemEditable
/>

Accessibility

Inclusive by design

The MUI X Tree View feature advanced keyboard support that's compliant with WCAG and WAI-ARIA standards, so users who require assistive technology can navigate your interface with ease.

More about accessibility
  • Tree View
    • mui/x-tree-view
    • x-tree-view-pro