@mui/x-data-grid-premium 5.15.2 → 5.17.0

package/legacy/DataGridPremium/DataGridPremium.js

@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -305,6 +306,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -517,7 +520,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -714,6 +717,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -978,6 +989,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

package/legacy/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridColumnGroupingPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from '../hooks/features/aggregation/useGridAggregation';
 import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/useGridAggregationPreProcessors';
@@ -13,6 +13,7 @@ export var useDataGridPremiumComponent = function useDataGridPremiumComponent(in
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
@@ -47,6 +48,7 @@ export var useDataGridPremiumComponent = function useDataGridPremiumComponent(in
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridTreeData(apiRef);
   useGridAggregation(apiRef, props);
@@ -59,6 +61,7 @@ export var useDataGridPremiumComponent = function useDataGridPremiumComponent(in
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/legacy/hooks/features/aggregation/createAggregationLookup.js

@@ -24,8 +24,23 @@ var getAggregationCellValue = function getAggregationCellValue(_ref) {
 
   var values = [];
   rowIds.forEach(function (rowId) {
+    var _rowNode$children;
+
     if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
       return;
+    } // If the row is a group, we want to aggregate based on its children
+    // For instance in the following tree, we want the aggregated values of A to be based on A.A, A.B.A and A.B.B but not A.B
+    // A
+    //   A.A
+    //   A.B
+    //     A.B.A
+    //     A.B.B
+
+
+    var rowNode = apiRef.current.getRowNode(rowId);
+
+    if ((_rowNode$children = rowNode.children) != null && _rowNode$children.length) {
+      return;
     }
 
     values.push(apiRef.current.getCellValue(rowId, field));

package/legacy/hooks/features/aggregation/gridAggregationUtils.js

@@ -161,27 +161,27 @@ export var addFooterRows = function addFooterRows(_ref6) {
  * Compares two sets of aggregation rules to determine if they are equal or not.
  */
 
-export var hasAggregationRulesChanged = function hasAggregationRulesChanged(previousValue, newValue) {
+export var areAggregationRulesEqual = function areAggregationRulesEqual(previousValue, newValue) {
   var previousFields = Object.keys(previousValue != null ? previousValue : {});
   var newFields = Object.keys(newValue);
 
   if (!isDeepEqual(previousFields, newFields)) {
-    return true;
+    return false;
   }
 
-  return newFields.some(function (field) {
+  return newFields.every(function (field) {
     var previousRule = previousValue == null ? void 0 : previousValue[field];
     var newRule = newValue[field];
 
     if ((previousRule == null ? void 0 : previousRule.aggregationFunction) !== (newRule == null ? void 0 : newRule.aggregationFunction)) {
-      return true;
+      return false;
     }
 
     if ((previousRule == null ? void 0 : previousRule.aggregationFunctionName) !== (newRule == null ? void 0 : newRule.aggregationFunctionName)) {
-      return true;
+      return false;
     }
 
-    return false;
+    return true;
   });
 };
 export var getAggregationFunctionLabel = function getAggregationFunctionLabel(_ref7) {

package/legacy/hooks/features/aggregation/useGridAggregation.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridColumnLookupSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid-pro';
 import { gridAggregationModelSelector } from './gridAggregationSelectors';
-import { getAggregationRules, mergeStateWithAggregationModel, hasAggregationRulesChanged } from './gridAggregationUtils';
+import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from './gridAggregationUtils';
 import { createAggregationLookup } from './createAggregationLookup';
 export var aggregationStateInitializer = function aggregationStateInitializer(state, props, apiRef) {
   var _ref, _props$aggregationMod, _props$initialState, _props$initialState$a;
@@ -70,13 +70,13 @@ export var useGridAggregation = function useGridAggregation(apiRef, props) {
       aggregationFunctions: props.aggregationFunctions
     }); // Re-apply the row hydration to add / remove the aggregation footers
 
-    if (hasAggregationRulesChanged(rulesOnLastRowHydration, aggregationRules)) {
+    if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
       applyAggregation();
     } // Re-apply the column hydration to wrap / unwrap the aggregated columns
 
 
-    if (hasAggregationRulesChanged(rulesOnLastColumnHydration, aggregationRules)) {
+    if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
     }
   }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);

package/legacy/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -163,11 +163,12 @@ export var wrapColumnWithAggregationValue = function wrapColumnWithAggregationVa
       aggregationRule = _ref6.aggregationRule;
 
   var getCellAggregationResult = function getCellAggregationResult(id, field) {
-    var _parent, _gridAggregationLooku;
+    var _rowNode$children, _rowNode$parent, _gridAggregationLooku;
 
     var cellAggregationPosition = null;
+    var rowNode = apiRef.current.getRowNode(id);
 
-    if (id.toString().startsWith('auto-generated-row-')) {
+    if ((_rowNode$children = rowNode.children) != null && _rowNode$children.length) {
       cellAggregationPosition = 'inline';
     } else if (id.toString().startsWith('auto-generated-group-footer-')) {
       cellAggregationPosition = 'footer';
@@ -178,7 +179,7 @@ export var wrapColumnWithAggregationValue = function wrapColumnWithAggregationVa
     } // TODO: Add custom root id
 
 
-    var groupId = cellAggregationPosition === 'inline' ? id : (_parent = apiRef.current.getRowNode(id).parent) != null ? _parent : '';
+    var groupId = cellAggregationPosition === 'inline' ? id : (_rowNode$parent = rowNode.parent) != null ? _rowNode$parent : '';
     var aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)[groupId]) == null ? void 0 : _gridAggregationLooku[field];
 
     if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {

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

@@ -88,7 +88,7 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
           return result.passingFilterItems;
         }), allResults.map(function (result) {
           return result.passingQuickFilterValues;
-        }), filterModel);
+        }), filterModel, params.apiRef);
       }
     }
 
@@ -162,4 +162,42 @@ export var setStrategyAvailability = function setStrategyAvailability(apiRef, di
   }
 
   apiRef.current.unstable_setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+};
+export var getGroupingRules = function getGroupingRules(_ref) {
+  var sanitizedRowGroupingModel = _ref.sanitizedRowGroupingModel,
+      columnsLookup = _ref.columnsLookup;
+  return sanitizedRowGroupingModel.map(function (field) {
+    var _columnsLookup$field;
+
+    return {
+      field: field,
+      groupingValueGetter: (_columnsLookup$field = columnsLookup[field]) == null ? void 0 : _columnsLookup$field.groupingValueGetter
+    };
+  });
+};
+/**
+ * Compares two sets of grouping rules to determine if they are equal or not.
+ */
+
+export var areGroupingRulesEqual = function areGroupingRulesEqual() {
+  var previousValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var newValue = arguments.length > 1 ? arguments[1] : undefined;
+
+  if (previousValue.length !== newValue.length) {
+    return false;
+  }
+
+  return newValue.every(function (newRule, newRuleIndex) {
+    var previousRule = previousValue[newRuleIndex];
+
+    if (previousRule.groupingValueGetter !== newRule.groupingValueGetter) {
+      return false;
+    }
+
+    if (previousRule.field !== newRule.field) {
+      return false;
+    }
+
+    return true;
+  });
 };

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

@@ -2,10 +2,10 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import MuiDivider from '@mui/material/Divider';
-import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
+import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
-import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
+import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from './gridRowGroupingUtils';
 import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
 import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +22,7 @@ export var rowGroupingStateInitializer = function rowGroupingStateInitializer(st
   var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
 
   apiRef.current.unstable_caches.rowGrouping = {
-    sanitizedModelOnLastRowTreeCreation: []
+    rulesOnLastRowTreeCreation: []
   };
   return _extends({}, state, {
     rowGrouping: {
@@ -187,11 +187,15 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
     }
   }, [apiRef, props.rowGroupingColumnMode]);
   var checkGroupingColumnsModelDiff = React.useCallback(function () {
-    var rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-    var lastGroupingColumnsModelApplied = apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation;
+    var sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    var rulesOnLastRowTreeCreation = apiRef.current.unstable_caches.rowGrouping.rulesOnLastRowTreeCreation;
+    var groupingRules = getGroupingRules({
+      sanitizedRowGroupingModel: sanitizedRowGroupingModel,
+      columnsLookup: gridColumnLookupSelector(apiRef)
+    });
 
-    if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
-      apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation = rowGroupingModel;
+    if (!areGroupingRulesEqual(rulesOnLastRowTreeCreation, groupingRules)) {
+      apiRef.current.unstable_caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
       setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event

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

@@ -5,7 +5,7 @@ import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useF
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, buildRowTree } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
-import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
+import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability, getGroupingRules } from './gridRowGroupingUtils';
 export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProcessors(apiRef, props) {
   var getGroupingColDefs = React.useCallback(function (columnsState) {
     if (props.disableRowGrouping) {
@@ -82,21 +82,26 @@ export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProce
     return columnsState;
   }, [getGroupingColDefs]);
   var createRowTree = React.useCallback(function (params) {
-    var rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    var sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
     var columnsLookup = gridColumnLookupSelector(apiRef);
-    apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation = rowGroupingModel;
+    var groupingRules = getGroupingRules({
+      sanitizedRowGroupingModel: sanitizedRowGroupingModel,
+      columnsLookup: columnsLookup
+    });
+    apiRef.current.unstable_caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
 
     var getCellGroupingCriteria = function getCellGroupingCriteria(_ref) {
       var row = _ref.row,
           id = _ref.id,
-          colDef = _ref.colDef;
+          colDef = _ref.colDef,
+          groupingRule = _ref.groupingRule;
       var key;
 
-      if (colDef.groupingValueGetter) {
+      if (groupingRule.groupingValueGetter) {
         var groupingValueGetterParams = {
           colDef: colDef,
-          field: colDef.field,
-          value: row[colDef.field],
+          field: groupingRule.field,
+          value: row[groupingRule.field],
           id: id,
           row: row,
           rowNode: {
@@ -104,9 +109,9 @@ export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProce
             id: id
           }
         };
-        key = colDef.groupingValueGetter(groupingValueGetterParams);
+        key = groupingRule.groupingValueGetter(groupingValueGetterParams);
       } else {
-        key = row[colDef.field];
+        key = row[groupingRule.field];
       }
 
       return {
@@ -117,11 +122,12 @@ export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProce
 
     var rows = params.ids.map(function (rowId) {
       var row = params.idRowsLookup[rowId];
-      var parentPath = rowGroupingModel.map(function (groupingField) {
+      var parentPath = groupingRules.map(function (groupingRule) {
         return getCellGroupingCriteria({
           row: row,
           id: rowId,
-          colDef: columnsLookup[groupingField]
+          groupingRule: groupingRule,
+          colDef: columnsLookup[groupingRule.field]
         });
       }).filter(function (cell) {
         return cell.key != null;
@@ -147,7 +153,8 @@ export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProce
     return filterRowTreeFromGroupingColumns({
       rowTree: rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
-      filterModel: params.filterModel
+      filterModel: params.filterModel,
+      apiRef: apiRef
     });
   }, [apiRef]);
   var sortRows = React.useCallback(function (params) {

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.2
+/** @license MUI v5.17.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/utils/releaseInfo.js

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

package/modern/DataGridPremium/DataGridPremium.js

@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -305,6 +306,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -517,7 +520,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -714,6 +717,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -978,6 +989,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridColumnGroupingPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from '../hooks/features/aggregation/useGridAggregation';
 import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/useGridAggregationPreProcessors';
@@ -11,6 +11,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
@@ -45,6 +46,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridTreeData(apiRef);
   useGridAggregation(apiRef, props);
@@ -57,6 +59,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/modern/hooks/features/aggregation/createAggregationLookup.js

@@ -25,6 +25,19 @@ const getAggregationCellValue = ({
   rowIds.forEach(rowId => {
     if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
       return;
+    } // If the row is a group, we want to aggregate based on its children
+    // For instance in the following tree, we want the aggregated values of A to be based on A.A, A.B.A and A.B.B but not A.B
+    // A
+    //   A.A
+    //   A.B
+    //     A.B.A
+    //     A.B.B
+
+
+    const rowNode = apiRef.current.getRowNode(rowId);
+
+    if (rowNode.children?.length) {
+      return;
     }
 
     values.push(apiRef.current.getCellValue(rowId, field));

package/modern/hooks/features/aggregation/gridAggregationUtils.js

@@ -147,27 +147,27 @@ export const addFooterRows = ({
  * Compares two sets of aggregation rules to determine if they are equal or not.
  */
 
-export const hasAggregationRulesChanged = (previousValue, newValue) => {
+export const areAggregationRulesEqual = (previousValue, newValue) => {
   const previousFields = Object.keys(previousValue ?? {});
   const newFields = Object.keys(newValue);
 
   if (!isDeepEqual(previousFields, newFields)) {
-    return true;
+    return false;
   }
 
-  return newFields.some(field => {
+  return newFields.every(field => {
     const previousRule = previousValue?.[field];
     const newRule = newValue[field];
 
     if (previousRule?.aggregationFunction !== newRule?.aggregationFunction) {
-      return true;
+      return false;
     }
 
     if (previousRule?.aggregationFunctionName !== newRule?.aggregationFunctionName) {
-      return true;
+      return false;
     }
 
-    return false;
+    return true;
   });
 };
 export const getAggregationFunctionLabel = ({

package/modern/hooks/features/aggregation/useGridAggregation.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridColumnLookupSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid-pro';
 import { gridAggregationModelSelector } from './gridAggregationSelectors';
-import { getAggregationRules, mergeStateWithAggregationModel, hasAggregationRulesChanged } from './gridAggregationUtils';
+import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from './gridAggregationUtils';
 import { createAggregationLookup } from './createAggregationLookup';
 export const aggregationStateInitializer = (state, props, apiRef) => {
   apiRef.current.unstable_caches.aggregation = {
@@ -67,13 +67,13 @@ export const useGridAggregation = (apiRef, props) => {
       aggregationFunctions: props.aggregationFunctions
     }); // Re-apply the row hydration to add / remove the aggregation footers
 
-    if (hasAggregationRulesChanged(rulesOnLastRowHydration, aggregationRules)) {
+    if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
       applyAggregation();
     } // Re-apply the column hydration to wrap / unwrap the aggregated columns
 
 
-    if (hasAggregationRulesChanged(rulesOnLastColumnHydration, aggregationRules)) {
+    if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
     }
   }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);

package/modern/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -158,8 +158,9 @@ export const wrapColumnWithAggregationValue = ({
 }) => {
   const getCellAggregationResult = (id, field) => {
     let cellAggregationPosition = null;
+    const rowNode = apiRef.current.getRowNode(id);
 
-    if (id.toString().startsWith('auto-generated-row-')) {
+    if (rowNode.children?.length) {
       cellAggregationPosition = 'inline';
     } else if (id.toString().startsWith('auto-generated-group-footer-')) {
       cellAggregationPosition = 'footer';
@@ -170,7 +171,7 @@ export const wrapColumnWithAggregationValue = ({
     } // TODO: Add custom root id
 
 
-    const groupId = cellAggregationPosition === 'inline' ? id : apiRef.current.getRowNode(id).parent ?? '';
+    const groupId = cellAggregationPosition === 'inline' ? id : rowNode.parent ?? '';
     const aggregationResult = gridAggregationLookupSelector(apiRef)[groupId]?.[field];
 
     if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {

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

@@ -77,7 +77,7 @@ export const filterRowTreeFromGroupingColumns = params => {
         isPassingFiltering = filteredDescendantCount > 0;
       } else {
         const allResults = [...ancestorsResults, filterResults];
-        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel);
+        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, params.apiRef);
       }
     }
 
@@ -145,4 +145,34 @@ export const setStrategyAvailability = (apiRef, disableRowGrouping) => {
   }
 
   apiRef.current.unstable_setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+};
+export const getGroupingRules = ({
+  sanitizedRowGroupingModel,
+  columnsLookup
+}) => sanitizedRowGroupingModel.map(field => ({
+  field,
+  groupingValueGetter: columnsLookup[field]?.groupingValueGetter
+}));
+/**
+ * Compares two sets of grouping rules to determine if they are equal or not.
+ */
+
+export const areGroupingRulesEqual = (previousValue = [], newValue) => {
+  if (previousValue.length !== newValue.length) {
+    return false;
+  }
+
+  return newValue.every((newRule, newRuleIndex) => {
+    const previousRule = previousValue[newRuleIndex];
+
+    if (previousRule.groupingValueGetter !== newRule.groupingValueGetter) {
+      return false;
+    }
+
+    if (previousRule.field !== newRule.field) {
+      return false;
+    }
+
+    return true;
+  });
 };