diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
index ac43f038695ab..435ac1ca1a7eb 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
+++ b/packages/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
index f30b9e4374c7a..6a0979cff342c 100644
--- 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(' - Row grouping', () => {
});
});
+ describe('column pinning', () => {
+ it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "single"', () => {
+ const { setProps } = render(
+ ,
+ );
+ 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(
+ ,
+ );
+ 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();