Grouping + Column Group cause runtime error

[michael-land]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/datagrid-forked-s9np3z

Steps:

1. Group by column 1
2. Ungroup by column 1

Screen.Recording.2023-04-03.at.16.11.19.mov

Current behavior 😯

throw runtime exception

Expected behavior 🤔

no exception

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

No response

[m4theushw]

After clicking in the button to ungroup the column, the next render is still considering the grouped column so it fails. The following diff fixes this problem, although we might need to improve the support for grouping columns that are also part of a column group, because it doesn't seem right to see the column twice.

diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
index 58d8ba549..9fd40f5b6 100644
--- a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
+++ b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -396,9 +396,11 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
         0,
         firstVisibleColumnIndex,
       );
       const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
         const column = apiRef.current.getColumn(field);
-        return acc + (column.computedWidth ?? 0);
+        return acc + (column?.computedWidth ?? 0);
       }, 0);
 
       let columnIndex = firstColumnToRender;
@@ -417,7 +419,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
         const headerInfo: HeaderInfo = {
           groupId,
           width: columnFields
-            .map((field) => apiRef.current.getColumn(field).computedWidth)
+            .map((field) => apiRef.current.getColumn(field)?.computedWidth)
             .reduce((acc, val) => acc + val, 0),
           fields: columnFields,
           colIndex: columnIndex,

[pao95]

Hi, I have the same issue. Are you still working on a solution?

[romgrk]

@m4theushw Is that patch good to be applied as-is?

[edecarlini]

Any updates about this issue? I got the same trouble and i'm stuck with this right now

[romgrk]

I think you could submit a PR with the patch above. The task is in our backlog so we'll get around to it at some point soon-ish.

[claudioctonha]

I'm also waiting for this fix. Thanks.

[jonathaneemmett]

For anyone else coming here, the current version at the time of this is "@mui/x-data-grid-premium": "^6.16.2", the fix for us was just to send it an empty column, i.e. TableColumn.name_of_your_column('name_of_your_group_field', ''); This seems to have gotten rid of the error.

[edecarlini]

For anyone else coming here, the current version at the time of this is "@mui/x-data-grid-premium": "^6.16.2", the fix for us was just to send it an empty column, i.e. TableColumn.name_of_your_column('name_of_your_group_field', ''); This seems to have gotten rid of the error.

Hi @jonathaneemmett , could you share a screenshoot about the example that you said before?. It would be very useful if it's works.

Thanks.

[cherniavskii]

Is this issue still reproducible?
I cannot reproduce it in the demo in the issue description.
It seems to work fine with the latest version (6.17.0) of the data grid: https://codesandbox.io/s/datagrid-forked-rnsgs6

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.