@mui/x-data-grid-premium 7.21.0 → 7.22.0

package/esm/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
-import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
+import { getRowGroupingFieldFromGroupingCriteria, RowGroupingStrategy, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowGrouping = {
     rulesOnLastRowTreeCreation: []
@@ -29,7 +29,7 @@ export const useGridRowGrouping = (apiRef, props) => {
     changeEvent: 'rowGroupingModelChange'
   });
 
-  /**
+  /*
    * API METHODS
    */
   const setRowGroupingModel = React.useCallback(model => {
@@ -86,6 +86,11 @@ export const useGridRowGrouping = (apiRef, props) => {
     }
     return columnMenuItems;
   }, [props.disableRowGrouping]);
+  const addGetRowsParams = React.useCallback(params => {
+    return _extends({}, params, {
+      groupFields: gridRowGroupingModelSelector(apiRef)
+    });
+  }, [apiRef]);
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
     const shouldExportRowGroupingModel =
@@ -117,10 +122,11 @@ export const useGridRowGrouping = (apiRef, props) => {
     return params;
   }, [apiRef, props.disableRowGrouping]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'getRowsParams', addGetRowsParams);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
 
-  /**
+  /*
    * EVENTS
    */
   const handleCellKeyDown = React.useCallback((params, event) => {
@@ -135,9 +141,13 @@ export const useGridRowGrouping = (apiRef, props) => {
       if (!isOnGroupingCell) {
         return;
       }
+      if (props.unstable_dataSource && !params.rowNode.childrenExpanded) {
+        apiRef.current.unstable_dataSource.fetchRows(params.id);
+        return;
+      }
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
-  }, [apiRef, props.rowGroupingColumnMode]);
+  }, [apiRef, props.rowGroupingColumnMode, props.unstable_dataSource]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
     const rulesOnLastRowTreeCreation = apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation || [];
@@ -152,7 +162,7 @@ export const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === ROW_GROUPING_STRATEGY) {
+      if (apiRef.current.getActiveStrategy('rowTree') === RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }
@@ -161,7 +171,7 @@ export const useGridRowGrouping = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
 
-  /**
+  /*
    * EFFECTS
    */
   React.useEffect(() => {

package/esm/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -3,12 +3,13 @@ import { gridColumnLookupSelector, gridRowTreeSelector, useFirstRender, GRID_CHE
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree, getVisibleRowsLookup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from "./createGroupingColDef.js";
-import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability, getCellGroupingCriteria, getGroupingRules } from "./gridRowGroupingUtils.js";
+import { filterRowTreeFromGroupingColumns, getColDefOverrides, RowGroupingStrategy, isGroupingColumn, setStrategyAvailability, getCellGroupingCriteria, getGroupingRules } from "./gridRowGroupingUtils.js";
 export const useGridRowGroupingPreProcessors = (apiRef, props) => {
   const getGroupingColDefs = React.useCallback(columnsState => {
     if (props.disableRowGrouping) {
       return [];
     }
+    const strategy = props.unstable_dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
     const groupingColDefProp = props.groupingColDef;
 
     // We can't use `gridGroupingRowsSanitizedModelSelector` here because the new columns are not in the state yet
@@ -22,8 +23,9 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
           return [createGroupingColDefForAllGroupingCriteria({
             apiRef,
             rowGroupingModel,
-            colDefOverride: getColDefOverrides(groupingColDefProp, rowGroupingModel),
-            columnsLookup: columnsState.lookup
+            colDefOverride: getColDefOverrides(groupingColDefProp, rowGroupingModel, strategy),
+            columnsLookup: columnsState.lookup,
+            strategy
           })];
         }
       case 'multiple':
@@ -32,7 +34,8 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
             groupingCriteria,
             colDefOverride: getColDefOverrides(groupingColDefProp, [groupingCriteria]),
             groupedByColDef: columnsState.lookup[groupingCriteria],
-            columnsLookup: columnsState.lookup
+            columnsLookup: columnsState.lookup,
+            strategy
           }));
         }
       default:
@@ -40,7 +43,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
           return [];
         }
     }
-  }, [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping]);
+  }, [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping, props.unstable_dataSource]);
   const updateGroupingColumn = React.useCallback(columnsState => {
     const groupingColDefs = getGroupingColDefs(columnsState);
     let newColumnFields = [];
@@ -100,7 +103,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: ROW_GROUPING_STRATEGY
+        groupingName: RowGroupingStrategy.Default
       });
     }
     return updateRowTree({
@@ -113,7 +116,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: ROW_GROUPING_STRATEGY
+      groupingName: RowGroupingStrategy.Default
     });
   }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
