@mui/x-data-grid-pro 7.29.5 → 7.29.7

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.29.7
+
+<!-- generated comparing v7.29.6..v7.x -->
+
+_Jun 26, 2025_
+
+We'd like to extend a big thank you to the 4 contributors who made this release possible.
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib
+
+Following are all team members who have contributed to this release:
+@mapache-salvaje, @arminmeh, @michelengelen
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.29.7`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@7.29.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.29.7`, plus:
+
+- [DataGridPro] Fix pinned columns order in column management (#18053) @alisasanib
+
+#### `@mui/x-data-grid-premium@7.29.7` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.29.7`.
+
+### Docs
+
+- [docs] Revise the Row Grouping doc (#17494) @mapache-salvaje
+- [docs] Document `GridRenderContext` (#18501) @arminmeh
+- [docs] Prevent stale rows from appearing on sort and filter change in the lazy loading demo (#18463) @arminmeh
+
+### Miscellaneous
+
+- [infra] Add automated release PR creation script (#18450) @michelengelen
+
+## 7.29.6
+
+_Jun 6, 2025_
+
+We'd like to extend a big thank you to @arminmeh, who made this release possible.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.29.6`
+
+- [DataGrid] Keep pipe pre-processors execution order when callback reference changes (#18217) @arminmeh
+
+#### `@mui/x-data-grid-pro@7.29.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.29.6`.
+
+#### `@mui/x-data-grid-premium@7.29.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.29.6`.
+
+### Docs
+
+- [docs] Keep `groupingColDef` reference stable in the grid demos (#17549) @arminmeh
+
 ## 7.29.5
 
 _May 29, 2025_

package/DataGridPro/useDataGridProComponent.js

@@ -21,16 +21,20 @@ export const useDataGridProComponent = (inputApiRef, props) => {
 
   /**
    * Register all pre-processors called during state initialization here.
+   * Some pre-processors are changing the same part of the state (like the order of the columns).
+   * Order them in descending order of priority.
+   * For example, left pinned columns should always render first from the left, so the `hydrateColumns` pre-processor from `useGridColumnPinningPreProcessors` should be called last (after all other `hydrateColumns` pre-processors).
+   * Similarly, the `hydrateColumns` pre-processor from `useGridRowSelectionPreProcessors` should be called after `useGridTreeDataPreProcessors` because the selection checkboxes should appear before the tree data.
+   * Desired autogenerated columns order is:
+   * left pinned columns -> row reordering column -> checkbox column -> tree data column -> master detail column -> rest of the columns
    */
-  useGridRowSelectionPreProcessors(apiRef, props);
-  useGridRowReorderPreProcessors(apiRef, props);
+  useGridDetailPanelPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDataSourceTreeDataPreProcessors(apiRef, props);
+  useGridRowSelectionPreProcessors(apiRef, props);
   useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
-  useGridDetailPanelPreProcessors(apiRef, props);
-  // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
-  // Because it changes the order of the columns.
+  useGridRowReorderPreProcessors(apiRef, props);
   useGridColumnPinningPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
 

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRegisterPipeProcessor, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, gridExistingPinnedColumnSelector } from '@mui/x-data-grid/internals';
 export const useGridColumnPinningPreProcessors = (apiRef, props) => {
   const {
     disableColumnPinning
@@ -20,12 +20,12 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     apiRef.current.state = _extends({}, savedState, {
       columns: columnsState
     });
-    const visibleColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+    const pinnedColumns = gridExistingPinnedColumnSelector(apiRef);
     apiRef.current.state = savedState;
     // HACK: Ends here //
 
-    const leftPinnedColumns = visibleColumns.left.map(c => c.field);
-    const rightPinnedColumns = visibleColumns.right.map(c => c.field);
+    const leftPinnedColumns = pinnedColumns.left;
+    const rightPinnedColumns = pinnedColumns.right;
     let newOrderedFields;
     const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
     const {

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -6,28 +6,26 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from
 import { gridDetailPanelExpandedRowIdsSelector } from "./gridDetailPanelSelector.js";
 export const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
-    if (props.getDetailPanelContent == null) {
-      // Remove the toggle column, when it exists
-      if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-        delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
-        columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
-      }
-      return columnsState;
-    }
-
-    // Don't add the toggle column if there's already one
-    // The user might have manually added it to have it in a custom position
-    if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-      return columnsState;
-    }
-
-    // Otherwise, add the toggle column at the beginning
-    columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
-    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+    const detailPanelToggleColumn = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
       headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
     });
+    const shouldHaveToggleColumn = !!props.getDetailPanelContent;
+    const hasToggleColumn = columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] != null;
+    if (shouldHaveToggleColumn && !hasToggleColumn) {
+      columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = detailPanelToggleColumn;
+      columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
+    } else if (!shouldHaveToggleColumn && hasToggleColumn) {
+      delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
+      columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
+    } else if (shouldHaveToggleColumn && hasToggleColumn) {
+      columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, detailPanelToggleColumn, columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]);
+      // If the column is not in the columns array (not a custom detail panel toggle column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === GRID_DETAIL_PANEL_TOGGLE_FIELD)) {
+        columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD)];
+      }
+    }
     return columnsState;
