@mui/x-data-grid-premium 5.13.0 → 5.15.0

package/hooks/features/aggregation/useGridAggregation.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+export declare const aggregationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'aggregationModel' | 'initialState'>, GridApiPremium>;
+export declare const useGridAggregation: (apiRef: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'onAggregationModelChange' | 'initialState' | 'aggregationModel' | 'getAggregationPosition' | 'aggregationFunctions' | 'aggregationRowsScope' | 'disableAggregation' | 'rowGroupingColumnMode'>) => void;

package/hooks/features/aggregation/useGridAggregation.js

@@ -0,0 +1,94 @@
+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 { createAggregationLookup } from './createAggregationLookup';
+export const aggregationStateInitializer = (state, props, apiRef) => {
+  var _ref, _props$aggregationMod, _props$initialState, _props$initialState$a;
+
+  apiRef.current.unstable_caches.aggregation = {
+    rulesOnLastColumnHydration: {},
+    rulesOnLastRowHydration: {}
+  };
+  return _extends({}, state, {
+    aggregation: {
+      model: (_ref = (_props$aggregationMod = props.aggregationModel) != null ? _props$aggregationMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$a = _props$initialState.aggregation) == null ? void 0 : _props$initialState$a.model) != null ? _ref : {}
+    }
+  });
+};
+export const useGridAggregation = (apiRef, props) => {
+  apiRef.current.unstable_registerControlState({
+    stateId: 'aggregation',
+    propModel: props.aggregationModel,
+    propOnChange: props.onAggregationModelChange,
+    stateSelector: gridAggregationModelSelector,
+    changeEvent: 'aggregationModelChange'
+  });
+  /**
+   * API METHODS
+   */
+
+  const setAggregationModel = React.useCallback(model => {
+    const currentModel = gridAggregationModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      apiRef.current.setState(mergeStateWithAggregationModel(model));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef]);
+  const applyAggregation = React.useCallback(() => {
+    const aggregationLookup = createAggregationLookup({
+      apiRef,
+      getAggregationPosition: props.getAggregationPosition,
+      aggregationFunctions: props.aggregationFunctions,
+      aggregationRowsScope: props.aggregationRowsScope
+    });
+    apiRef.current.setState(state => _extends({}, state, {
+      aggregation: _extends({}, state.aggregation, {
+        lookup: aggregationLookup
+      })
+    }));
+  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope]);
+  const aggregationApi = {
+    setAggregationModel
+  };
+  useGridApiMethod(apiRef, aggregationApi, 'GridAggregationApi');
+  /**
+   * EVENTS
+   */
+
+  const checkAggregationRulesDiff = React.useCallback(() => {
+    const {
+      rulesOnLastRowHydration,
+      rulesOnLastColumnHydration
+    } = apiRef.current.unstable_caches.aggregation;
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
+      columnsLookup: gridColumnLookupSelector(apiRef),
+      aggregationModel: gridAggregationModelSelector(apiRef),
+      aggregationFunctions: props.aggregationFunctions
+    }); // Re-apply the row hydration to add / remove the aggregation footers
+
+    if (hasAggregationRulesChanged(rulesOnLastRowHydration, aggregationRules)) {
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+      applyAggregation();
+    } // Re-apply the column hydration to wrap / unwrap the aggregated columns
+
+
+    if (hasAggregationRulesChanged(rulesOnLastColumnHydration, aggregationRules)) {
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
+    }
+  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);
+  useGridApiEventHandler(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
+  useGridApiEventHandler(apiRef, 'columnsChange', checkAggregationRulesDiff);
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', applyAggregation);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (props.aggregationModel !== undefined) {
+      apiRef.current.setAggregationModel(props.aggregationModel);
+    }
+  }, [apiRef, props.aggregationModel]);
+};

package/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition'>) => void;