@@ -135,27 +138,19 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
     });
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTreeForRowGrouping);
-  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
-  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
-  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
-
-  /**
-   * 1ST RENDER
-   */
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.Default, 'rowTreeCreation', createRowTreeForRowGrouping);
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.Default, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.Default, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.Default, 'visibleRowsLookupCreation', getVisibleRowsLookup);
   useFirstRender(() => {
-    setStrategyAvailability(apiRef, props.disableRowGrouping);
+    setStrategyAvailability(apiRef, props.disableRowGrouping, props.unstable_dataSource);
   });
-
-  /**
-   * EFFECTS
-   */
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (!isFirstRender.current) {
-      setStrategyAvailability(apiRef, props.disableRowGrouping);
+      setStrategyAvailability(apiRef, props.disableRowGrouping, props.unstable_dataSource);
     } else {
       isFirstRender.current = false;
     }
-  }, [apiRef, props.disableRowGrouping]);
+  }, [apiRef, props.disableRowGrouping, props.unstable_dataSource]);
 };

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyOTExNjAwMDAwMA==";
+  const releaseInfo = "MTcyOTc5NjQwMDAwMA==";
   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/hooks/features/rowGrouping/createGroupingColDef.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { GridColDef, GridGroupingColDefOverride } from '@mui/x-data-grid-pro';
 import { GridColumnRawLookup } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
+import { RowGroupingStrategy } from './gridRowGroupingUtils';
 interface CreateGroupingColDefMonoCriteriaParams {
     columnsLookup: GridColumnRawLookup;
     /**
@@ -17,11 +18,12 @@ interface CreateGroupingColDefMonoCriteriaParams {
      * This value comes `prop.groupingColDef`.
      */
     colDefOverride: GridGroupingColDefOverride | null | undefined;
+    strategy?: RowGroupingStrategy;
 }
 /**
  * Creates the `GridColDef` for a grouping column that only takes care of a single grouping criteria
  */
-export declare const createGroupingColDefForOneGroupingCriteria: ({ columnsLookup, groupedByColDef, groupingCriteria, colDefOverride, }: CreateGroupingColDefMonoCriteriaParams) => GridColDef;
+export declare const createGroupingColDefForOneGroupingCriteria: ({ columnsLookup, groupedByColDef, groupingCriteria, colDefOverride, strategy, }: CreateGroupingColDefMonoCriteriaParams) => GridColDef;
 interface CreateGroupingColDefSeveralCriteriaParams {
     apiRef: React.MutableRefObject<GridApiPremium>;
     columnsLookup: GridColumnRawLookup;
@@ -34,9 +36,10 @@ interface CreateGroupingColDefSeveralCriteriaParams {
      * This value comes `prop.groupingColDef`.
      */
     colDefOverride: GridGroupingColDefOverride | null | undefined;
+    strategy?: RowGroupingStrategy;
 }
 /**
  * Creates the `GridColDef` for a grouping column that takes care of all the grouping criteria
  */
-export declare const createGroupingColDefForAllGroupingCriteria: ({ apiRef, columnsLookup, rowGroupingModel, colDefOverride, }: CreateGroupingColDefSeveralCriteriaParams) => GridColDef;
+export declare const createGroupingColDefForAllGroupingCriteria: ({ apiRef, columnsLookup, rowGroupingModel, colDefOverride, strategy, }: CreateGroupingColDefSeveralCriteriaParams) => GridColDef;
 export {};

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -13,6 +13,7 @@ var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _GridGroupingColumnFooterCell = require("../../../components/GridGroupingColumnFooterCell");
 var _GridGroupingCriteriaCell = require("../../../components/GridGroupingCriteriaCell");
+var _GridDataSourceGroupingCriteriaCell = require("../../../components/GridDataSourceGroupingCriteriaCell");
 var _GridGroupingColumnLeafCell = require("../../../components/GridGroupingColumnLeafCell");
 var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
@@ -23,10 +24,15 @@ const GROUPING_COL_DEF_DEFAULT_PROPERTIES = (0, _extends2.default)({}, _xDataGri
   type: 'custom',
   disableReorder: true
 });
-const GROUPING_COL_DEF_FORCED_PROPERTIES = {
+const GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT = {
   editable: false,
   groupable: false
 };
+const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = (0, _extends2.default)({}, GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT, {
+  // TODO: Support these features on the grouping column(s)
+  filterable: false,
+  sortable: false
+});
 
 /**
  * When sorting two cells with different grouping criteria, we consider that the cell with the grouping criteria coming first in the model should be displayed below.
@@ -92,7 +98,8 @@ const createGroupingColDefForOneGroupingCriteria = ({
   columnsLookup,
   groupedByColDef,
   groupingCriteria,
-  colDefOverride
+  colDefOverride,
+  strategy = _gridRowGroupingUtils.RowGroupingStrategy.Default
 }) => {
   const _ref = colDefOverride ?? {},
     {
@@ -102,6 +109,7 @@ const createGroupingColDefForOneGroupingCriteria = ({
     } = _ref,
     colDefOverrideProperties = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const leafColDef = leafField ? columnsLookup[leafField] : null;
+  const CriteriaCell = strategy === _gridRowGroupingUtils.RowGroupingStrategy.Default ? _GridGroupingCriteriaCell.GridGroupingCriteriaCell : _GridDataSourceGroupingCriteriaCell.GridDataSourceGroupingCriteriaCell;
 
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
@@ -129,7 +137,7 @@ const createGroupingColDefForOneGroupingCriteria = ({
 
       // Render current grouping criteria groups
       if (params.rowNode.groupingField === groupingCriteria) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGroupingCriteriaCell.GridGroupingCriteriaCell, (0, _extends2.default)({}, params, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(CriteriaCell, (0, _extends2.default)({}, params, {
           hideDescendantCount: hideDescendantCount
         }));
       }
@@ -174,7 +182,7 @@ const createGroupingColDefForOneGroupingCriteria = ({
   // The properties that can't be overridden with `colDefOverride`
   const forcedProperties = (0, _extends2.default)({
     field: (0, _gridRowGroupingUtils.getRowGroupingFieldFromGroupingCriteria)(groupingCriteria)
-  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT);
   return (0, _extends2.default)({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
 };
 exports.createGroupingColDefForOneGroupingCriteria = createGroupingColDefForOneGroupingCriteria;
@@ -185,7 +193,8 @@ const createGroupingColDefForAllGroupingCriteria = ({
   apiRef,
   columnsLookup,
   rowGroupingModel,
-  colDefOverride
+  colDefOverride,
+  strategy = _gridRowGroupingUtils.RowGroupingStrategy.Default
 }) => {
   const _ref2 = colDefOverride ?? {},
     {
@@ -195,6 +204,7 @@ const createGroupingColDefForAllGroupingCriteria = ({
     } = _ref2,
     colDefOverrideProperties = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
   const leafColDef = leafField ? columnsLookup[leafField] : null;
+  const CriteriaCell = strategy === _gridRowGroupingUtils.RowGroupingStrategy.Default ? _GridGroupingCriteriaCell.GridGroupingCriteriaCell : _GridDataSourceGroupingCriteriaCell.GridDataSourceGroupingCriteriaCell;
 
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
@@ -222,7 +232,7 @@ const createGroupingColDefForAllGroupingCriteria = ({
       }
 
       // Render the groups
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGroupingCriteriaCell.GridGroupingCriteriaCell, (0, _extends2.default)({}, params, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(CriteriaCell, (0, _extends2.default)({}, params, {
         hideDescendantCount: hideDescendantCount
       }));
     },
@@ -262,7 +272,7 @@ const createGroupingColDefForAllGroupingCriteria = ({
   // The properties that can't be overridden with `colDefOverride`
   const forcedProperties = (0, _extends2.default)({
     field: _gridRowGroupingUtils.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD
-  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, strategy === _gridRowGroupingUtils.RowGroupingStrategy.Default ? GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT : GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE);
   return (0, _extends2.default)({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
 };
 exports.createGroupingColDefForAllGroupingCriteria = createGroupingColDefForAllGroupingCriteria;

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { GridRowTreeConfig, GridFilterState, GridFilterModel, GridRowModel, GridColDef, GridKeyValue } from '@mui/x-data-grid-pro';
+import { GridRowTreeConfig, GridFilterState, GridFilterModel, GridRowModel, GridColDef, GridKeyValue, GridDataSource } from '@mui/x-data-grid-pro';
 import { GridAggregatedFilterItemApplier, GridColumnRawLookup } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridGroupingRule, GridGroupingRules, GridRowGroupingModel } from './gridRowGroupingInterfaces';
 import { GridStatePremium } from '../../../models/gridStatePremium';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
-export declare const ROW_GROUPING_STRATEGY = "grouping-columns";
+export declare enum RowGroupingStrategy {
+    Default = "grouping-columns",
+    DataSource = "grouping-columns-data-source"
+}
 export declare const getRowGroupingFieldFromGroupingCriteria: (groupingCriteria: string | null) => string;
 export declare const getRowGroupingCriteriaFromGroupingField: (groupingColDefField: string) => string | null;
 export declare const isGroupingColumn: (field: string) => boolean;
@@ -23,9 +26,9 @@ interface FilterRowTreeFromTreeDataParams {
  * - It is passing the filter
  */
 export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFromTreeDataParams) => Omit<GridFilterState, "filterModel">;
-export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps["groupingColDef"], fields: string[]) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
+export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps["groupingColDef"], fields: string[], strategy?: RowGroupingStrategy) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePremium) => GridStatePremium;
-export declare const setStrategyAvailability: (privateApiRef: React.MutableRefObject<GridPrivateApiPremium>, disableRowGrouping: boolean) => void;
+export declare const setStrategyAvailability: (privateApiRef: React.MutableRefObject<GridPrivateApiPremium>, disableRowGrouping: boolean, dataSource?: GridDataSource) => void;
 export declare const getCellGroupingCriteria: ({ row, colDef, groupingRule, apiRef, }: {
     row: GridRowModel;
     colDef: GridColDef;

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -4,12 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setStrategyAvailability = exports.mergeStateWithRowGroupingModel = exports.isGroupingColumn = exports.getRowGroupingFieldFromGroupingCriteria = exports.getRowGroupingCriteriaFromGroupingField = exports.getGroupingRules = exports.getColDefOverrides = exports.getCellGroupingCriteria = exports.filterRowTreeFromGroupingColumns = exports.areGroupingRulesEqual = exports.ROW_GROUPING_STRATEGY = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = void 0;
+exports.setStrategyAvailability = exports.mergeStateWithRowGroupingModel = exports.isGroupingColumn = exports.getRowGroupingFieldFromGroupingCriteria = exports.getRowGroupingCriteriaFromGroupingField = exports.getGroupingRules = exports.getColDefOverrides = exports.getCellGroupingCriteria = exports.filterRowTreeFromGroupingColumns = exports.areGroupingRulesEqual = exports.RowGroupingStrategy = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
 const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-const ROW_GROUPING_STRATEGY = exports.ROW_GROUPING_STRATEGY = 'grouping-columns';
+let RowGroupingStrategy = exports.RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
+  RowGroupingStrategy["Default"] = "grouping-columns";
+  RowGroupingStrategy["DataSource"] = "grouping-columns-data-source";
+  return RowGroupingStrategy;
+}({});
 const getRowGroupingFieldFromGroupingCriteria = groupingCriteria => {
   if (groupingCriteria === null) {
     return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;
@@ -114,10 +118,10 @@ const filterRowTreeFromGroupingColumns = params => {
   };
 };
 exports.filterRowTreeFromGroupingColumns = filterRowTreeFromGroupingColumns;
-const getColDefOverrides = (groupingColDefProp, fields) => {
+const getColDefOverrides = (groupingColDefProp, fields, strategy) => {
   if (typeof groupingColDefProp === 'function') {
     return groupingColDefProp({
-      groupingName: ROW_GROUPING_STRATEGY,
+      groupingName: strategy ?? RowGroupingStrategy.Default,
       fields
     });
   }
@@ -130,7 +134,7 @@ const mergeStateWithRowGroupingModel = rowGroupingModel => state => (0, _extends
   })
 });
 exports.mergeStateWithRowGroupingModel = mergeStateWithRowGroupingModel;
-const setStrategyAvailability = (privateApiRef, disableRowGrouping) => {
+const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource) => {
   let isAvailable;
   if (disableRowGrouping) {
     isAvailable = () => false;
@@ -140,7 +144,8 @@ const setStrategyAvailability = (privateApiRef, disableRowGrouping) => {
       return rowGroupingSanitizedModel.length > 0;
     };
   }
-  privateApiRef.current.setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+  const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
+  privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
 };
 exports.setStrategyAvailability = setStrategyAvailability;
 const getCellGroupingCriteria = ({

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
+export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSourceRowGroupingPreProcessors = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
+var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
+const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
+  const createRowTreeForRowGrouping = React.useCallback(params => {
+    const getGroupKey = props.unstable_dataSource?.getGroupKey;
+    if (!getGroupKey) {
+      throw new Error('MUI X: No `getGroupKey` method provided with the dataSource.');
+    }
+    const getChildrenCount = props.unstable_dataSource?.getChildrenCount;
+    if (!getChildrenCount) {
+      throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.');
+    }
+    const sanitizedRowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
+    const columnsLookup = (0, _xDataGridPro.gridColumnLookupSelector)(apiRef);
+    const groupingRules = (0, _gridRowGroupingUtils.getGroupingRules)({
+      sanitizedRowGroupingModel,
+      columnsLookup
+    });
+    apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
+    const getRowTreeBuilderNode = rowId => {
+      const parentPath = params.updates.groupKeys ?? [];
+      const row = params.dataRowIdToModelLookup[rowId];
+      const groupingRule = groupingRules[parentPath.length];
+      const groupingValueGetter = groupingRule?.groupingValueGetter;
+      const leafKey = groupingValueGetter?.(row[groupingRule.field], row, columnsLookup[groupingRule.field], apiRef) ?? getGroupKey(params.dataRowIdToModelLookup[rowId]);
+      return {
+        id: rowId,
+        path: [...parentPath, leafKey ?? rowId.toString()].map((key, i) => ({
+          key,
+          field: groupingRules[i]?.field ?? null
+        })),
+        serverChildrenCount: getChildrenCount(params.dataRowIdToModelLookup[rowId]) ?? 0
+      };
+    };
+    if (params.updates.type === 'full') {
+      return (0, _internals.createRowTree)({
+        previousTree: params.previousTree,
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: _gridRowGroupingUtils.RowGroupingStrategy.DataSource
+      });
+    }
+    return (0, _internals.updateRowTree)({
+      nodes: {
+        inserted: params.updates.actions.insert.map(getRowTreeBuilderNode),
+        modified: params.updates.actions.modify.map(getRowTreeBuilderNode),
+        removed: params.updates.actions.remove
+      },
+      previousTree: params.previousTree,
+      previousGroupsToFetch: params.previousGroupsToFetch,
+      previousTreeDepth: params.previousTreeDepths,
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: _gridRowGroupingUtils.RowGroupingStrategy.DataSource
+    });
+  }, [apiRef, props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(() => {
+    const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+    return (0, _internals.skipFiltering)(rowTree);
+  }, [apiRef]);
+  const sortRows = React.useCallback(() => {
+    const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+    return (0, _internals.skipSorting)(rowTree);
+  }, [apiRef]);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'rowTreeCreation', createRowTreeForRowGrouping);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'sorting', sortRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'visibleRowsLookupCreation', _internals.getVisibleRowsLookup);
+};
+exports.useGridDataSourceRowGroupingPreProcessors = useGridDataSourceRowGroupingPreProcessors;

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots">) => void;
+export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -38,7 +38,7 @@ const useGridRowGrouping = (apiRef, props) => {
     changeEvent: 'rowGroupingModelChange'
   });
 
-  /**
+  /*
    * API METHODS
    */
   const setRowGroupingModel = React.useCallback(model => {
@@ -95,6 +95,11 @@ const useGridRowGrouping = (apiRef, props) => {
     }
     return columnMenuItems;
   }, [props.disableRowGrouping]);
+  const addGetRowsParams = React.useCallback(params => {
+    return (0, _extends2.default)({}, params, {
+      groupFields: (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef)
+    });
+  }, [apiRef]);
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const rowGroupingModelToExport = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
     const shouldExportRowGroupingModel =
@@ -126,10 +131,11 @@ const useGridRowGrouping = (apiRef, props) => {
     return params;
   }, [apiRef, props.disableRowGrouping]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowsParams', addGetRowsParams);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
 
-  /**
+  /*
    * EVENTS
    */
   const handleCellKeyDown = React.useCallback((params, event) => {
@@ -144,9 +150,13 @@ const useGridRowGrouping = (apiRef, props) => {
       if (!isOnGroupingCell) {
         return;
       }
+      if (props.unstable_dataSource && !params.rowNode.childrenExpanded) {
+        apiRef.current.unstable_dataSource.fetchRows(params.id);
+        return;
+      }
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
-  }, [apiRef, props.rowGroupingColumnMode]);
+  }, [apiRef, props.rowGroupingColumnMode, props.unstable_dataSource]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const sanitizedRowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
     const rulesOnLastRowTreeCreation = apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation || [];
@@ -161,7 +171,7 @@ const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === _gridRowGroupingUtils.ROW_GROUPING_STRATEGY) {
+      if (apiRef.current.getActiveStrategy('rowTree') === _gridRowGroupingUtils.RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }
@@ -170,7 +180,7 @@ const useGridRowGrouping = (apiRef, props) => {
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
 
-  /**
+  /*
    * EFFECTS
    */
   React.useEffect(() => {

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
-export declare const useGridRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault">) => void;
+export declare const useGridRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;