Hierarchical Data / Tree Data

[Fee0]

It would be nice to be able to display some hierarchical data like a file/folder structure. Something similar to what AG-Grid is doing here: https://www.ag-grid.com/javascript-data-grid/server-side-model-tree-data/

Data hierarchy is represented like this:

And table looks like that:

It would probably makes sense to restrict the area to toggle the hierarchy in the cell, such that the cell can also be normaly interacted with via double click or similar. Maybe lazily loading the data of collapsed hierarchies when uncollapsing them would increase performance.

[jassmith]

Representing trees is not overly difficult save for the flattening. I want it to be automatic from the data structure but maybe starting by letting the user flatten the data first is enough to start.

[ccollie]

In addition, and maybe as a step toward tree-likee data, would be simple nested tables ?

[jassmith]

That would break selection pretty heavily.

[ccollie]

That would break selection pretty heavily. I see. I would even settle for row expansion.

[jassmith]

What do you mean by row expansion?

[ccollie]

Something like:

https://jbetancur.github.io/react-data-table-component/?path=/story/expandable-basic--basic

[jassmith]

Oh yeah, thats definitely not high on my priority list, the original suggestion here is something I think we can do without too much pain. Next time I get a free 4 or 5 hours I think I can make a demo and maybe someone can help bring it over the line.

[ccollie]

Fair enough, and thanks for your effort. It looks fantastic !

[pzcfg]

This is something you can implement yourself using the existing API. I built a version of this for a project, and just posted a pared down example in #358.

https://user-images.githubusercontent.com/94077014/171967439-0a3a2193-eef4-4c4b-aff9-ee0dced9f462.mp4

Essentially I take the tree data and flatten it into an array of items, adding a "depth" value and skipping the children of collapsed items. A custom cell renderer then draws the text and triangle with the appropriate indentation and collapsed state, and an onCellClicked handler checks if the triangle is clicked and then toggles the "collapsed" state of the item.

[jassmith]

This is now possible in 6.0.0 with some manual work. However there are more improvements expected.