package/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -0,0 +1,138 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import MuiDivider from '@mui/material/Divider';
+import { gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { getAvailableAggregationFunctions, addFooterRows, getAggregationRules, mergeStateWithAggregationModel } from './gridAggregationUtils';
+import { wrapColumnWithAggregationValue, unwrapColumnFromAggregation } from './wrapColumnWithAggregation';
+import { GridAggregationColumnMenuItem } from '../../../components/GridAggregationColumnMenuItem';
+import { gridAggregationModelSelector } from './gridAggregationSelectors';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
+  onClick: event => event.stopPropagation()
+});
+
+export const useGridAggregationPreProcessors = (apiRef, props) => {
+  const updateAggregatedColumns = React.useCallback(columnsState => {
+    const {
+      rulesOnLastColumnHydration
+    } = apiRef.current.unstable_caches.aggregation;
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
+      columnsLookup: columnsState.lookup,
+      aggregationModel: gridAggregationModelSelector(apiRef),
+      aggregationFunctions: props.aggregationFunctions
+    });
+    columnsState.all.forEach(field => {
+      const shouldHaveAggregationValue = !!aggregationRules[field];
+      const haveAggregationColumnValue = !!rulesOnLastColumnHydration[field];
+      let column = columnsState.lookup[field];
+
+      if (haveAggregationColumnValue) {
+        column = unwrapColumnFromAggregation({
+          column
+        });
+      }
+
+      if (shouldHaveAggregationValue) {
+        column = wrapColumnWithAggregationValue({
+          column,
+          aggregationRule: aggregationRules[field],
+          apiRef
+        });
+      }
+
+      columnsState.lookup[field] = column;
+    });
+    apiRef.current.unstable_caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
+    return columnsState;
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
+  const addGroupFooterRows = React.useCallback(groupingParams => {
+    let newGroupingParams;
+    let rulesOnLastRowHydration;
+
+    if (props.disableAggregation) {
+      newGroupingParams = groupingParams;
+      rulesOnLastRowHydration = {};
+    } else {
+      const aggregationRules = getAggregationRules({
+        columnsLookup: gridColumnLookupSelector(apiRef),
+        aggregationModel: gridAggregationModelSelector(apiRef),
+        aggregationFunctions: props.aggregationFunctions
+      });
+      rulesOnLastRowHydration = aggregationRules; // If no column have an aggregation rule
+      // Then don't create the footer rows
+
+      if (Object.values(aggregationRules).length === 0) {
+        newGroupingParams = groupingParams;
+      } else {
+        newGroupingParams = addFooterRows({
+          groupingParams,
+          aggregationRules,
+          getAggregationPosition: props.getAggregationPosition,
+          apiRef
+        });
+      }
+    }
+
+    apiRef.current.unstable_caches.aggregation.rulesOnLastRowHydration = rulesOnLastRowHydration;
+    return newGroupingParams;
+  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions]);
+  const addColumnMenuButtons = React.useCallback((initialValue, column) => {
+    if (props.disableAggregation) {
+      return initialValue;
+    }
+
+    const availableAggregationFunctions = getAvailableAggregationFunctions({
+      aggregationFunctions: props.aggregationFunctions,
+      column
+    });
+
+    if (availableAggregationFunctions.length === 0) {
+      return initialValue;
+    }
+
+    return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(GridAggregationColumnMenuItem, {
+      column: column,
+      label: apiRef.current.getLocaleText('aggregationMenuItemHeader'),
+      availableAggregationFunctions: availableAggregationFunctions
+    })];
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    if (props.disableAggregation) {
+      return prevState;
+    }
+
+    const aggregationModelToExport = gridAggregationModelSelector(apiRef);
+
+    if (Object.values(aggregationModelToExport).length === 0) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      aggregation: {
+        model: aggregationModelToExport
+      }
+    });
+  }, [apiRef, props.disableAggregation]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    var _context$stateToResto;
+
+    if (props.disableAggregation) {
+      return params;
+    }
+
+    const aggregationModel = (_context$stateToResto = context.stateToRestore.aggregation) == null ? void 0 : _context$stateToResto.model;
+
+    if (aggregationModel != null) {
+      apiRef.current.setState(mergeStateWithAggregationModel(aggregationModel));
+    }
+
+    return params;
+  }, [apiRef, props.disableAggregation]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateAggregatedColumns);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addGroupFooterRows);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+};

