React-data-grid: Treegrid / row grouping?

[Dreculah]

Does react-data-grid support hierarchical data aka treegrid?

If so, is there an example to study? If not, is there any sense of the level of effort required to add this feature? I might be able to help.

Thanks!

[txm]

Does react-data-grid support hierarchical data aka tree grid?

If so, is there an example to study? If not, is there any sense of the
level of effort required to add this feature? I might be able to help.

I'm not aware of anything yet. I'll be looking into something similar next
week or the week after.

The way I am planning to implement is outside of react-data-grid, but my
use-case is probably slightly different to what you are after.

View 1 - summary view.

A few rows and a few columns.

User selects rows. Clicks GO! to switch to View 2

View 2 - detailed view

A lot more columns, and each row is expanded to show it's children.

Both will be powered by the same data set, with a summaryViewFilter() or
detailedViewFilter().

Happy to have a combined effort if there is a common link?

Andrew McGregor
07940 22 33 11

[Dreculah]

Thanks.

We need something like this: http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html
Is this close enough to what you need?

We're also using material-ui, so if we use/extend react-data-grid we'll have to hook its styles into the material-ui theme.

The material-ui project wants to rewrite their table to give it the features already in react-data-grid. I wonder if react-data-grid code is compatible enough that it could be used instead?

[bakesteve]

That example shoudl be the easiest one to implement of the possible solutions to grouping / sub grids. In fact, you could probably do it right now with a custom rowRenderer (to handle hiding rows) and renderer on the 1st column to show the arrow. But something built in would be better.

Our thinking is tracked under #11 but if you arelooking at contributing that would be great. Slack probably best place to discuss that.

In terms of material-ui, dont have more than a vague understanding of that project, but in principal, yeah, using react-data-grid there should be fairly straightforward, and styling the grid based on a material design stylesheet should be fairly trivial. If you get that working, be good to take a pull request with an example showing that?

[Dreculah]

@bakesteve How do I connect with react data grid on slack?

[bakesteve]

@Dreculah its https://react-data-grid.slack.com/ (and we'll update the project home page with this too)
look forward to working together on this
(+ @malonecj )

[txm]

Could I get a Slack invite please?

[jpdriver]

@txm punch your email in here https://react-data-grid.herokuapp.com

[malonecj]

Implemented and merged to master. Closing now

[softage0]

@malonecj Is it implemented? How can I use this feature?

[celim307]

Also would love a heads up on the documentation!

[keshavkaul]

any updates on the documentation?

[jpdriver]

hi all,

we haven't written full documentation but you can see a working example here and view the source behind that here.

the gist is you have a children property on your Row that holds JSON Objects with the same structure as a regular row.

these are then spliced into / out of the rows array as you expand / collapse the indicator (see ln 84)

HTH

[terolepisto]

Any change to get "multiple nested" treeview so each child could have children ?