@mui/x-data-grid-pro 5.15.3 → 5.17.1

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY2MDc5MTYwMDAwMA==";
+  var releaseInfo = "MTY2MjMyNTIwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/models/dataGridProProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridRowTreeNodeConfig, GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel } from '@mui/x-data-grid';
+import { GridRowTreeNodeConfig, GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridFeatureMode } from '@mui/x-data-grid';
 import { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing } from '@mui/x-data-grid/internals';
 import type { GridPinnedColumns } from '../hooks/features/columnPinning';
 import type { GridPinnedRowsProp } from '../hooks/features/rowPinning';
@@ -7,6 +7,13 @@ import { GridApiPro } from './gridApiPro';
 import { GridGroupingColDefOverride, GridGroupingColDefOverrideParams } from './gridGroupingColDefOverride';
 import { GridInitialStatePro } from './gridStatePro';
 export interface GridExperimentalProFeatures extends GridExperimentalFeatures {
+    /**
+     * Enables the data grid to lazy load rows while scrolling.
+     */
+    lazyLoading: boolean;
+    /**
+     * Enables the the ability for rows to be pinned in data grid.
+     */
     rowPinning: boolean;
 }
 /**
@@ -76,6 +83,13 @@ export interface DataGridProPropsWithDefaultValue extends DataGridPropsWithDefau
      * @default false
      */
     rowReordering: boolean;
+    /**
+     * Loading rows can be processed on the server or client-side.
+     * Set it to 'client' if you would like enable infnite loading.
+     * Set it to 'server' if you would like to enable lazy loading.
+     * * @default "client"
+     */
+    rowsLoadingMode: GridFeatureMode;
 }
 export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState'> {
     /**
@@ -160,6 +174,13 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onRowOrderChange?: GridEventListener<'rowOrderChange'>;
+    /**
+     * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+     * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+     * @param {MuiEvent<{}>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onFetchRows?: GridEventListener<'fetchRows'>;
     /**
      * Rows data to pin on top or bottom.
      */

package/models/gridFetchRowsParams.d.ts

@@ -0,0 +1,22 @@
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid/models';
+/**
+ * Object passed as parameter to the [[onFetchRows]] option.
+ */
+export interface GridFetchRowsParams {
+    /**
+     * The index of the first row to render.
+     */
+    firstRowToRender: number;
+    /**
+     * The index of the last row to render.
+     */
+    lastRowToRender: number;
+    /**
+     * The sort model used to sort the grid.
+     */
+    sortModel: GridSortModel;
+    /**
+     * The filter model.
+     */
+    filterModel: GridFilterModel;
+}

package/models/gridFetchRowsParams.js

@@ -0,0 +1 @@
+export {};

package/models/index.d.ts

@@ -1,3 +1,4 @@
 export * from './gridGroupingColDefOverride';
 export * from './gridRowScrollEndParams';
 export * from './gridRowOrderChangeParams';
+export * from './gridFetchRowsParams';

package/models/index.js

@@ -1,3 +1,4 @@
 export * from './gridGroupingColDefOverride';
 export * from './gridRowScrollEndParams';
-export * from './gridRowOrderChangeParams';
+export * from './gridRowOrderChangeParams';
+export * from './gridFetchRowsParams';

package/modern/DataGridPro/DataGridPro.js

@@ -106,6 +106,7 @@ DataGridProRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -274,6 +275,8 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -668,6 +671,14 @@ DataGridProRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -913,6 +924,14 @@ DataGridProRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

package/modern/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridColumnGroupingPreProcessors } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -11,6 +11,8 @@ import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/featur
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
 import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
+import { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoader';
+import { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors';
 import { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
@@ -19,9 +21,11 @@ export const useDataGridProComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(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.
@@ -49,6 +53,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
@@ -59,6 +64,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
@@ -73,6 +79,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
+  useGridLazyLoader(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);

package/modern/DataGridPro/useDataGridProProps.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES, GridFeatureModeConstant } from '@mui/x-data-grid';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -14,6 +14,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
+  rowsLoadingMode: GridFeatureModeConstant.client,
   getDetailPanelHeight: () => 500
 });
 export const useDataGridProProps = inProps => {

package/modern/components/DataGridProColumnHeaders.js

@@ -11,7 +11,6 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
 import { filterColumns } from './DataGridProVirtualScroller';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -57,6 +56,7 @@ const GridColumnHeadersPinnedColumnHeaders = styled('div', {
   height: '100%',
   zIndex: 1,
   display: 'flex',
+  flexDirection: 'column',
   boxShadow: theme.shadows[2],
   backgroundColor: theme.palette.background.default
 }, theme.palette.mode === 'dark' && {
@@ -98,7 +98,8 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     renderContext,
     getRootProps,
     getInnerProps,
-    getColumns
+    getColumnHeaders,
+    getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef,
     minColumnIndex: leftPinnedColumns.length
@@ -119,35 +120,42 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   }) : null;
   const innerProps = getInnerProps();
   const pinnedColumnHeadersProps = {
-    role: innerProps.role,
-    'aria-rowindex': innerProps['aria-rowindex']
+    role: innerProps.role
   };
   return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
     ref: ref,
     className: className
   }, getRootProps(other), {
-    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
+    children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
       ownerState: {
         side: GridPinnedPosition.left
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: leftRenderContext,
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
-      })
-    })), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      })]
+    })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, innerProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
+      }), getColumnHeaders({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })]
+    })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: {
         side: GridPinnedPosition.right
       },
@@ -156,14 +164,18 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         paddingRight: scrollbarSize
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: rightRenderContext,
         minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
-      })
+      })]
     }))]
   }));
 });

package/modern/components/DataGridProVirtualScroller.js

@@ -272,17 +272,20 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const detailPanels = getDetailPanels();
   const topPinnedRows = getRows({
     renderContext,
-    rows: topPinnedRowsData
+    rows: topPinnedRowsData,
+    position: 'center'
   });
   const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
   const mainRows = getRows({
     renderContext,
-    rowIndexOffset: topPinnedRowsData.length
+    rowIndexOffset: topPinnedRowsData.length,
+    position: 'center'
   });
   const bottomPinnedRows = getRows({
     renderContext,
     rows: bottomPinnedRowsData,
-    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+    position: 'center'
   });
   const contentProps = getContentProps();
   const pinnedColumnsStyle = {
@@ -314,8 +317,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -331,9 +334,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
-          ignoreAutoHeight: true,
           availableSpace: 0,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'right'
         })
       })]
     }) : null, /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
@@ -349,8 +352,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
         children: mainRows
@@ -366,8 +369,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'right'
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
@@ -393,9 +396,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -412,9 +415,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'right'
         })
       })]
     }) : null]

package/modern/components/GridDetailPanelToggleCell.js

@@ -129,7 +129,8 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/modern/components/GridTreeDataGroupingCell.js

@@ -162,7 +162,8 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -39,6 +39,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     y: 0
   });
   const originColumnIndex = React.useRef(null);
+  const forbiddenIndexes = React.useRef({});
   const removeDnDStylesTimeout = React.useRef();
   const ownerState = {
     classes: props.classes
@@ -70,6 +71,57 @@ export const useGridColumnReorder = (apiRef, props) => {
       dragColNode.current.classList.remove(classes.columnHeaderDragging);
     });
     originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+    const draggingColumnGroupPath = apiRef.current.unstable_getColumnGroupPath(params.field);