-  }, [privateApiRef, props.getDetailPanelContent]);
+  }, [privateApiRef, props.columns, props.getDetailPanelContent]);
   const addExpandedClassToRow = React.useCallback((classes, id) => {
     if (props.getDetailPanelContent == null) {
       return classes;

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -28,19 +28,21 @@ export const useGridRowReorderPreProcessors = (privateApiRef, props) => {
       headerName: privateApiRef.current.getLocaleText('rowReorderingHeaderName')
     });
     const shouldHaveReorderColumn = props.rowReordering;
-    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
-    if (shouldHaveReorderColumn && haveReorderColumn) {
-      columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
-      return columnsState;
-    }
-    if (shouldHaveReorderColumn && !haveReorderColumn) {
+    const hasReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+    if (shouldHaveReorderColumn && !hasReorderColumn) {
       columnsState.lookup[reorderColumn.field] = reorderColumn;
       columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields];
-    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+    } else if (!shouldHaveReorderColumn && hasReorderColumn) {
       delete columnsState.lookup[reorderColumn.field];
       columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== reorderColumn.field);
+    } else if (shouldHaveReorderColumn && hasReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
+      // If the column is not in the columns array (not a custom reorder column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === GRID_REORDER_COL_DEF.field)) {
+        columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields.filter(field => field !== reorderColumn.field)];
+      }
     }
     return columnsState;
-  }, [privateApiRef, classes, props.rowReordering]);
+  }, [privateApiRef, classes, props.columns, props.rowReordering]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateReorderColumn);
 };

package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "../treeData/gridTreeDataGroupColDef.js";
 import { skipFiltering, skipSorting } from "./utils.js";
@@ -56,8 +56,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "./gridTreeDataGroupColDef.js";
 import { filterRowTreeFromTreeData, TreeDataStrategy } from "./gridTreeDataUtils.js";
@@ -56,8 +56,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.29.5
+ * @mui/x-data-grid-pro v7.29.7
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/DataGridPro/useDataGridProComponent.js

@@ -21,16 +21,20 @@ export const useDataGridProComponent = (inputApiRef, props) => {
 
   /**
    * Register all pre-processors called during state initialization here.
+   * Some pre-processors are changing the same part of the state (like the order of the columns).
+   * Order them in descending order of priority.
+   * For example, left pinned columns should always render first from the left, so the `hydrateColumns` pre-processor from `useGridColumnPinningPreProcessors` should be called last (after all other `hydrateColumns` pre-processors).
+   * Similarly, the `hydrateColumns` pre-processor from `useGridRowSelectionPreProcessors` should be called after `useGridTreeDataPreProcessors` because the selection checkboxes should appear before the tree data.
+   * Desired autogenerated columns order is:
+   * left pinned columns -> row reordering column -> checkbox column -> tree data column -> master detail column -> rest of the columns
    */
-  useGridRowSelectionPreProcessors(apiRef, props);
-  useGridRowReorderPreProcessors(apiRef, props);
+  useGridDetailPanelPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDataSourceTreeDataPreProcessors(apiRef, props);
+  useGridRowSelectionPreProcessors(apiRef, props);
   useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
-  useGridDetailPanelPreProcessors(apiRef, props);
-  // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
-  // Because it changes the order of the columns.
+  useGridRowReorderPreProcessors(apiRef, props);
   useGridColumnPinningPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
 

package/modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRegisterPipeProcessor, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, gridExistingPinnedColumnSelector } from '@mui/x-data-grid/internals';
 export const useGridColumnPinningPreProcessors = (apiRef, props) => {
   const {
     disableColumnPinning
@@ -20,12 +20,12 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     apiRef.current.state = _extends({}, savedState, {
       columns: columnsState
     });
-    const visibleColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+    const pinnedColumns = gridExistingPinnedColumnSelector(apiRef);
     apiRef.current.state = savedState;
     // HACK: Ends here //
 
-    const leftPinnedColumns = visibleColumns.left.map(c => c.field);
-    const rightPinnedColumns = visibleColumns.right.map(c => c.field);
+    const leftPinnedColumns = pinnedColumns.left;
+    const rightPinnedColumns = pinnedColumns.right;
     let newOrderedFields;
     const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
     const {

package/modern/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -6,28 +6,26 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from
 import { gridDetailPanelExpandedRowIdsSelector } from "./gridDetailPanelSelector.js";
 export const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
-    if (props.getDetailPanelContent == null) {
-      // Remove the toggle column, when it exists
-      if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-        delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
-        columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
-      }
-      return columnsState;
-    }
-
-    // Don't add the toggle column if there's already one
-    // The user might have manually added it to have it in a custom position
-    if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-      return columnsState;
-    }
-
-    // Otherwise, add the toggle column at the beginning
-    columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
-    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+    const detailPanelToggleColumn = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
       headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
     });
