[data grid] Editable grouped row ?

[ErnestBrandi]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Hi, Is there a way to make a grouped row / cell editable ? Using the experimentalFeatures={{ newEditingApi: true }} prop does not seem to help here.

Examples 🌈

No response

Motivation 🔦

No response

Order ID 💳 (optional)

No response

[flaviendelangle]

What are you trying to achieve ? Could you give me an example showing exactly which cell you are trying to edit ?

[ErnestBrandi]

Sure, take this sandbox : https://codesandbox.io/s/data-grid-premium-forked-yprihu?file=/src/App.tsx I compute the average value of children rows (for a certain group) and display it in the parent grouped row. But I would also like this value to be editable, and when it is modified, that it resets the values of all its children (ex : if I write down 20 in the parent / grouped row, all children are updated to that value). Should I render a specific component (Textfield), keep track of the grouped row id and update its children accordingly; or is there something more trivial ?

[flaviendelangle]

We don't support that use case right now Are you grouping using the tree data or the row grouping ? With the tree data you might be able to build something, for the row grouping I think it's impossible to make it work without deeper changes on our side

[ErnestBrandi]

I am using row grouping, but I might consider using tree data if it is the only option available.

[flaviendelangle]

For row grouping, we would need to make special edition that does not store anything in the state but just fire a callback that let you do whatever you want (update the children rows in your usecase). But that's fare from trivial

For tree data, if your group is in your data (not an auto generated group) then you should be able to edit it

[ErnestBrandi]

I managed my way around, by mixing both approaches (using valueGetter & renderCell with TextField), but it feels hacky and laggy with a huge amount of rows : https://codesandbox.io/s/data-grid-premium-forked-igbd7m?file=/src/App.tsx

[flaviendelangle]

It is hacky indeed, but probably the best that can be done for now

In #213 you will have a clean version of the read-only aggregation and we could have a look at a proper implementation of the editing later on

[edwinvrgs]

I'm using treeData and I need to modify the autogenerated column since it's the name of the group. I know another approach would be to have the name in a separate column but it breaks our design.

This is what I'm doing: https://codesandbox.io/s/tree-data-editable-grouping-column-yncuip?file=/src/App.tsx. Would appreciate any suggestion or comment if I'm on the right route (the right hacky route 😅).

I'm still having problems with the keyboard events, pressing space gets intercepted somehow and when pressed twice it adds a point.

[edwinvrgs]

Thinking about a separate route I came up with this: https://codesandbox.io/s/tree-data-editable-grouping-column-separate-label-column-q8lhbg?file=/src/App.tsx. Leaving it here in case it helps someone. Now the problem is the indentation.

[edwinvrgs]

I finally found a decent solution for my use case, again, sharing here in the case is helpful: https://codesandbox.io/s/tree-data-editable-grouping-column-with-custom-row-renderer-1nt3ld?file=/src/App.tsx. Since this is using a normal column and not the grouping column, I'm able to process the update inside processRowUpdate.

I'm taking advantage of a custom row component. Having that custom row gives a lot of flexibility, in the real app I'm working on, I also used it to add drag and drop functionality.

[gulicJan]

Hey @flaviendelangle, was there anything done in the direction of editing grouped rows (using row grouping and not tree data)?

[flaviendelangle]

I did not work on the grid for quite some time so I can't say for sure, but I did not hear anything about it lately. Maybe @cherniavskii can give you more information.

[cherniavskii]

While this is not on our radar yet, I've added the "waiting for upvotes" label to this issue so we can measure the demand for this feature. Feel free to upvote it! 👍🏻

[sterlingdcs-damian]

Came here also looking for this. Ideally i'd like to hide the grouping column as having the grouped column duplicated seems odd, but as soon as you do that you can't edit the grouped column any more