package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+import { GridAggregationRule } from './gridAggregationInterfaces';
+declare const AGGREGATION_WRAPPABLE_PROPERTIES: readonly ["valueGetter", "valueFormatter", "renderCell", "renderHeader", "filterOperators"];
+declare type WrappableColumnProperty = typeof AGGREGATION_WRAPPABLE_PROPERTIES[number];
+interface GridColDefWithAggregationWrappers extends GridColDef {
+    aggregationWrappedProperties?: {
+        [P in WrappableColumnProperty]?: {
+            original: GridColDef[P];
+            wrapped: GridColDef[P];
+        };
+    };
+}
+/**
+ * Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
+ */
+export declare const wrapColumnWithAggregationValue: ({ column, apiRef, aggregationRule, }: {
+    column: GridColDef;
+    apiRef: React.MutableRefObject<GridApiPremium>;
+    aggregationRule: GridAggregationRule;
+}) => GridColDef;
+/**
+ * Remove the aggregation wrappers around the wrappable properties of the column.
+ */
+export declare const unwrapColumnFromAggregation: ({ column, }: {
+    column: GridColDefWithAggregationWrappers;
+}) => GridColDef<any, any, any>;
+export {};

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -0,0 +1,257 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridAggregationLookupSelector } from './gridAggregationSelectors';
+import { GridFooterCell } from '../../../components/GridFooterCell';
+import { GridAggregationHeader } from '../../../components/GridAggregationHeader';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AGGREGATION_WRAPPABLE_PROPERTIES = ['valueGetter', 'valueFormatter', 'renderCell', 'renderHeader', 'filterOperators'];
+
+const getAggregationValueWrappedValueGetter = ({
+  value: valueGetter,
+  getCellAggregationResult
+}) => {
+  const wrappedValueGetter = params => {
+    const cellAggregationResult = getCellAggregationResult(params.id, params.field);
+
+    if (cellAggregationResult != null) {
+      var _cellAggregationResul;
+
+      return (_cellAggregationResul = cellAggregationResult == null ? void 0 : cellAggregationResult.value) != null ? _cellAggregationResul : null;
+    }
+
+    if (valueGetter) {
+      return valueGetter(params);
+    }
+
+    return params.row[params.field];
+  };
+
+  return wrappedValueGetter;
+};
+
+const getAggregationValueWrappedValueFormatter = ({
+  value: valueFormatter,
+  aggregationRule,
+  getCellAggregationResult
+}) => {
+  // If neither the inline aggregation function nor the footer aggregation function have a custom value formatter,
+  // Then we don't wrap the column value formatter
+  if (!aggregationRule.aggregationFunction.valueFormatter) {
+    return valueFormatter;
+  }
+
+  const wrappedValueFormatter = params => {
+    if (params.id != null) {
+      const cellAggregationResult = getCellAggregationResult(params.id, params.field);
+
+      if (cellAggregationResult != null) {
+        return aggregationRule.aggregationFunction.valueFormatter(params);
+      }
+    }
+
+    if (valueFormatter) {
+      return valueFormatter(params);
+    }
+
+    return params.value;
+  };
+
+  return wrappedValueFormatter;
+};
+
+const getAggregationValueWrappedRenderCell = ({
+  value: renderCell,
+  aggregationRule,
+  getCellAggregationResult
+}) => {
+  const wrappedRenderCell = params => {
+    const cellAggregationResult = getCellAggregationResult(params.id, params.field);
+
+    if (cellAggregationResult != null) {
+      var _aggregationFunction$;
+
+      if (!renderCell) {
+        if (cellAggregationResult.position === 'footer') {
+          return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
+        }
+
+        return params.formattedValue;
+      }
+
+      const aggregationMeta = {
+        hasCellUnit: (_aggregationFunction$ = aggregationRule.aggregationFunction.hasCellUnit) != null ? _aggregationFunction$ : true,
+        aggregationFunctionName: aggregationRule.aggregationFunctionName
+      };
+      return renderCell(_extends({}, params, {
+        aggregation: aggregationMeta
+      }));
+    }
+
+    if (!renderCell) {
+      return params.formattedValue;
+    }
+
+    return renderCell(params);
+  };
+
+  return wrappedRenderCell;
+};
+/**
+ * Skips the filtering for aggregated rows
+ */
+
+
+const getWrappedFilterOperators = ({
+  value: filterOperators,
+  getCellAggregationResult
+}) => filterOperators.map(operator => {
+  return _extends({}, operator, {
+    getApplyFilterFn: (filterItem, column) => {
+      const originalFn = operator.getApplyFilterFn(filterItem, column);
+
+      if (!originalFn) {
+        return null;
+      }
+
+      return params => {
+        if (getCellAggregationResult(params.id, params.field) != null) {
+          return true;
+        }
+
+        return originalFn(params);
+      };
+    }
+  });
+});
+/**
+ * Add the aggregation method around the header name
+ */
+
+
+const getWrappedRenderHeader = ({
+  value: renderHeader,
+  aggregationRule
+}) => {
+  const wrappedRenderCell = params => {
+    const aggregationMeta = {
+      aggregationRule
+    };
+
+    if (!renderHeader) {
+      return /*#__PURE__*/_jsx(GridAggregationHeader, _extends({}, params, {
+        aggregation: aggregationMeta
+      }));
+    }
+
+    return renderHeader(_extends({}, params, {
+      aggregation: aggregationMeta
+    }));
+  };
+
+  return wrappedRenderCell;
+};
+/**
+ * Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
+ */
+
+
+export const wrapColumnWithAggregationValue = ({
+  column,
+  apiRef,
+  aggregationRule
+}) => {
+  const getCellAggregationResult = (id, field) => {
+    var _parent, _gridAggregationLooku;
+
+    let cellAggregationPosition = null;
+
+    if (id.toString().startsWith('auto-generated-row-')) {
+      cellAggregationPosition = 'inline';
+    } else if (id.toString().startsWith('auto-generated-group-footer-')) {
+      cellAggregationPosition = 'footer';
+    }
+
+    if (cellAggregationPosition == null) {
+      return null;
+    } // TODO: Add custom root id
+
+
+    const groupId = cellAggregationPosition === 'inline' ? id : (_parent = apiRef.current.getRowNode(id).parent) != null ? _parent : '';
+    const aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)[groupId]) == null ? void 0 : _gridAggregationLooku[field];
+
+    if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {
+      return null;
+    }
+
+    return aggregationResult;
+  };
+
+  const aggregationWrappedProperties = {};
+
+  const wrappedColumn = _extends({}, column, {
+    aggregationWrappedProperties
+  });
+
+  const wrapColumnProperty = (property, wrapper) => {
+    const originalValue = column[property];
+    const wrappedProperty = wrapper({
+      apiRef,
+      value: originalValue,
+      colDef: column,
+      aggregationRule,
+      getCellAggregationResult
+    });
+
+    if (wrappedProperty !== originalValue) {
+      aggregationWrappedProperties[property] = {
+        original: originalValue,
+        wrapped: wrappedProperty
+      };
+      wrappedColumn[property] = wrappedProperty;
+    }
+  };
+
+  wrapColumnProperty('valueGetter', getAggregationValueWrappedValueGetter);
+  wrapColumnProperty('valueFormatter', getAggregationValueWrappedValueFormatter);
+  wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
+  wrapColumnProperty('renderHeader', getWrappedRenderHeader);
+  wrapColumnProperty('filterOperators', getWrappedFilterOperators);
+
+  if (Object.keys(aggregationWrappedProperties).length === 0) {
+    return column;
+  }
+
+  return wrappedColumn;
+};
+/**
+ * Remove the aggregation wrappers around the wrappable properties of the column.
+ */
+
+export const unwrapColumnFromAggregation = ({
+  column
+}) => {
+  if (!column.aggregationWrappedProperties) {
+    return column;
+  }
+
+  const originalProperties = Object.entries(column.aggregationWrappedProperties);
+
+  if (originalProperties.length === 0) {
+    return column;
+  }
+
+  const unwrappedColumn = _extends({}, column);
+
+  originalProperties.forEach(([propertyName, {
+    original,
+    wrapped
+  }]) => {
+    // The value changed since we wrapped it
+    if (wrapped !== column[propertyName]) {
+      return;
+    }
+
+    unwrappedColumn[propertyName] = original;
+  });
+  return unwrappedColumn;
+};

