@mui/x-data-grid 9.3.0 → 9.5.0

package/hooks/core/useGridVirtualizer.d.mts

@@ -9,28 +9,28 @@ export declare function useGridVirtualizer(): {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
     rowsMeta: {
-      getRowHeight: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      getRowHeight: (rowId: import("@mui/x-virtualizer").RowId) => any;
       setLastMeasuredRowIndex: (index: number) => void;
-      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer/models").RowId, height: number) => void;
+      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer").RowId, height: number) => void;
       hydrateRowsMeta: () => void;
-      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer/models").RowId) => () => void | undefined;
-      rowHasAutoHeight: (id: import("@mui/x-virtualizer/models").RowId) => any;
-      getRowHeightEntry: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("@mui/x-virtualizer").RowId) => any;
+      getRowHeightEntry: (rowId: import("@mui/x-virtualizer").RowId) => any;
       getLastMeasuredRowIndex: () => number;
       resetRowHeights: () => void;
     };
   } & {
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
-    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer").RowId, Record<number, number>>;
     getters: any;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
     forceUpdateRenderContext: () => void;
     scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
   } & {
     getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
   } & {

package/hooks/core/useGridVirtualizer.d.ts

@@ -9,28 +9,28 @@ export declare function useGridVirtualizer(): {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
     rowsMeta: {
-      getRowHeight: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      getRowHeight: (rowId: import("@mui/x-virtualizer").RowId) => any;
       setLastMeasuredRowIndex: (index: number) => void;
-      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer/models").RowId, height: number) => void;
+      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer").RowId, height: number) => void;
       hydrateRowsMeta: () => void;
-      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer/models").RowId) => () => void | undefined;
-      rowHasAutoHeight: (id: import("@mui/x-virtualizer/models").RowId) => any;
-      getRowHeightEntry: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("@mui/x-virtualizer").RowId) => any;
+      getRowHeightEntry: (rowId: import("@mui/x-virtualizer").RowId) => any;
       getLastMeasuredRowIndex: () => number;
       resetRowHeights: () => void;
     };
   } & {
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
-    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer").RowId, Record<number, number>>;
     getters: any;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
     forceUpdateRenderContext: () => void;
     scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
   } & {
     getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
   } & {

package/hooks/features/columns/gridColumnsUtils.js

@@ -14,14 +14,14 @@ exports.hydrateColumnsWidth = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _colDef = require("../../../colDef");
+var _gridColumnTypesRegistry = require("../../../colDef/gridColumnTypesRegistry");
+var _signature = require("../../../constants/signature");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _utils = require("../../../utils/utils");
 var _densitySelector = require("../density/densitySelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 const COLUMNS_DIMENSION_PROPERTIES = exports.COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
-const COLUMN_TYPES = (0, _colDef.getGridDefaultColumnTypes)();
-
 /**
  * Computes width for flex columns.
  * Based on CSS Flexbox specification:
@@ -223,11 +223,7 @@ const applyInitialState = (columnsState, initialState) => {
   return newColumnsState;
 };
 function getDefaultColTypeDef(type) {
-  let colDef = COLUMN_TYPES[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
-  if (type && COLUMN_TYPES[type]) {
-    colDef = COLUMN_TYPES[type];
-  }
-  return colDef;
+  return (0, _gridColumnTypesRegistry.getRegisteredColumnTypeDef)(type);
 }
 const createColumnsState = ({
   apiRef,
@@ -238,6 +234,18 @@ const createColumnsState = ({
   updateInitialVisibilityModel = false
 }) => {
   const isInsideStateInitializer = !apiRef.current.state.columns;
+
+  // A community `DataGrid` must not resolve a Pro/Premium-only column type even if a Pro grid
+  // registered it globally in the same bundle (shared module registry). Fall back to the default
+  // type def in that case, so the column behaves like a plain column.
+  // NOTE: this is a community-vs-paid gate only — it does not distinguish Pro from Premium. It is
+  // enough today because the only registered type (`multiSelect`) is available in both Pro and
+  // Premium. If a Pro-only or Premium-only column type is added later, make this plan-aware:
+  // track each type's minimum plan in the registry and compare it against the grid signature
+  // (DataGrid < DataGridPro < DataGridPremium), so e.g. a Premium-only type also falls back in
+  // `DataGridPro`.
+  const isCommunity = apiRef.current.state.props?.signature === _signature.GridSignature.DataGrid;
+  const getColTypeDef = type => isCommunity && !(0, _gridColumnTypesRegistry.isCommunityColumnType)(type) ? getDefaultColTypeDef(undefined) : getDefaultColTypeDef(type);
   let columnsState;
   if (isInsideStateInitializer) {
     columnsState = {
@@ -270,7 +278,7 @@ const createColumnsState = ({
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
-      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(newColumn.type), {
+      existingState = (0, _extends2.default)({}, getColTypeDef(newColumn.type), {
         field,
         hasBeenResized: false
       });
@@ -281,7 +289,7 @@ const createColumnsState = ({
 
     // If the column type has changed - merge the existing state with the default column type definition
     if (existingState && existingState.type !== newColumn.type) {
-      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(newColumn.type), {
+      existingState = (0, _extends2.default)({}, getColTypeDef(newColumn.type), {
         field
       });
     }
@@ -294,7 +302,7 @@ const createColumnsState = ({
         }
       }
     });
-    const mergedProps = (0, _extends2.default)({}, getDefaultColTypeDef(newColumn.type), {
+    const mergedProps = (0, _extends2.default)({}, getColTypeDef(newColumn.type), {
       hasBeenResized,
       field
     });

package/hooks/features/columns/gridColumnsUtils.mjs

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import resolveProps from '@mui/utils/resolveProps';
-import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from "../../../colDef/index.mjs";
+import { GRID_STRING_COL_DEF } from "../../../colDef/index.mjs";
+import { getRegisteredColumnTypeDef, isCommunityColumnType } from "../../../colDef/gridColumnTypesRegistry.mjs";
+import { GridSignature } from "../../../constants/signature.mjs";
 import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from "./gridColumnsSelector.mjs";
 import { clamp } from "../../../utils/utils.mjs";
 import { gridDensityFactorSelector } from "../density/densitySelector.mjs";
 import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/gridHeaderFilteringSelectors.mjs";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.mjs";
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
-const COLUMN_TYPES = getGridDefaultColumnTypes();
-
 /**
  * Computes width for flex columns.
  * Based on CSS Flexbox specification:
@@ -209,11 +209,7 @@ const applyInitialState = (columnsState, initialState) => {
   return newColumnsState;
 };
 export function getDefaultColTypeDef(type) {
-  let colDef = COLUMN_TYPES[DEFAULT_GRID_COL_TYPE_KEY];
-  if (type && COLUMN_TYPES[type]) {
-    colDef = COLUMN_TYPES[type];
-  }
-  return colDef;
+  return getRegisteredColumnTypeDef(type);
 }
 export const createColumnsState = ({
   apiRef,
@@ -224,6 +220,18 @@ export const createColumnsState = ({
   updateInitialVisibilityModel = false
 }) => {
   const isInsideStateInitializer = !apiRef.current.state.columns;
+
+  // A community `DataGrid` must not resolve a Pro/Premium-only column type even if a Pro grid
+  // registered it globally in the same bundle (shared module registry). Fall back to the default
+  // type def in that case, so the column behaves like a plain column.
+  // NOTE: this is a community-vs-paid gate only — it does not distinguish Pro from Premium. It is
+  // enough today because the only registered type (`multiSelect`) is available in both Pro and
+  // Premium. If a Pro-only or Premium-only column type is added later, make this plan-aware:
+  // track each type's minimum plan in the registry and compare it against the grid signature
+  // (DataGrid < DataGridPro < DataGridPremium), so e.g. a Premium-only type also falls back in
+  // `DataGridPro`.
+  const isCommunity = apiRef.current.state.props?.signature === GridSignature.DataGrid;
+  const getColTypeDef = type => isCommunity && !isCommunityColumnType(type) ? getDefaultColTypeDef(undefined) : getDefaultColTypeDef(type);
   let columnsState;
   if (isInsideStateInitializer) {
     columnsState = {
@@ -256,7 +264,7 @@ export const createColumnsState = ({
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
-      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
+      existingState = _extends({}, getColTypeDef(newColumn.type), {
         field,
         hasBeenResized: false
       });
@@ -267,7 +275,7 @@ export const createColumnsState = ({
 
     // If the column type has changed - merge the existing state with the default column type definition
     if (existingState && existingState.type !== newColumn.type) {
-      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
+      existingState = _extends({}, getColTypeDef(newColumn.type), {
         field
       });
     }
@@ -280,7 +288,7 @@ export const createColumnsState = ({
         }
       }
     });
-    const mergedProps = _extends({}, getDefaultColTypeDef(newColumn.type), {
+    const mergedProps = _extends({}, getColTypeDef(newColumn.type), {
       hasBeenResized,
       field
     });

package/hooks/features/columns/useGridColumns.js

@@ -10,6 +10,7 @@ exports.columnsStateInitializer = void 0;
 exports.useGridColumns = useGridColumns;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("./gridColumnsSelector");
@@ -349,6 +350,16 @@ function useGridColumns(apiRef, props) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
     }
   }, [apiRef, logger, props.columnVisibilityModel]);
+  const checkMultiSelectColumns = React.useCallback(orderedFields => {
+    if (props.signature !== _signature.GridSignature.DataGrid) {
+      return;
+    }
+    const lookup = (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef);
+    if (orderedFields.some(field => lookup[field]?.type === 'multiSelect')) {
+      (0, _warning.warnOnce)(['MUI X: The `multiSelect` column type is available in Pro and Premium versions', 'Use `<DataGridPro />` or `<DataGridPremium />` to render it correctly.', 'For more details, see https://mui.com/x/react-data-grid/column-definition/#multi-select-keyboard-interactions']);
+    }
+  }, [apiRef, props.signature]);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnsChange', checkMultiSelectColumns);
 }
 function mergeColumnsState(columnsState) {
   return state => (0, _extends2.default)({}, state, {

package/hooks/features/columns/useGridColumns.mjs

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 import { useGridLogger } from "../../utils/useGridLogger.mjs";
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from "./gridColumnsSelector.mjs";
@@ -340,6 +341,16 @@ export function useGridColumns(apiRef, props) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
     }
   }, [apiRef, logger, props.columnVisibilityModel]);
+  const checkMultiSelectColumns = React.useCallback(orderedFields => {
+    if (props.signature !== GridSignature.DataGrid) {
+      return;
+    }
+    const lookup = gridColumnLookupSelector(apiRef);
+    if (orderedFields.some(field => lookup[field]?.type === 'multiSelect')) {
+      warnOnce(['MUI X: The `multiSelect` column type is available in Pro and Premium versions', 'Use `<DataGridPro />` or `<DataGridPremium />` to render it correctly.', 'For more details, see https://mui.com/x/react-data-grid/column-definition/#multi-select-keyboard-interactions']);
+    }
+  }, [apiRef, props.signature]);
+  useGridEvent(apiRef, 'columnsChange', checkMultiSelectColumns);
 }
 function mergeColumnsState(columnsState) {
   return state => _extends({}, state, {

package/hooks/features/dataSource/models.d.mts

@@ -41,7 +41,7 @@ export interface GridDataSourceApiBase {
 }
 export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parents: GridRowId[], options?: GridDataSourceFetchRowChildrenOptions) => void;
+  fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
   handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

package/hooks/features/dataSource/models.d.ts

@@ -41,7 +41,7 @@ export interface GridDataSourceApiBase {
 }
 export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parents: GridRowId[], options?: GridDataSourceFetchRowChildrenOptions) => void;
+  fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
   handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

package/hooks/features/dataSource/useGridDataSourceBase.d.mts

@@ -14,8 +14,8 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   debouncedFetchRows: ((parentId?: GridRowId, params?: import("./models.mjs").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
-    group: "dataSourceRowsUpdate";
-    processor: GridStrategyProcessor<"dataSourceRowsUpdate">;
+    group: "dataSourceRootRowsUpdate";
+    processor: GridStrategyProcessor<"dataSourceRootRowsUpdate">;
   };
   setStrategyAvailability: () => void;
   startPolling: () => void;

package/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -14,8 +14,8 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   debouncedFetchRows: ((parentId?: GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
-    group: "dataSourceRowsUpdate";
-    processor: GridStrategyProcessor<"dataSourceRowsUpdate">;
+    group: "dataSourceRootRowsUpdate";
+    processor: GridStrategyProcessor<"dataSourceRootRowsUpdate">;
   };
   setStrategyAvailability: () => void;
   startPolling: () => void;

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -25,7 +25,7 @@ var _gridDataSourceSelector = require("./gridDataSourceSelector");
 var _utils2 = require("./utils");
 var _cache = require("./cache");
 var _gridDataSourceError = require("./gridDataSourceError");
-const _excluded = ["skipCache", "keepChildrenExpanded"];
+const _excluded = ["skipCache", "keepChildrenExpanded", "showChildrenLoading"];
 const noopCache = {
   clear: () => {},
   get: () => undefined,
@@ -64,22 +64,26 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     if (!getRows) {
       return;
     }
-    if (parentId && parentId !== _gridRowsUtils.GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
-      options.fetchRowChildren?.([parentId]);
-      return;
-    }
-    options.clearDataSourceState?.();
     const _ref = params || {},
       {
         skipCache,
-        keepChildrenExpanded
+        keepChildrenExpanded,
+        showChildrenLoading
       } = _ref,
       getRowsParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), getRowsParams);
+    if (parentId && parentId !== _gridRowsUtils.GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
+      options.fetchRowChildren?.([parentId], [fetchParams], showChildrenLoading);
+      return;
+    }
+    options.clearDataSourceState?.();
     const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
     const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
     if (!skipCache && responses.every(response => response !== undefined)) {
-      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+      // Bump the request id so any cache-miss request still in flight is treated as
+      // stale and won't override the cached data we're about to apply.
+      lastRequestId.current += 1;
+      apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
         response: _utils2.CacheChunkManager.mergeResponses(responses),
         fetchParams,
         options: {
@@ -87,6 +91,9 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      if (standardRowsUpdateStrategyActive) {
+        apiRef.current.setLoading(false);
+      }
       return;
     }
 
@@ -101,7 +108,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
       cacheResponses.forEach((response, key) => cache.set(key, response));
       if (lastRequestId.current === requestId) {
-        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
           response: getRowsResponse,
           fetchParams,
           options: {
@@ -112,7 +119,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
-        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
           error: originalError,
           fetchParams,
           options: {
@@ -126,7 +133,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             params: fetchParams,
             cause: originalError
           }));
-        } else {
+        } else if (process.env.NODE_ENV !== 'production') {
           (0, _warning.warnOnce)(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
         }
       }
@@ -159,9 +166,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
         return acc;
       }, []);
       if (expandedGroupIds.length > 0) {
-        fetchRowChildrenOption(expandedGroupIds, {
-          showChildrenLoading: false
-        });
+        fetchRowChildrenOption(expandedGroupIds, [], false);
       }
     };
     const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
@@ -179,7 +184,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       }
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, response);
       cacheResponses.forEach((cacheResponse, key) => cache.set(key, cacheResponse));
-      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+      apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
         response,
         fetchParams,
         options: {}
@@ -245,7 +250,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           params,
           cause: errorThrown
         }));
-      } else {
+      } else if (process.env.NODE_ENV !== 'production') {
         (0, _warning.warnOnce)(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
       }
       throw errorThrown; // Let the caller handle the error further
@@ -260,10 +265,17 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   };
   const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
   const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    // Clear the rows first and immediately mark the grid as loading so the overlay
+    // selector never observes the intermediate `rows=[] && loading=false` state that
+    // would otherwise pick `noRowsOverlay`. Order matters: `setRows([])` rebuilds
+    // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
+    // it to survive the rebuild. This handler is only wired up when a standard strategy
+    // is active via the `runIf` guards on the returned `events` object.
     apiRef.current.setRows([]);
+    apiRef.current.setLoading(true);
     stopPolling();
     debouncedFetchRows();
-  }, [stopPolling, debouncedFetchRows, apiRef]);
+  }, [apiRef, stopPolling, debouncedFetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -290,7 +302,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   React.useEffect(() => {
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
-    if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData) {
+    if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
     if (props.dataSource) {
@@ -311,7 +323,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     debouncedFetchRows,
     strategyProcessor: {
       strategyName: _utils2.DataSourceRowsUpdateStrategy.Default,
-      group: 'dataSourceRowsUpdate',
+      group: 'dataSourceRootRowsUpdate',
       processor: handleDataUpdate
     },
     setStrategyAvailability,

package/hooks/features/dataSource/useGridDataSourceBase.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["skipCache", "keepChildrenExpanded"];
+const _excluded = ["skipCache", "keepChildrenExpanded", "showChildrenLoading"];
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -57,22 +57,26 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     if (!getRows) {
       return;
     }
-    if (parentId && parentId !== GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
-      options.fetchRowChildren?.([parentId]);
-      return;
-    }
-    options.clearDataSourceState?.();
     const _ref = params || {},
       {
         skipCache,
-        keepChildrenExpanded
+        keepChildrenExpanded,
+        showChildrenLoading
       } = _ref,
       getRowsParams = _objectWithoutPropertiesLoose(_ref, _excluded);
     const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), getRowsParams);
+    if (parentId && parentId !== GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
+      options.fetchRowChildren?.([parentId], [fetchParams], showChildrenLoading);
+      return;
+    }
+    options.clearDataSourceState?.();
     const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
     const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
     if (!skipCache && responses.every(response => response !== undefined)) {
-      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+      // Bump the request id so any cache-miss request still in flight is treated as
+      // stale and won't override the cached data we're about to apply.
+      lastRequestId.current += 1;
+      apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
         response: CacheChunkManager.mergeResponses(responses),
         fetchParams,
         options: {
@@ -80,6 +84,9 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      if (standardRowsUpdateStrategyActive) {
+        apiRef.current.setLoading(false);
+      }
       return;
     }
 
@@ -94,7 +101,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
       cacheResponses.forEach((response, key) => cache.set(key, response));
       if (lastRequestId.current === requestId) {
-        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
           response: getRowsResponse,
           fetchParams,
           options: {
@@ -105,7 +112,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
-        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
           error: originalError,
           fetchParams,
           options: {
@@ -119,7 +126,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             params: fetchParams,
             cause: originalError
           }));
-        } else {
+        } else if (process.env.NODE_ENV !== 'production') {
           warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
         }
       }
@@ -152,9 +159,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
         return acc;
       }, []);
       if (expandedGroupIds.length > 0) {
-        fetchRowChildrenOption(expandedGroupIds, {
-          showChildrenLoading: false
-        });
+        fetchRowChildrenOption(expandedGroupIds, [], false);
       }
     };
     const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
@@ -172,7 +177,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       }
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, response);
       cacheResponses.forEach((cacheResponse, key) => cache.set(key, cacheResponse));
-      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+      apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
         response,
         fetchParams,
         options: {}
@@ -238,7 +243,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           params,
           cause: errorThrown
         }));
-      } else {
+      } else if (process.env.NODE_ENV !== 'production') {
         warnOnce(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
       }
       throw errorThrown; // Let the caller handle the error further
@@ -253,10 +258,17 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   };
   const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
   const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    // Clear the rows first and immediately mark the grid as loading so the overlay
+    // selector never observes the intermediate `rows=[] && loading=false` state that
+    // would otherwise pick `noRowsOverlay`. Order matters: `setRows([])` rebuilds
+    // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
+    // it to survive the rebuild. This handler is only wired up when a standard strategy
+    // is active via the `runIf` guards on the returned `events` object.
     apiRef.current.setRows([]);
+    apiRef.current.setLoading(true);
     stopPolling();
     debouncedFetchRows();
-  }, [stopPolling, debouncedFetchRows, apiRef]);
+  }, [apiRef, stopPolling, debouncedFetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -283,7 +295,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   React.useEffect(() => {
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
-    if (currentStrategy !== DataSourceRowsUpdateStrategy.Default && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData) {
+    if (currentStrategy !== DataSourceRowsUpdateStrategy.Default && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
     if (props.dataSource) {
@@ -304,7 +316,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     debouncedFetchRows,
     strategyProcessor: {
       strategyName: DataSourceRowsUpdateStrategy.Default,
-      group: 'dataSourceRowsUpdate',
+      group: 'dataSourceRootRowsUpdate',
       processor: handleDataUpdate
     },
     setStrategyAvailability,

package/hooks/features/dataSource/utils.d.mts

@@ -3,6 +3,7 @@ export declare enum DataSourceRowsUpdateStrategy {
   Default = "set-flat-rows",
   LazyLoading = "replace-row-range",
   GroupedData = "set-grouped-rows",
+  LazyLoadedGroupedData = "replace-grouped-row-range",
 }
 /**
  * Provides better cache hit rate by:

package/hooks/features/dataSource/utils.d.ts

@@ -3,6 +3,7 @@ export declare enum DataSourceRowsUpdateStrategy {
   Default = "set-flat-rows",
   LazyLoading = "replace-row-range",
   GroupedData = "set-grouped-rows",
+  LazyLoadedGroupedData = "replace-grouped-row-range",
 }
 /**
  * Provides better cache hit rate by: