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

package/CHANGELOG.md

@@ -3,6 +3,86 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.22.0
+
+_Oct 25, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce [server-side support for Data Grid row grouping](https://mui.com/x/react-data-grid/server-side-data/row-grouping/)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Portuguese (pt-BR) locale on the Data Grid component
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@clins1994, @GITPHLAP, @k-rajat19, @kalyan90, @merotosc, @yash49.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.0`
+
+- [DataGrid] Fix `GridPanelAnchor` positioning (#15022) @k-rajat19
+- [DataGrid] Fix ugly prop-types for the `pageStyle` prop of the `GridPrintExportMenuItem` component (#15015) @flaviendelangle
+- [DataGrid] Fix value type in filter model for number and boolean column type (#14733) @k-rajat19
+- [DataGrid] Focus next row when the focused row is deleted (#15067) @cherniavskii
+- [DataGrid] Remove some usages of `<Box />` and `<Badge />` (#15013) @romgrk
+- [DataGrid] Fix number of rows to display for page size options with negative value (#14890) @kalyan90
+- [l10n] Improve Portuguese (pt-BR) locale (#15021) @k-rajat19
+
+#### `@mui/x-data-grid-pro@7.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.22.0`, plus:
+
+- [DataGridPro] Fix column pinning layout (#15073) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.22.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.22.0`, plus:
+
+- [DataGridPremium] Server-side data source with row grouping (#15109) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.0`
+
+- [pickers] Fix `DateCalendar` timezone management (#15119) @LukasTy
+- [pickers] Fix `DigitalClock` time options on a `DST` switch day (#15092) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.22.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.22.0`
+
+- [charts] Export data type in `onAxisClick(_, data)` callback (#15038) @clins1994
+
+#### `@mui/x-charts-pro@7.0.0-beta.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.22.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.0`
+
+- [TreeView] Make the cancellable event types public (#14992) @flaviendelangle
+
+### Docs
+
+- [docs] Fix typo in Tree View docs (#15047) @yash49
+
+### Core
+
+- [core] Adjust cherry-pick GH actions (#15101) @LukasTy
+- [core] Update prettier target branch (#15100) @MBilalShafi
+- [core] Update some `default-branch-switch` instances for `v7.x` (#15085) @MBilalShafi
+- [test] Revert to using `fireEvent` instead of `userEvent` (#14927) @LukasTy
+
 ## 7.21.0
 
 _Oct 17, 2024_

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -9,6 +9,7 @@ var _useGridAggregation = require("../hooks/features/aggregation/useGridAggregat
 var _useGridAggregationPreProcessors = require("../hooks/features/aggregation/useGridAggregationPreProcessors");
 var _useGridRowGrouping = require("../hooks/features/rowGrouping/useGridRowGrouping");
 var _useGridRowGroupingPreProcessors = require("../hooks/features/rowGrouping/useGridRowGroupingPreProcessors");
+var _useGridDataSourceRowGroupingPreProcessors = require("../hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors");
 var _useGridExcelExport = require("../hooks/features/export/useGridExcelExport");
 var _useGridCellSelection = require("../hooks/features/cellSelection/useGridCellSelection");
 var _useGridClipboardImport = require("../hooks/features/clipboard/useGridClipboardImport");
@@ -23,6 +24,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
   (0, _internals.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridRowGroupingPreProcessors.useGridRowGroupingPreProcessors)(apiRef, props);
+  (0, _useGridDataSourceRowGroupingPreProcessors.useGridDataSourceRowGroupingPreProcessors)(apiRef, props);
   (0, _internals.useGridTreeDataPreProcessors)(apiRef, props);
   (0, _internals.useGridDataSourceTreeDataPreProcessors)(apiRef, props);
   (0, _internals.useGridLazyLoaderPreProcessors)(apiRef, props);

package/components/GridDataSourceGroupingCriteriaCell.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
+interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
+    hideDescendantCount?: boolean;
+}
+export declare function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCellProps): React.JSX.Element;
+export {};

package/components/GridDataSourceGroupingCriteriaCell.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridDataSourceGroupingCriteriaCell = GridDataSourceGroupingCriteriaCell;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['groupingCriteriaCell'],
+    toggle: ['groupingCriteriaCellToggle'],
+    loadingContainer: ['groupingCriteriaCellLoadingContainer']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+function GridGroupingCriteriaCellIcon(props) {
+  const apiRef = (0, _internals.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.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 = (0, _xDataGridPro.useGridSelector)(apiRef, loadingSelector);
+  const error = (0, _xDataGridPro.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__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.loadingContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: "1rem",
+        color: "inherit"
+      })
+    });
+  }
+  return descendantCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    size: "small",
+    onClick: handleClick,
+    tabIndex: -1,
+    "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
+  }, rootProps?.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: error?.message ?? null,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+        variant: "dot",
+        color: "error",
+        invisible: !error,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    })
+  })) : null;
+}
+function GridDataSourceGroupingCriteriaCell(props) {
+  const {
+    id,
+    field,
+    rowNode,
+    hideDescendantCount,
+    formattedValue
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rowSelector = state => state.rows.dataRowIdToModelLookup[id];
+  const row = (0, _xDataGridPro.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__*/(0, _jsxRuntime.jsx)("span", {
+      children: formattedValue
+    });
+  } else {
+    cellContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: rowNode.groupingKey
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    className: classes.root,
+    sx: {
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.toggle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGroupingCriteriaCellIcon, {
+        id: id,
+        field: field,
+        rowNode: rowNode,
+        row: row,
+        descendantCount: descendantCount
+      })
+    }), cellContent, !hideDescendantCount && descendantCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      style: {
+        whiteSpace: 'pre'
+      },
+      children: [" (", descendantCount, ")"]
+    }) : null]
+  });
+}

package/esm/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/esm/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/esm/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/esm/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -2,7 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { passFilterLogic } 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 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;
@@ -103,10 +107,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 +121,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 +131,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/esm/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);
+};