+    const shouldHaveToggleColumn = !!props.getDetailPanelContent;
+    const hasToggleColumn = columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] != null;
+    if (shouldHaveToggleColumn && !hasToggleColumn) {
+      columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = detailPanelToggleColumn;
+      columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
+    } else if (!shouldHaveToggleColumn && hasToggleColumn) {
+      delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
+      columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
+    } else if (shouldHaveToggleColumn && hasToggleColumn) {
+      columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, detailPanelToggleColumn, columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]);
+      // If the column is not in the columns array (not a custom detail panel toggle column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === GRID_DETAIL_PANEL_TOGGLE_FIELD)) {
+        columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD)];
+      }
+    }
     return columnsState;
-  }, [privateApiRef, props.getDetailPanelContent]);
+  }, [privateApiRef, props.columns, props.getDetailPanelContent]);
   const addExpandedClassToRow = React.useCallback((classes, id) => {
     if (props.getDetailPanelContent == null) {
       return classes;

package/modern/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -28,19 +28,21 @@ export const useGridRowReorderPreProcessors = (privateApiRef, props) => {
       headerName: privateApiRef.current.getLocaleText('rowReorderingHeaderName')
     });
     const shouldHaveReorderColumn = props.rowReordering;
-    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
-    if (shouldHaveReorderColumn && haveReorderColumn) {
-      columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
-      return columnsState;
-    }
-    if (shouldHaveReorderColumn && !haveReorderColumn) {
+    const hasReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+    if (shouldHaveReorderColumn && !hasReorderColumn) {
       columnsState.lookup[reorderColumn.field] = reorderColumn;
       columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields];
-    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+    } else if (!shouldHaveReorderColumn && hasReorderColumn) {
       delete columnsState.lookup[reorderColumn.field];
       columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== reorderColumn.field);
+    } else if (shouldHaveReorderColumn && hasReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
+      // If the column is not in the columns array (not a custom reorder column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === GRID_REORDER_COL_DEF.field)) {
+        columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields.filter(field => field !== reorderColumn.field)];
+      }
     }
     return columnsState;
-  }, [privateApiRef, classes, props.rowReordering]);
+  }, [privateApiRef, classes, props.columns, props.rowReordering]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateReorderColumn);
 };

package/modern/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "../treeData/gridTreeDataGroupColDef.js";
 import { skipFiltering, skipSorting } from "./utils.js";
@@ -56,8 +56,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/modern/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "./gridTreeDataGroupColDef.js";
 import { filterRowTreeFromTreeData, TreeDataStrategy } from "./gridTreeDataUtils.js";
@@ -56,8 +56,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.29.5
+ * @mui/x-data-grid-pro v7.29.7
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTc0ODQ2OTYwMDAwMA==";
+  const releaseInfo = "MTc1MDg4ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DataGridPro/useDataGridProComponent.js