package/hooks/features/export/serializer/excelSerializer.js

@@ -46,7 +46,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   api.unstable_calculateColSpan({
     rowId: id,
     minFirstColumn: 0,
-    maxLastColumn: columns.length - 1
+    maxLastColumn: columns.length,
+    columns
   });
   columns.forEach((column, colIndex) => {
     const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);

package/hooks/features/index.d.ts

@@ -1,2 +1,3 @@
+export * from './aggregation';
 export * from './rowGrouping';
 export * from './export';

package/hooks/features/index.js

@@ -1,3 +1,4 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-premium`
+export * from './aggregation';
 export * from './rowGrouping';
 export * from './export';

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -4,6 +4,7 @@ const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
       _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
 import * as React from 'react';
 import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
+import { GridGroupingColumnFooterCell } from '../../../components/GridGroupingColumnFooterCell';
 import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
 import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
 import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from './gridRowGroupingUtils';
@@ -152,7 +153,12 @@ export const createGroupingColDefForOneGroupingCriteria = ({
   const commonProperties = {
     width: Math.max(((_groupedByColDef$widt = groupedByColDef.width) != null ? _groupedByColDef$widt : GRID_STRING_COL_DEF.width) + 40, (_leafColDef$width = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width : 0),
     renderCell: params => {
-      // Render leaves
+      // Render footer
+      if (params.rowNode.position === 'footer') {
+        return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
+      } // Render leaves
+
+
       if (params.rowNode.groupingField == null) {
         if (leafColDef) {
           const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
@@ -253,7 +259,12 @@ export const createGroupingColDefForAllGroupingCriteria = ({
       return ((_columnsLookup$field$ = columnsLookup[field].width) != null ? _columnsLookup$field$ : GRID_STRING_COL_DEF.width) + 40;
     }), (_leafColDef$width2 = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width2 : 0),
     renderCell: params => {
-      // Render the leaves
+      // Render footer
+      if (params.rowNode.position === 'footer') {
+        return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
+      } // Render the leaves
+
+
       if (params.rowNode.groupingField == null) {
         if (leafColDef) {
           const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -79,13 +79,17 @@ export const filterRowTreeFromGroupingColumns = params => {
     visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
 
+    if (node.footerId != null) {
+      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+
     if (!shouldPassFilters) {
       return 0;
     }
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
-    if (!node.children) {
+    if (!node.children && !node.isAutoGenerated) {
       return filteredDescendantCount + 1;
     }
 

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

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