Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
joserodolfofreitas opened this issue Jun 27, 2024 · 1 comment
Open

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

joserodolfofreitas opened this issue Jun 27, 2024 · 1 comment
Labels
component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request plan: Premium Impact at least one Premium user waiting for 👍 Waiting for upvotes

Comments

@joserodolfofreitas
Copy link
Member

joserodolfofreitas commented Jun 27, 2024

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 #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

@joserodolfofreitas joserodolfofreitas added new feature New feature or request waiting for 👍 Waiting for upvotes plan: Premium Impact at least one Premium user labels Jun 27, 2024
@joserodolfofreitas joserodolfofreitas changed the title [data grid] Row spanning with tree behavior [data grid] Row spanning with tree/grouping behavior Jun 27, 2024
@jeffreyschultz
Copy link

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

@flaviendelangle flaviendelangle added the component: data grid This is the name of the generic UI component, not the React module! label Jul 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request plan: Premium Impact at least one Premium user waiting for 👍 Waiting for upvotes
Projects
None yet
Development

No branches or pull requests

3 participants