search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.91k stars 1.19k forks source link

[data grid] Row spanning with tree/grouping behavior #13646

Open joserodolfofreitas opened 3 days ago

joserodolfofreitas commented 3 days ago

Sumary

Nesting rows based on groups displayed using row-spanning

Maybe there's a quick win using tree data, but this seems potentially more complex than row grouping. TBD.

Referenced use case

Extracted from:

Here is an excel mockup of a current process artifact that is captured within the security field. We are attempting to convert a manual process that is captured on paper into a more automated workflow, and are attempting to replicate the original form as much as possible to ease adoption.

image

You will notice that Event aggregates Indicator, and Indicator aggregates Action. Every Action is essentially its own row (includes Est. Location, Start Time, End Time, Assignment, and Act. Location), however, they are nested under their parent which groups them together. The odd column you will probably notice is Decision, and this is scoped to the entire Indicator--a specific decision needs to be made once an Indicator has been confirmed.

We also dynamically build the columns under Assets based on what is available to that team. So the number of columns is determined by backing data elsewhere in the app.

I believe that the following is beyond the scope of row spanning, however, I am providing it for completeness to give you better insight into what we would be trying to achieve.

  1. We want to provide the ability to directly add/remove new Event, Indicator, and Action rows within this grid, which almost seems as though a tree data structure would be best for easier management of the backing data.

  2. It would be great if sorting honored the nesting of the rows, so that Action rows sorted under its' Indicator, and Indicator rows sorted under its' Event.

Can this visual design be easily achieved with what is available in the Data Grid at this time? If so, would you be able to point me to someone that could provide some advice?

Potential follow-up

Drag and drop support

possibly close to the behaviors required by https://github.com/mui/mui-x/issues/4821

  1. We want to support drag and drop of nested Indicator and Action rows to new parents; in the event of Indicator, that would be another Event, and for Action, that would be another Indicator.

Search keywords: row spanning tree data

jeffreyschultz commented 2 days ago

Thanks for opening this ticket. Watching and waiting to provide any additional context needed.