Material-ui: Implement a TreeView component

[diegosiao]

Treeview component request

Hi! Nice library... thanks for your good work!
You already have a great set of components, but I believe a component that you should consider implementing is a Treeview.
How nice would it be? : ) Take a look in this

[oliviertassinari]

@diegosiao Why not using one of these alternatives?

• https://github.com/fiffty/react-treeview-mui
• https://github.com/helfi92/material-ui-treeview

[diegosiao]

@oliviertassinari one of your suggested alternatives I included in my feature request https://github.com/fiffty/react-treeview-mui... This one is a great library.

But a feature request is about that right? A new feature that is possibly missing.

[oliviertassinari]

@diegosiao I'm trying to better understand your motivation. Why should we support such component?

[diegosiao]

Well, tree views are still one of the best ways of navigating through many objects.

Other reasons:

1) The package 'react-treeview-mui' only works with versions 0.x of material-ui and seems to have no plans to update: https://github.com/fiffty/react-treeview-mui/issues/13

2) The package 'material-ui-treeview' is too simplistic and does not even support icons :(

3) Google has his own material implementation of it.

[oliviertassinari]

@diegosiao I think that this component is too specific. I'm closing, I think that it's outside of our scope. Instead, let's document the alternative the community is building.

[diegosiao]

let's document the alternative the community is building.

That would be great... if there are any minimally usable. :(

[ewrayjohnson]

@oliviertassinari: I think you closed this without due consideration of the need of the request.

[oliviertassinari]

@ewrayjohnson I have added the waiting for users upvotes tag. I haved closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[FernandoGOT]

+1

[edcancios]

+1

[jshearer]

I'm rewriting a project that was originally written in Vue, in React. Vuetify has a treeview that just works out of the box here: https://vuetifyjs.com/en/components/treeview, and I have tried the following community React treeview implementations without success:

• https://github.com/fiffty/react-treeview-mui
  
  
  
  • Does not work with updated material ui packages, also required awkward flattening of naturally nested tree structure into flat array
  
  
• https://github.com/helfi92/material-ui-treeview
  
  
  
  • Has serious performance problems when rendering a sufficient number of nodes (could be solved by using virtual rendering)
  
  
• https://github.com/jakezatecky/react-checkbox-tree
  
  
  
  • Not material ui, also doesn't let me style the rendering as much as I want (putting the drop-down arrow on the right, for example)
  
  
  • Best option so far
  
  

I would _love_ a treeview implementation from material ui that uses virtualization to allow for rendering large amounts of nodes without performance limitations.

[joshwooding]

I don’t mind working on this but I was wondering if anyone had a syntax they would prefer? I don’t really like passing in objects/arrays to build components in a core library

[jshearer]

@joshwooding I tend to agree with you. How about something like this?

<TreeView>
    <TreeViewNode key="about" expanded={true} toggleOnClick={true} onToggle={(is_expanded) => ...} title="About Us">
        <TreeViewNode key="recent_updates"> <Typography>Recent Updates</Typography></TreeViewNode>
        <TreeViewNode key="contact_us" component={(<div>Contact Us</div>)}/>
    </TreeViewNode>
</TreeView>

I'm showing 3 potential ways to specify the title. Whichever you end up going with, I think it's important to be able to swap out the rendering for something custom (hence the component prop).

With a component-based interface like this, recursively mapping a nested object into a TreeViewNode would be a piece of cake.

Even though passing in an object or array is certainly smelly, it might be worth allowing expanded, and onExpand props to be passed to TreeView so that you don't have to worry about using closures to properly manage the expandedness of child nodes. Something like

<TreeView
    expanded={["about", "recent_updates"]}
    onExpand={(new_expanded) => setExpanded(new_expanded)} // new_expanded = ["about"] for example
>
...
</TreeView>

[mviens]

Not only is a treeview required for advanced UIs, but it needs to support drag-and-drop as well. This further includes having hooks for accepting or rejecting the drop based on content and position.

[vishalrajole]

+1
I am also looking for similar component. It would be better if its inbuilt in core library itself. I came across https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/tree-data/ which is nice but paid one.

[n370]

@vishalrajole they have nice use case examples.

Do you all agree on @jshearer recommendation? I was looking at the code for the vuetify TreeView https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VTreeview/VTreeviewNode.ts component and saw it matches perfectly my use case. I'm willing to work on a PR if y'all think I can use that as a model to implement the TreeView here. I'm currently using https://github.com/shallinta/material-ui-tree in a project but unfortunately it has too many issues to the point I'm willing to start fixing it myself. It would be perfect if we had this baked in.

[itssamuelrowe]

Is there an alpha version of the TreeView I can use?

[oliviertassinari]

There is an ongoing effort in #14827.

[itssamuelrowe]

Is there any chance that the component may be available by next week? I could contribute if there's anything I could do. Thanks.

[oliviertassinari]

@itssamuelrowe I highlight doubt it will be ready next week. If we can ship it within a month, it will exceed my expectations.