mui
[data grid] Is there any way to maintain inline editing on a leaf column while row grouping?
The problem in depth
We are using grid inline editing and grouping with a grouping leaf column. Is there any mechanism to allow inline editing of the leaf column? Inline editing works fine on the column but as soon as it's the leaf node the inline editing disappears and I cannot find any mechanism to re-enable it.
Thank you.
Your environment
`npx @mui/envinfo`
System: OS: Windows 11 10.0.26100 Binaries: Node: 20.18.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD pnpm: 9.15.2 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Chrome: Not Found Edge: Not Found npmPackages: @types/react: catalog: => 19.0.1 react: 19.0.0 react-dom: 19.0.0 typescript: catalog: => 5.8.3
Search keywords: leaf editing
Order ID: 109465
To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨
For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction
Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!
Thanks for your understanding! 🙇🏼
Example using the MUI inline editing demo
https://stackblitz.com/edit/mybtixbv?file=src%2FDemo.tsx
Notice in the below screenshot the name column is no longer editable once it is marked as a leaf column
You can work around this by not hiding the column when it's grouped but then the experience suffers since you end up with duplicate columns (defeating the purpose of the leaf imo).
Ok, got it. Thanks for the explanation. The leaf field is not editable. That's not possible to change afaik, since the value will just be rendered into the grouping column. I am not sure if we can somehow bake this into the leaf field. Thoughts @mui/xgrid ?
Group field is forced to be non-editable https://github.com/mui/mui-x/blob/v8.4.0/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx#L38
This makes sense if we are dealing with auto-generated rows, but could be supported if leaf column is used.
We can add this to the board and try to add the support.
For now, to support editing of all columns, you will have to remove custom groupingColDef and show the name column.
That way the editing works, but you will have to show name in its own column.
@RyanTotalEto I've added a waiting for 👍 label to assess its demand as compared to other highly demanded features/enhancements. Please add the 👍 reaction to the issue description to record the upvote.
Done. I realize you guys have probably a ton on your plate but if this could be done at some point it would greatly help. We got a lot of feedback internally about wasted space horizontal when not using the leaf system and adding leaf support was definitely improved that feedback but lack of editing is causing us some grief.
Done. I realize you guys have probably a ton on your plate but if this could be done at some point it would greatly help. We got a lot of feedback internally about wasted space horizontal when not using the leaf system and adding leaf support was definitely improved that feedback but lack of editing is causing us some grief.
Certainly, it seems like a valid request and a valuable addition to me, and we'll surely be working on it at some point.