@@ -28,16 +28,20 @@ const useDataGridProComponent = (inputApiRef, props) => {
 
   /**
    * Register all pre-processors called during state initialization here.
+   * Some pre-processors are changing the same part of the state (like the order of the columns).
+   * Order them in descending order of priority.
+   * For example, left pinned columns should always render first from the left, so the `hydrateColumns` pre-processor from `useGridColumnPinningPreProcessors` should be called last (after all other `hydrateColumns` pre-processors).
+   * Similarly, the `hydrateColumns` pre-processor from `useGridRowSelectionPreProcessors` should be called after `useGridTreeDataPreProcessors` because the selection checkboxes should appear before the tree data.
+   * Desired autogenerated columns order is:
+   * left pinned columns -> row reordering column -> checkbox column -> tree data column -> master detail column -> rest of the columns
    */
-  (0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
-  (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
+  (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
   (0, _useGridDataSourceTreeDataPreProcessors.useGridDataSourceTreeDataPreProcessors)(apiRef, props);
+  (0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
   (0, _useGridLazyLoaderPreProcessors.useGridLazyLoaderPreProcessors)(apiRef, props);
   (0, _useGridRowPinningPreProcessors.useGridRowPinningPreProcessors)(apiRef);
-  (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
-  // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
-  // Because it changes the order of the columns.
+  (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridColumnPinningPreProcessors.useGridColumnPinningPreProcessors)(apiRef, props);
   (0, _internals.useGridRowsPreProcessors)(apiRef);
 

package/node/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -28,12 +28,12 @@ const useGridColumnPinningPreProcessors = (apiRef, props) => {
     apiRef.current.state = (0, _extends2.default)({}, savedState, {
       columns: columnsState
     });
-    const visibleColumns = (0, _internals.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
+    const pinnedColumns = (0, _internals.gridExistingPinnedColumnSelector)(apiRef);
     apiRef.current.state = savedState;
     // HACK: Ends here //
 
-    const leftPinnedColumns = visibleColumns.left.map(c => c.field);
-    const rightPinnedColumns = visibleColumns.right.map(c => c.field);
+    const leftPinnedColumns = pinnedColumns.left;
+    const rightPinnedColumns = pinnedColumns.right;
     let newOrderedFields;
     const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
     const {

package/node/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -14,28 +14,26 @@ var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
 var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
 const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
-    if (props.getDetailPanelContent == null) {
-      // Remove the toggle column, when it exists
-      if (columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-        delete columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD];
-        columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD);
-      }
-      return columnsState;
-    }
-
-    // Don't add the toggle column if there's already one
-    // The user might have manually added it to have it in a custom position
-    if (columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-      return columnsState;
-    }
-
-    // Otherwise, add the toggle column at the beginning
-    columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
-    columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+    const detailPanelToggleColumn = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
       headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
     });
+    const shouldHaveToggleColumn = !!props.getDetailPanelContent;
+    const hasToggleColumn = columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] != null;
+    if (shouldHaveToggleColumn && !hasToggleColumn) {
+      columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = detailPanelToggleColumn;
+      columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
+    } else if (!shouldHaveToggleColumn && hasToggleColumn) {
+      delete columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD];
+      columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD);
+    } else if (shouldHaveToggleColumn && hasToggleColumn) {
+      columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, detailPanelToggleColumn, columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]);
+      // If the column is not in the columns array (not a custom detail panel toggle column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD)) {
+        columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD)];
+      }
+    }
     return columnsState;
-  }, [privateApiRef, props.getDetailPanelContent]);
+  }, [privateApiRef, props.columns, props.getDetailPanelContent]);
   const addExpandedClassToRow = React.useCallback((classes, id) => {
     if (props.getDetailPanelContent == null) {
       return classes;

package/node/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -36,20 +36,22 @@ const useGridRowReorderPreProcessors = (privateApiRef, props) => {
       headerName: privateApiRef.current.getLocaleText('rowReorderingHeaderName')
     });
     const shouldHaveReorderColumn = props.rowReordering;
-    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
-    if (shouldHaveReorderColumn && haveReorderColumn) {
-      columnsState.lookup[reorderColumn.field] = (0, _extends2.default)({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
-      return columnsState;
-    }
-    if (shouldHaveReorderColumn && !haveReorderColumn) {
+    const hasReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+    if (shouldHaveReorderColumn && !hasReorderColumn) {
       columnsState.lookup[reorderColumn.field] = reorderColumn;
       columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields];
-    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+    } else if (!shouldHaveReorderColumn && hasReorderColumn) {
       delete columnsState.lookup[reorderColumn.field];
       columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== reorderColumn.field);
+    } else if (shouldHaveReorderColumn && hasReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = (0, _extends2.default)({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
+      // If the column is not in the columns array (not a custom reorder column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === _gridRowReorderColDef.GRID_REORDER_COL_DEF.field)) {
+        columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields.filter(field => field !== reorderColumn.field)];
+      }
     }
     return columnsState;
-  }, [privateApiRef, classes, props.rowReordering]);
+  }, [privateApiRef, classes, props.columns, props.rowReordering]);
   (0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'hydrateColumns', updateReorderColumn);
 };
 exports.useGridRowReorderPreProcessors = useGridRowReorderPreProcessors;

package/node/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -64,8 +64,7 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/node/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -64,8 +64,7 @@ const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.29.5
+ * @mui/x-data-grid-pro v7.29.7
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTc0ODQ2OTYwMDAwMA==";
+  const releaseInfo = "MTc1MDg4ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.29.5",
+  "version": "7.29.7",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -39,7 +39,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "7.29.5",
+    "@mui/x-data-grid": "7.29.7",
     "@mui/x-internals": "7.29.0",
     "@mui/x-license": "7.29.1"
   },

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTc0ODQ2OTYwMDAwMA==";
+  const releaseInfo = "MTc1MDg4ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat