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

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');
       }
     }
@@ -169,8 +179,9 @@ const useGridRowGrouping = (apiRef, props) => {
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
+  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'rowGroupingModelChange', () => apiRef.current.unstable_dataSource.fetchRows());
 
-  /**
+  /*
    * 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;

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -16,6 +16,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     if (props.disableRowGrouping) {
       return [];
     }
+    const strategy = props.unstable_dataSource ? _gridRowGroupingUtils.RowGroupingStrategy.DataSource : _gridRowGroupingUtils.RowGroupingStrategy.Default;
     const groupingColDefProp = props.groupingColDef;
 
     // We can't use `gridGroupingRowsSanitizedModelSelector` here because the new columns are not in the state yet
@@ -29,8 +30,9 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
           return [(0, _createGroupingColDef.createGroupingColDefForAllGroupingCriteria)({
             apiRef,
             rowGroupingModel,
-            colDefOverride: (0, _gridRowGroupingUtils.getColDefOverrides)(groupingColDefProp, rowGroupingModel),
-            columnsLookup: columnsState.lookup
+            colDefOverride: (0, _gridRowGroupingUtils.getColDefOverrides)(groupingColDefProp, rowGroupingModel, strategy),
+            columnsLookup: columnsState.lookup,
+            strategy
           })];
         }
       case 'multiple':
@@ -39,7 +41,8 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
             groupingCriteria,
             colDefOverride: (0, _gridRowGroupingUtils.getColDefOverrides)(groupingColDefProp, [groupingCriteria]),
             groupedByColDef: columnsState.lookup[groupingCriteria],
-            columnsLookup: columnsState.lookup
+            columnsLookup: columnsState.lookup,
+            strategy
           }));
         }
       default:
@@ -47,7 +50,7 @@ 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 = [];
@@ -107,7 +110,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: _gridRowGroupingUtils.ROW_GROUPING_STRATEGY
+        groupingName: _gridRowGroupingUtils.RowGroupingStrategy.Default
       });
     }
     return (0, _internals.updateRowTree)({
@@ -120,7 +123,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: _gridRowGroupingUtils.ROW_GROUPING_STRATEGY
+      groupingName: _gridRowGroupingUtils.RowGroupingStrategy.Default
     });
   }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
@@ -142,28 +145,20 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     });
   }, [apiRef]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', updateGroupingColumn);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTreeForRowGrouping);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'filtering', filterRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'sorting', sortRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'visibleRowsLookupCreation', _internals.getVisibleRowsLookup);
-
-  /**
-   * 1ST RENDER
-   */
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'rowTreeCreation', createRowTreeForRowGrouping);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'sorting', sortRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'visibleRowsLookupCreation', _internals.getVisibleRowsLookup);
   (0, _xDataGridPro.useFirstRender)(() => {
-    (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
+    (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping, props.unstable_dataSource);
   });
-
-  /**
-   * EFFECTS
-   */
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (!isFirstRender.current) {
-      (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
+      (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping, props.unstable_dataSource);
     } else {
       isFirstRender.current = false;
     }
-  }, [apiRef, props.disableRowGrouping]);
+  }, [apiRef, props.disableRowGrouping, props.unstable_dataSource]);
 };
 exports.useGridRowGroupingPreProcessors = useGridRowGroupingPreProcessors;

package/index.js

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

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -4,6 +4,7 @@ import { useGridAggregation, aggregationStateInitializer } from "../hooks/featur
 import { useGridAggregationPreProcessors } from "../hooks/features/aggregation/useGridAggregationPreProcessors.js";
 import { useGridRowGrouping, rowGroupingStateInitializer } from "../hooks/features/rowGrouping/useGridRowGrouping.js";
 import { useGridRowGroupingPreProcessors } from "../hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js";
+import { useGridDataSourceRowGroupingPreProcessors } from "../hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js";
 import { useGridExcelExport } from "../hooks/features/export/useGridExcelExport.js";
 import { cellSelectionStateInitializer, useGridCellSelection } from "../hooks/features/cellSelection/useGridCellSelection.js";
 import { useGridClipboardImport } from "../hooks/features/clipboard/useGridClipboardImport.js";
@@ -16,6 +17,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridRowSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
+  useGridDataSourceRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDataSourceTreeDataPreProcessors(apiRef, props);
   useGridLazyLoaderPreProcessors(apiRef, props);

package/modern/components/GridDataSourceGroupingCriteriaCell.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
+import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['groupingCriteriaCell'],
+    toggle: ['groupingCriteriaCellToggle'],
+    loadingContainer: ['groupingCriteriaCellLoadingContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridGroupingCriteriaCellIcon(props) {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const {
+    rowNode,
+    id,
+    field,
+    descendantCount
+  } = props;
+  const loadingSelector = state => state.dataSource.loading[id] ?? false;
+  const errorSelector = state => state.dataSource.errors[id];
+  const isDataLoading = useGridSelector(apiRef, loadingSelector);
+  const error = useGridSelector(apiRef, errorSelector);
+  const handleClick = event => {
+    if (!rowNode.childrenExpanded) {
+      // always fetch/get from cache the children when the node is expanded
+      apiRef.current.unstable_dataSource.fetchRows(id);
+    } else {
+      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    }
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation();
+  };
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.groupingCriteriaCollapseIcon : rootProps.slots.groupingCriteriaExpandIcon;
+  if (isDataLoading) {
+    return /*#__PURE__*/_jsx("div", {
+      className: classes.loadingContainer,
+      children: /*#__PURE__*/_jsx(CircularProgress, {
+        size: "1rem",
+        color: "inherit"
+      })
+    });
+  }
+  return descendantCount > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    size: "small",
+    onClick: handleClick,
+    tabIndex: -1,
+    "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
+  }, rootProps?.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+      title: error?.message ?? null,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+        variant: "dot",
+        color: "error",
+        invisible: !error,
+        children: /*#__PURE__*/_jsx(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    })
+  })) : null;
+}
+export function GridDataSourceGroupingCriteriaCell(props) {
+  const {
+    id,
+    field,
+    rowNode,
+    hideDescendantCount,
+    formattedValue
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const rowSelector = state => state.rows.dataRowIdToModelLookup[id];
+  const row = useGridSelector(apiRef, rowSelector);
+  const classes = useUtilityClasses(rootProps);
+  let descendantCount = 0;
+  if (row) {
+    descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0);
+  }
+  let cellContent;
+  const colDef = apiRef.current.getColumn(rowNode.groupingField);
+  if (typeof colDef?.renderCell === 'function') {
+    cellContent = colDef.renderCell(props);
+  } else if (typeof formattedValue !== 'undefined') {
+    cellContent = /*#__PURE__*/_jsx("span", {
+      children: formattedValue
+    });
+  } else {
+    cellContent = /*#__PURE__*/_jsx("span", {
+      children: rowNode.groupingKey
+    });
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    sx: {
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.toggle,
+      children: /*#__PURE__*/_jsx(GridGroupingCriteriaCellIcon, {
+        id: id,
+        field: field,
+        rowNode: rowNode,
+        row: row,
+        descendantCount: descendantCount
+      })
+    }), cellContent, !hideDescendantCount && descendantCount > 0 ? /*#__PURE__*/_jsxs("span", {
+      style: {
+        whiteSpace: 'pre'
+      },
+      children: [" (", descendantCount, ")"]
+    }) : null]
+  });
+}

package/modern/hooks/features/rowGrouping/createGroupingColDef.js

@@ -7,18 +7,24 @@ import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
 import { isSingleSelectColDef } from '@mui/x-data-grid-pro/internals';
 import { GridGroupingColumnFooterCell } from "../../../components/GridGroupingColumnFooterCell.js";
 import { GridGroupingCriteriaCell } from "../../../components/GridGroupingCriteriaCell.js";
+import { GridDataSourceGroupingCriteriaCell } from "../../../components/GridDataSourceGroupingCriteriaCell.js";
 import { GridGroupingColumnLeafCell } from "../../../components/GridGroupingColumnLeafCell.js";
-import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "./gridRowGroupingUtils.js";
+import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, RowGroupingStrategy } from "./gridRowGroupingUtils.js";
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GROUPING_COL_DEF_DEFAULT_PROPERTIES = _extends({}, GRID_STRING_COL_DEF, {
   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 = _extends({}, 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.
@@ -84,7 +90,8 @@ export const createGroupingColDefForOneGroupingCriteria = ({
   columnsLookup,
   groupedByColDef,
   groupingCriteria,
-  colDefOverride
+  colDefOverride,
+  strategy = RowGroupingStrategy.Default
 }) => {
   const _ref = colDefOverride ?? {},
     {
@@ -94,6 +101,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
     } = _ref,
     colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref, _excluded);
   const leafColDef = leafField ? columnsLookup[leafField] : null;
+  const CriteriaCell = strategy === RowGroupingStrategy.Default ? GridGroupingCriteriaCell : GridDataSourceGroupingCriteriaCell;
 
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
@@ -121,7 +129,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
 
       // Render current grouping criteria groups
       if (params.rowNode.groupingField === groupingCriteria) {
-        return /*#__PURE__*/_jsx(GridGroupingCriteriaCell, _extends({}, params, {
+        return /*#__PURE__*/_jsx(CriteriaCell, _extends({}, params, {
           hideDescendantCount: hideDescendantCount
         }));
       }
@@ -166,7 +174,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
   // The properties that can't be overridden with `colDefOverride`
   const forcedProperties = _extends({
     field: getRowGroupingFieldFromGroupingCriteria(groupingCriteria)
-  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT);
   return _extends({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
 };
 /**
@@ -176,7 +184,8 @@ export const createGroupingColDefForAllGroupingCriteria = ({
   apiRef,
   columnsLookup,
   rowGroupingModel,
-  colDefOverride
+  colDefOverride,
+  strategy = RowGroupingStrategy.Default
 }) => {
   const _ref2 = colDefOverride ?? {},
     {
@@ -186,6 +195,7 @@ export const createGroupingColDefForAllGroupingCriteria = ({
     } = _ref2,
     colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const leafColDef = leafField ? columnsLookup[leafField] : null;
+  const CriteriaCell = strategy === RowGroupingStrategy.Default ? GridGroupingCriteriaCell : GridDataSourceGroupingCriteriaCell;
 
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
@@ -213,7 +223,7 @@ export const createGroupingColDefForAllGroupingCriteria = ({
       }
 
       // Render the groups
-      return /*#__PURE__*/_jsx(GridGroupingCriteriaCell, _extends({}, params, {
+      return /*#__PURE__*/_jsx(CriteriaCell, _extends({}, params, {
         hideDescendantCount: hideDescendantCount
       }));
     },
@@ -253,6 +263,6 @@ export const createGroupingColDefForAllGroupingCriteria = ({
   // The properties that can't be overridden with `colDefOverride`
   const forcedProperties = _extends({
     field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD
-  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, strategy === RowGroupingStrategy.Default ? GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT : GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE);
   return _extends({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
 };

package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,22 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { passFilterLogic } from '@mui/x-data-grid-pro/internals';
+import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
-export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-export const ROW_GROUPING_STRATEGY = 'grouping-columns';
+export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn };
+export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
+  RowGroupingStrategy["Default"] = "grouping-columns";
+  RowGroupingStrategy["DataSource"] = "grouping-columns-data-source";
+  return RowGroupingStrategy;
+}({});
 export const getRowGroupingFieldFromGroupingCriteria = groupingCriteria => {
   if (groupingCriteria === null) {
     return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;
   }
   return `__row_group_by_columns_group_${groupingCriteria}__`;
 };
-export const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
-  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
-  if (!match) {
-    return null;
-  }
-  return match[1];
-};
-export const isGroupingColumn = field => field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;
 /**
  * When filtering a group, we only want to filter according to the items related to this grouping column.
  */
@@ -103,10 +99,10 @@ export const filterRowTreeFromGroupingColumns = params => {
     filteredDescendantCountLookup
   };
 };
-export const getColDefOverrides = (groupingColDefProp, fields) => {
+export const getColDefOverrides = (groupingColDefProp, fields, strategy) => {
   if (typeof groupingColDefProp === 'function') {
     return groupingColDefProp({
-      groupingName: ROW_GROUPING_STRATEGY,
+      groupingName: strategy ?? RowGroupingStrategy.Default,
       fields
     });
   }
@@ -117,7 +113,7 @@ export const mergeStateWithRowGroupingModel = rowGroupingModel => state => _exte
     model: rowGroupingModel
   })
 });
-export const setStrategyAvailability = (privateApiRef, disableRowGrouping) => {
+export const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource) => {
   let isAvailable;
   if (disableRowGrouping) {
     isAvailable = () => false;
@@ -127,7 +123,8 @@ export 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);
 };
 export const getCellGroupingCriteria = ({
   row,

package/modern/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { gridRowTreeSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRegisterStrategyProcessor, createRowTree, updateRowTree, getVisibleRowsLookup, skipSorting, skipFiltering } from '@mui/x-data-grid-pro/internals';
+import { getGroupingRules, RowGroupingStrategy } from "./gridRowGroupingUtils.js";
+import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
+export 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 = gridRowGroupingSanitizedModelSelector(apiRef);
+    const columnsLookup = gridColumnLookupSelector(apiRef);
+    const groupingRules = 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 createRowTree({
+        previousTree: params.previousTree,
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: RowGroupingStrategy.DataSource
+      });
+    }
+    return 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: RowGroupingStrategy.DataSource
+    });
+  }, [apiRef, props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(() => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    return skipFiltering(rowTree);
+  }, [apiRef]);
+  const sortRows = React.useCallback(() => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    return skipSorting(rowTree);
+  }, [apiRef]);
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.DataSource, 'rowTreeCreation', createRowTreeForRowGrouping);
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.DataSource, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.DataSource, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(apiRef, RowGroupingStrategy.DataSource, 'visibleRowsLookupCreation', getVisibleRowsLookup);
+};

package/modern/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');
       }
     }
@@ -160,8 +170,9 @@ export const useGridRowGrouping = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', () => apiRef.current.unstable_dataSource.fetchRows());
 
-  /**
+  /*
    * EFFECTS
    */
   React.useEffect(() => {