[DataGridPremium] Fix column unpinning with row grouping (#15908)

Co-authored-by: Armin Mehinovic <[email protected]>
mui · Dec 19, 2024 · 38eabdb · 38eabdb
1 parent b1c7f61
commit 38eabdb
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 8 deletions.
diff --git a/...ges/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/...ges/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
@@ -116,10 +116,13 @@ export const useGridRowGroupingPreProcessors = (
       const groupingColDefs = getGroupingColDefs(columnsState);
       let newColumnFields: string[] = [];
       const newColumnsLookup: GridColumnRawLookup = {};
+      const prevGroupingfields: string[] = [];
 
       // We only keep the non-grouping columns
       columnsState.orderedFields.forEach((field) => {
-        if (!isGroupingColumn(field)) {
+        if (isGroupingColumn(field)) {
+          prevGroupingfields.push(field);
+        } else {
           newColumnFields.push(field);
           newColumnsLookup[field] = columnsState.lookup[field];
         }
@@ -135,14 +138,17 @@ export const useGridRowGroupingPreProcessors = (
 
         newColumnsLookup[groupingColDef.field] = groupingColDef;
       });
-      const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-      newColumnFields = [
-        ...newColumnFields.slice(0, startIndex),
-        ...groupingColDefs.map((colDef) => colDef.field),
-        ...newColumnFields.slice(startIndex),
-      ];
 
-      columnsState.orderedFields = newColumnFields;
+      if (prevGroupingfields.length !== groupingColDefs.length) {
+        const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+        newColumnFields = [
+          ...newColumnFields.slice(0, startIndex),
+          ...groupingColDefs.map((colDef) => colDef.field),
+          ...newColumnFields.slice(startIndex),
+        ];
+        columnsState.orderedFields = newColumnFields;
+      }
+
       columnsState.lookup = newColumnsLookup;
 
       return columnsState;

diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -2632,6 +2632,58 @@ describe('<DataGridPremium /> - Row grouping', () => {
     });
   });
 
+  describe('column pinning', () => {
+    it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "single"', () => {
+      const { setProps } = render(
+        <Test
+          checkboxSelection
+          initialState={{ rowGrouping: { model: ['category1'] } }}
+          defaultGroupingExpansionDepth={-1}
+        />,
+      );
+      const initialColumnOrder = ['', 'category1', 'id', 'category1', 'category2'];
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+      setProps({ pinnedColumns: { left: ['id'] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal([
+        'id',
+        '',
+        'category1',
+        'category1',
+        'category2',
+      ]);
+      setProps({ pinnedColumns: { left: [] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+    });
+
+    it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "multiple"', () => {
+      const { setProps } = render(
+        <Test
+          checkboxSelection
+          initialState={{ rowGrouping: { model: ['category1', 'category2'] } }}
+          rowGroupingColumnMode="multiple"
+          defaultGroupingExpansionDepth={-1}
+        />,
+      );
+      const initialColumnOrder = ['', 'category1', 'category2', 'id', 'category1', 'category2'];
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+      setProps({
+        pinnedColumns: {
+          left: ['__row_group_by_columns_group_category2__', 'id'],
+        },
+      });
+      expect(getColumnHeadersTextContent()).to.deep.equal([
+        'category2',
+        'id',
+        '',
+        'category1',
+        'category1',
+        'category2',
+      ]);
+      setProps({ pinnedColumns: { left: [] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+    });
+  });
+
   describe('apiRef: addRowGroupingCriteria', () => {
     clock.withFakeTimers();