[tree view] Add virtualization support

[rashdeva]

Tree View doesn't support virtualization for long-list items. It will be nice to have this feature.

Summary 💡

To maintain consistency with Autocomplete, it's better to use react-window as a virtualization library. To keep the current API, the Tree View component should merge items to flat list and by using indents present items. (https://material-ui.com/components/lists/#nested-list)

Motivation 🔦

Most of the time tree view uses for long lists and structured data. If the parent item has 1000 children, the performance slows down.

Other requests

• https://docs.google.com/spreadsheets/d/1jJBwkKY1a8a30usE_mvK0dRt86OIhSn89GQ8HZ48ZuI/edit?gid=1226571167#gid=1226571167&range=B3

Benchmarks

• https://github.com/lukasbach/react-complex-tree
• https://github.com/brimdata/react-arborist. Project maintained? Is this project still active? brimdata/react-arborist#275
• https://github.com/Lodin/react-vtree no longer maintained
• https://github.com/ChilliCream/react-aspen no longer maintained
• https://github.com/diogofcunha/react-virtualized-tree no longer maintained

[david-ic3]

@oliviertassinari Using the DataGridPro with Tree Data solves the performance issue for very large trees? Is this the way?

[oliviertassinari]

Using the DataGridPro with Tree Data solves the performance issue for very large trees?

@david-ic3 the data grid could indeed be used this way, and solve the performance issue with large tree. However, https://mui.com/x/react-data-grid/tree-data/ implements the role="treegrid" which isn't the same as role="treeview":

• treegrid: https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/
• treeview: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

So for a tree view like the VS Code file browser, this would have its limits (I don't know each enough to say what are the true differences).

---

I have transferred this issue to MUI X, per https://mui.com/material-ui/discover-more/roadmap/.

[MpStyle]

Waiting for an official implementation, I attempted to implement a tree view with virtualization using react-virtualized-auto-sizer and react-window.
The data model is flat, and the depth is determined by a property (depth).
The React components are Material-UI components.
If anyone is interested, you can find it here:
src/component/common/tree-view

[sauron918]

Since the virtualization support is already on the MUI X public roadmap with a label Plan: Pro, should we expect that virtualization will be available for the Pro version only?

[oliviertassinari]

should we expect that virtualization will be available for the Pro version only?

@sauron918 Correct. Per our research (see issue description benchmark), the range of options available is slim, too often those efforts get abandoned. The dream is to bring the amazing VS Code tree view to React. See https://www.reddit.com/r/reactjs/comments/16vt1vv/react_component_needed_virtual_trees_w_drag_and/ for an interesting thread on this.

So it seems that if we license this MIT, we won't be able to make it work long-term (not enough donations, sponsoring, ad revenue, etc.). So we need a commercial license. I think this was borderline to land under the Premium plan (close to no open-source alternatives) but Pro feels less greedy, so more "right".

[itayG98]

Hello, I just wanted to ask if there any estimation to publish data for the virtual-tree at the pro plan? :)

[flaviendelangle]

@itayG98 We are aiming for an initial release of the virtualization in @mui/x-tree-view-pro for the launch of MUI X v8.0.0, probably in March 2025. The feature might be ready sooner as part of the v8 beta.

See https://mui.com/blog/mui-x-v8-alpha-zero/.

[hazelraidoninc]

@itayG98 We are aiming for an initial release of the virtualization in @mui/x-tree-view-pro for the launch of MUI X v8.0.0, probably in March 2025. The feature might be ready sooner as part of the v8 beta.

Would really love to see this as soon as possible!

[itayG98]

@itayG98 We are aiming for an initial release of the virtualization in @mui/x-tree-view-pro for the launch of MUI X v8.0.0, probably in March 2025. The feature might be ready sooner as part of the v8 beta.

Great ! I wish you luck!