[DataGrid] Implement Tree data

[oliviertassinari]

Benchmark

• https://material-table.com/#/docs/features/tree-data
• https://ant.design/components/table/#components-table-demo-expand-children
• https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/tree-data/
• https://www.ag-grid.com/javascript-grid-tree-data/
• https://www.telerik.com/kendo-react-ui/components/treelist/
• https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview
• http://tabulator.info/docs/4.5/tree
• https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--tree-view
• https://adazzle.github.io/react-data-grid/#/tree-view

[teenguyen]

Hi! Are there any updates to how this feature is going? I've noticed it's been pushed back a few times now and trying to manually implement this has been fairly difficult. Thanks!

[flaviendelangle]

@teenguyen, you have the Project section on the right pannel that tells when we expect to build the feature.
It's not guaranteed of course but it can give you an idea of when we intend to do it 👍

[matandro]

The linked benchmarks focus on child rows / columns
Would this feature include a basic expendable description of the row (single div expending from row containing)?
Example https://material-table.com/#/docs/features/detail-panel

[oliviertassinari]

@matandro Yes, this is pretty much what this feature is about.

[JonasRothmann]

This is the only feature we need to move from using react-table to buying Material-UI X Pro XGrid, so hoping for it to arrive soon!

[oliviertassinari]

@JonasRothmann It's on our roadmap for Q3 2021. Hopefully, we can start working on it next sprint, in two weeks.

[paulprinke]

Looking forward to this release! Is it still progressing for a Q3 release?

[flaviendelangle]

I wrote the 1st line of code this afternoon.
It will be a large feature to build so it won't come that soon, but it's now in progress and should go in Q3 / beginning of Q4 👍

[samborambo305]

Is there an estimate on release for this feature?

[flaviendelangle]

@bitcoinbullbullbull the current target is Q4.
I hope I will be able to release a first version mid-november.

[flaviendelangle]

I would be interested in feedback from the community.
The Tree Data first version is almost ready for review. It is a big chunk and the review / polishing will take several weeks.
But you can already access the documentation from the feature here.

Note that I won't add any new major feature on the Tree Data on this MVP. The goal is to release a first working version and then to enrich on the following version.
But if there are bugs or inconsistent behaviors, it would be interesting to fix them before the release.

Here are some of the features I am thinking about adding later on:

• New option to use filter / sort on the grouping column
• New option to remove the descendant count of the default grouping column
• New option to automatically select/deselect the descendants of a row when selecting/deselecting the row
• New option to lazy load the childrens (probably not any time soon)

---

EDIT : Keep in mind that the Tree Data is different from #212 which I have also started working on (their is a lot of code shared between the two features) and which should have a first MVP in December if everything goes as planned.

[Seddy24]

@flaviendelangle

Is it possible to render the groupingColDef in a different spot than the first column?

[flaviendelangle]

Not currently, what would be your usecase ?

[Seddy24]

@flaviendelang

Row numbers in the first column and then the grouping column.

I think I found a workaround by using the groupingColDef but setting it to hidden and then applying the same CustomGridTreeDataGroupingCell component to one of my static column definitions. Seems to work thoughts??

[flaviendelangle]

I think I found a workaround by using the groupingColDef but setting it to hidden and then applying the same CustomGridTreeDataGroupingCell component to one of my static column definitions. Seems to work thoughts??

Yes, it will probably be the best workaround at first

[samborambo305]

Is there an update on this? Super excited for this feature.

[gustavozirbes]

Is there an update on this? Super excited for this feature.

I believe it will be included in the next release @flaviendelangle?

https://github.com/mui-org/material-ui-x/projects/1#card-45122802

[flaviendelangle]

Yes, it should be released in the coming days 🎉

[gustavozirbes]

What is the priority for the following feature?

• New option to lazy load the childrens (probably not any time soon)

I think this is a very important feature (perhaps the most important one related to tree data).

I'm pretty sure that there was a huge effort to release this current version. But, not having a lazy load option makes it very difficult to use in real applications where we usually don't get anything except parents first and then load children on demand.

[flaviendelangle]

It is a very important feature I fully agree on that.
At one point, we will have to build a data fetching layer on the grid, like AG-Grid have. But it is a long term project that we don't want to rush.

In the meatime, we could add two properties to the grid.

hasChildrenOnServer?: (row: GridRowModel) => boolean;
fetchRowChildren?: (row: GridRowModel) => Promise<GridRowModel[]>;

It will probably not be sufficient in the long run and we will probably have to break this API in v6 or v7 when addind a clean data fetching layer.
But if it unlocks users, it can make sense.

[gustavozirbes]

It would help a lot. I'm using the data grid (pro) but I had to implement the tree in a different way so I could get it working with our API. The properties you mentioned should be enough.

[flaviendelangle]

I created #3377 to centralize discussions on this topic.
I'll try to see what can be done on user-land to avoid blocking users.

[flaviendelangle]

https://codesandbox.io/s/datagridpro-v5-quick-start-forked-ncklk?file=/src/App.tsx

It is kind of hacky and the scroll has some issues
The main problem here is that I re-create the whole tree after updating the rows so I loose the expanded rows and have to re-set them manually.

[trivli]

We've just started to use the tree data view. My biggest concern is the one you mension about forgetting the expanded rows whenever there is a change in a row's data (e.g. click the "view in map" button in the list below). Filtering and sorting does not affect the expansion, it seems.
Is there a way to work around this issue in our legacy component class? -or is there a fix to be expected in the near future?

[flaviendelangle]

Filtering and sorting does not affect the expansion, it seems.

Not sure to understand that one.

I would have liked to merge #3277 before working on non trivial stuff on the tree structure to avoid incompatibilities.

[trivli]

I meant that the expanded rows are kept during both filtering and sorting (which is good :) ).

[flaviendelangle]

Basically the current workflow is

Set the rows => Generate the tree => Sort + Filter => Render

Set the rows causes a complete regeneration of the tree, even if you just change a single row, so you loose any information about the children expansion.

I have several fixes in mind.

A "simple" one would be that the tree generator take the previous tree and expand a row if the previous tree had an expanded row with the same ID.

A "complex" one would be to avoid regenerating the whole tree. It will be important at some point to handle lazy loading / partial filtering and sorting etc...
But it requires a lot more changes at will probably but in 6.0.

[Ut1998]

hi @cherniavskii @MBilalShafi , is it possible to achieve below use case in Tree Data Grid.

1. Suppose we have an action button (Add) on parent level and when we click on Add, then a child row should get added.
2. And nesting this to at least 2 levels, i.e, the child that gets added, will have a Add button, which in turn add a grand child to the child.
3. And the expand icon should be only there if a row has child components.

[flaviendelangle]

Hi,

I'm not working on the data grid anymore, maybe @cherniavskii or @MBilalShafi can help you

[Ut1998]

Sure, thanks

[MBilalShafi]

Hello @Ut1998, you can achieve such a thing using updateRows API method. I've tried to do that in this codesandbox example: https://codesandbox.io/s/bold-spence-hugcdp?file=/demo.tsx

Is this what you are trying to do?