+    const columnIndex = originColumnIndex.current;
+    const allColumns = apiRef.current.getAllColumns();
+    const groupsLookup = apiRef.current.unstable_getAllGroupDetails(); // The limitingGroupId is the id of the group from which the dragged column should not escape
+
+    let limitingGroupId = null;
+    draggingColumnGroupPath.forEach(groupId => {
+      if (!groupsLookup[groupId]?.freeReordering) {
+        // Only consider group that are made of more than one column
+        if (columnIndex > 0 && allColumns[columnIndex - 1].groupPath?.includes(groupId)) {
+          limitingGroupId = groupId;
+        } else if (columnIndex + 1 < allColumns.length && allColumns[columnIndex + 1].groupPath?.includes(groupId)) {
+          limitingGroupId = groupId;
+        }
+      }
+    });
+    forbiddenIndexes.current = {};
+
+    for (let indexToForbid = 0; indexToForbid < allColumns.length; indexToForbid += 1) {
+      const leftIndex = indexToForbid <= columnIndex ? indexToForbid - 1 : indexToForbid;
+      const rightIndex = indexToForbid < columnIndex ? indexToForbid : indexToForbid + 1;
+
+      if (limitingGroupId !== null) {
+        // verify this indexToForbid will be linked to the limiting group. Otherwise forbid it
+        let allowIndex = false;
+
+        if (leftIndex >= 0 && allColumns[leftIndex].groupPath?.includes(limitingGroupId)) {
+          allowIndex = true;
+        } else if (rightIndex < allColumns.length && allColumns[rightIndex].groupPath?.includes(limitingGroupId)) {
+          allowIndex = true;
+        }
+
+        if (!allowIndex) {
+          forbiddenIndexes.current[indexToForbid] = true;
+        }
+      } // Verify we are not splitting another group
+
+
+      if (leftIndex >= 0 && rightIndex < allColumns.length) {
+        allColumns[rightIndex]?.groupPath?.forEach(groupId => {
+          if (allColumns[leftIndex].groupPath?.includes(groupId)) {
+            if (!draggingColumnGroupPath.includes(groupId)) {
+              // moving here split the group groupId in two distincts chunks
+              if (!groupsLookup[groupId]?.freeReordering) {
+                forbiddenIndexes.current[indexToForbid] = true;
+              }
+            }
+          }
+        });
+      }
+    }
   }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
   const handleDragEnter = React.useCallback((params, event) => {
     event.preventDefault(); // Prevent drag events propagation.
@@ -100,19 +152,47 @@ export const useGridColumnReorder = (apiRef, props) => {
       const targetCol = apiRef.current.getColumn(params.field);
       const dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
       const visibleColumns = apiRef.current.getVisibleColumns();
+      const allColumns = apiRef.current.getAllColumns();
       const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
       const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
       const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
 
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
+        let indexOffsetInHiddenColumns = 0;
 
         if (!targetCol.disableReorder) {
           canBeReordered = true;
         } else if (hasMovedLeft) {
-          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+          canBeReordered = targetColVisibleIndex > 0 && !visibleColumns[targetColVisibleIndex - 1].disableReorder;
         } else {
-          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+          canBeReordered = targetColVisibleIndex < visibleColumns.length - 1 && !visibleColumns[targetColVisibleIndex + 1].disableReorder;
+        }
+
+        if (forbiddenIndexes.current[targetColIndex]) {
+          let nextVisibleColumnField;
+          let indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+
+          if (hasMovedLeft) {
+            nextVisibleColumnField = targetColVisibleIndex > 0 ? visibleColumns[targetColVisibleIndex - 1].field : null;
+
+            while (indexWithOffset > 0 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns -= 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          } else {
+            nextVisibleColumnField = targetColVisibleIndex + 1 < visibleColumns.length ? visibleColumns[targetColVisibleIndex + 1].field : null;
+
+            while (indexWithOffset < allColumns.length - 1 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns += 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          }
+
+          if (forbiddenIndexes.current[indexWithOffset] || allColumns[indexWithOffset].field === nextVisibleColumnField) {
+            // If we ended up on a visible column, or a forbidden one, we can not do the reorder
+            canBeReordered = false;
+          }
         }
 
         const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
@@ -120,7 +200,7 @@ export const useGridColumnReorder = (apiRef, props) => {
         });
 
         if (canBeReorderedProcessed) {
-          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+          apiRef.current.setColumnIndex(dragColField, targetColIndex + indexOffsetInHiddenColumns);
         }
       }
 

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -4,7 +4,7 @@ import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
 //
@@ -104,6 +104,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
+  const colGroupingElementRef = React.useRef();
   const colCellElementsRef = React.useRef();
   const theme = useTheme(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
@@ -124,7 +125,7 @@ export const useGridColumnResize = (apiRef, props) => {
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
-    colCellElementsRef.current.forEach(element => {
+    [...colCellElementsRef.current, ...colGroupingElementRef.current].forEach(element => {
       const div = element;
       let finalWidth;
 
@@ -198,6 +199,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = apiRef.current.columnHeadersContainerElementRef?.current.querySelector(`[data-field="${colDef.field}"]`);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerElementRef?.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
@@ -267,6 +269,7 @@ export const useGridColumnResize = (apiRef, props) => {
     colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
     const field = getFieldFromHeaderElem(colElementRef.current);
     const colDef = apiRef.current.getColumn(field);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerElementRef?.current, field);
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
+import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
 export const useGridDetailPanelPreProcessors = (apiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
     if (props.getDetailPanelContent == null) {
@@ -27,5 +28,19 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
     });
     return columnsState;
   }, [apiRef, props.getDetailPanelContent]);
+  const addExpandedClassToRow = React.useCallback((classes, id) => {
+    if (props.getDetailPanelContent == null) {
+      return classes;
+    }
+
+    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+
+    if (!expandedRowIds.includes(id)) {
+      return classes;
+    }
+
+    return [...classes, 'MuiDataGrid-row--detailPanelExpanded'];
+  }, [apiRef, props.getDetailPanelContent]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'rowClassName', addExpandedClassToRow);
 };

package/modern/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector, GridFeatureModeConstant } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
@@ -14,9 +14,9 @@ export const useGridInfiniteLoader = (apiRef, props) => {
   const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
   const isInScrollBottomArea = React.useRef(false);
   const handleRowsScrollEnd = React.useCallback(scrollPosition => {
-    const dimensions = apiRef.current.getRootDimensions();
+    const dimensions = apiRef.current.getRootDimensions(); // Prevent the infite loading working in combination with lazy loading
 
-    if (!dimensions) {
+    if (!dimensions || props.rowsLoadingMode !== GridFeatureModeConstant.client) {
       return;
     }
 
@@ -36,7 +36,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
       isInScrollBottomArea.current = true;
     }
-  }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
+  }, [contentHeight, props.scrollEndThreshold, props.rowsLoadingMode, visibleColumns, apiRef, currentPage.rows.length]);
   const handleGridScroll = React.useCallback(({
     left,
     top