@mui/x-data-grid-premium 8.7.0 → 8.9.0

package/esm/hooks/features/pivoting/utils.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { isLeaf, gridStringOrNumberComparator } from '@mui/x-data-grid-pro';
 import { getDefaultColTypeDef } from '@mui/x-data-grid-pro/internals';
 import { isGroupingColumn } from "../rowGrouping/index.js";
+import { defaultGetAggregationPosition } from "../aggregation/gridAggregationUtils.js";
 const columnGroupIdSeparator = '>->';
 export const isPivotingAvailable = props => {
   return !props.disablePivoting;
@@ -64,7 +65,8 @@ export const getPivotedData = ({
   columns,
   pivotModel,
   apiRef,
-  pivotingColDef
+  pivotingColDef,
+  groupingColDef
 }) => {
   const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
   const visibleRows = pivotModel.rows.filter(row => !row.hidden);
@@ -129,26 +131,31 @@ export const getPivotedData = ({
       const row = rows[i];
       const newRow = _extends({}, row);
       const columnGroupPath = [];
-      visibleColumns.forEach(({
-        field: colGroupField
-      }, depth) => {
+      for (let j = 0; j < visibleColumns.length; j += 1) {
+        const {
+          field: colGroupField
+        } = visibleColumns[j];
+        const depth = j;
         const column = initialColumns.get(colGroupField);
         if (!column) {
-          return;
+          continue;
         }
         let colValue = apiRef.current.getRowValue(row, column) ?? '(No value)';
+        if (column.type !== 'number') {
+          colValue = String(colValue);
+        }
         if (column.type === 'singleSelect') {
           const singleSelectColumn = column;
           if (singleSelectColumn.getOptionLabel) {
             colValue = singleSelectColumn.getOptionLabel(colValue);
           }
         }
-        columnGroupPath.push(String(colValue));
+        columnGroupPath.push(colValue);
         const groupId = columnGroupPath.join(columnGroupIdSeparator);
         if (!columnGroupingModelLookup.has(groupId)) {
           const columnGroup = {
             groupId,
-            headerName: String(colValue),
+            headerName: colValue,
             children: []
           };
           columnGroupingModelLookup.set(groupId, columnGroup);
@@ -174,7 +181,7 @@ export const getPivotedData = ({
             newRow[valueKey] = apiRef.current.getRowValue(row, originalColumn);
           });
         }
-      });
+      }
       newRows.push(newRow);
     }
     sortColumnGroups(columnGroupingModel, visibleColumns);
@@ -239,19 +246,20 @@ export const getPivotedData = ({
     }
   }
   createColumns(columnGroupingModel);
+  const groupingColDefOverrides = params => _extends({}, typeof groupingColDef === 'function' ? groupingColDef(params) : groupingColDef || {}, {
+    filterable: false,
+    aggregable: false,
+    hideable: false
+  });
   return {
     rows: visibleRows.length > 0 ? newRows : [],
     columns: pivotColumns,
     rowGroupingModel: visibleRows.map(row => row.field),
     aggregationModel,
-    getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline',
+    getAggregationPosition: defaultGetAggregationPosition,
     columnVisibilityModel,
     columnGroupingModel,
-    groupingColDef: {
-      filterable: false,
-      aggregable: false,
-      hideable: false
-    },
+    groupingColDef: groupingColDefOverrides,
     headerFilters: false,
     disableAggregation: false,
     disableRowGrouping: false

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

@@ -116,6 +116,11 @@ export const mergeStateWithRowGroupingModel = rowGroupingModel => state => _exte
   })
 });
 export const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource) => {
+  const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
+  if (privateApiRef.current.getActiveStrategy(GridStrategyGroup.RowTree) === strategy) {
+    // If the strategy is already active, we don't need to set it again
+    return;
+  }
   let isAvailable;
   if (disableRowGrouping) {
     isAvailable = () => false;
@@ -125,7 +130,6 @@ export const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataS
       return rowGroupingSanitizedModel.length > 0;
     };
   }
-  const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
   privateApiRef.current.setStrategyAvailability(GridStrategyGroup.RowTree, strategy, isAvailable);
 };
 export const getCellGroupingCriteria = ({

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

@@ -1,6 +1,6 @@
 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 { useGridRegisterStrategyProcessor, createRowTree, updateRowTree, getVisibleRowsLookup, skipSorting, skipFiltering, getParentPath } from '@mui/x-data-grid-pro/internals';
 import { getGroupingRules, RowGroupingStrategy } from "./gridRowGroupingUtils.js";
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
@@ -21,7 +21,7 @@ export const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
     });
     apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
     const getRowTreeBuilderNode = rowId => {
-      const parentPath = params.updates.groupKeys ?? [];
+      const parentPath = params.updates.groupKeys ?? getParentPath(rowId, params);
       const leafKey = getGroupKey(params.dataRowIdToModelLookup[rowId]);
       return {
         id: rowId,

package/esm/index.js

@@ -1,8 +1,8 @@
 /**
- * @mui/x-data-grid-premium v8.7.0
+ * @mui/x-data-grid-premium v8.9.0
  *
- * @license MUI X Commercial
- * This source code is licensed under the commercial license found in the
+ * @license SEE LICENSE IN LICENSE
+ * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import "./typeOverloads/index.js";

package/esm/typeOverloads/modules.d.ts

@@ -5,7 +5,7 @@ import type { GridRowGroupingModel, GridAggregationModel, GridAggregationCellMet
 import { GridRowGroupingInternalCache } from "../hooks/features/rowGrouping/gridRowGroupingInterfaces.js";
 import { GridAggregationInternalCache } from "../hooks/features/aggregation/gridAggregationInterfaces.js";
 import type { GridExcelExportOptions } from "../hooks/features/export/gridExcelExportInterface.js";
-import type { GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
+import type { GridPivotingInternalCache, GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
 export interface GridControlledStateEventLookupPremium {
   /**
    * Fired when the aggregation model changes.
@@ -105,6 +105,7 @@ export interface GridColumnHeaderParamsPremium<R extends GridValidRowModel = any
   aggregation?: GridAggregationHeaderMeta;
 }
 export interface GridApiCachesPremium extends GridApiCachesPro {
+  pivoting: GridPivotingInternalCache;
   rowGrouping: GridRowGroupingInternalCache;
   aggregation: GridAggregationInternalCache;
 }

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

@@ -1,17 +1,22 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-import { GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationLookup } from "./gridAggregationInterfaces.js";
+import { GridAggregationLookup, GridAggregationRules } from "./gridAggregationInterfaces.js";
+export declare const shouldApplySorting: (aggregationRules: GridAggregationRules, aggregatedFields: string[]) => boolean;
 export declare const createAggregationLookup: ({
   apiRef,
-  aggregationFunctions,
+  aggregationRules,
+  aggregatedFields,
   aggregationRowsScope,
   getAggregationPosition,
-  isDataSource
+  isDataSource,
+  applySorting
 }: {
   apiRef: RefObject<GridPrivateApiPremium>;
-  aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
+  aggregationRules: GridAggregationRules;
+  aggregatedFields: string[];
   aggregationRowsScope: DataGridPremiumProcessedProps["aggregationRowsScope"];
   getAggregationPosition: DataGridPremiumProcessedProps["getAggregationPosition"];
   isDataSource: boolean;
+  applySorting: boolean;
 }) => GridAggregationLookup;

package/hooks/features/aggregation/createAggregationLookup.js

@@ -3,55 +3,72 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAggregationLookup = void 0;
+exports.shouldApplySorting = exports.createAggregationLookup = void 0;
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _gridAggregationUtils = require("./gridAggregationUtils");
-var _gridAggregationSelectors = require("./gridAggregationSelectors");
-const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position) => {
+var _internals = require("@mui/x-data-grid/internals");
+const shouldApplySorting = (aggregationRules, aggregatedFields) => {
+  return aggregatedFields.some(field => aggregationRules[field].aggregationFunction.applySorting);
+};
+exports.shouldApplySorting = shouldApplySorting;
+const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, publicApi, groupAggregatedValuesLookup) => {
   const groupAggregationLookup = {};
   const aggregatedValues = [];
+  for (let i = 0; i < aggregatedFields.length; i += 1) {
+    aggregatedValues[i] = {
+      aggregatedField: aggregatedFields[i],
+      values: []
+    };
+  }
+  const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+  const rowLookup = (0, _xDataGridPro.gridRowsLookupSelector)(apiRef);
+  const isPivotActive = apiRef.current.state.pivoting.active;
   const rowIds = apiRef.current.getRowGroupChildren({
-    groupId
+    groupId,
+    applySorting,
+    directChildrenOnly: true,
+    skipAutoGeneratedRows: false,
+    applyFiltering: aggregationRowsScope === 'filtered'
   });
-  const filteredRowsLookup = (0, _xDataGridPro.gridFilteredRowsLookupSelector)(apiRef);
-  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 = (0, _xDataGridPro.gridRowNodeSelector)(apiRef, rowId);
+  for (let i = 0; i < rowIds.length; i += 1) {
+    const rowId = rowIds[i];
+    const rowNode = rowTree[rowId];
     if (rowNode.type === 'group') {
-      return;
+      // MERGE EXISTING VALUES FROM THE LOOKUP TABLE
+      const childGroupValues = groupAggregatedValuesLookup.get(rowId);
+      if (childGroupValues) {
+        for (let j = 0; j < aggregatedFields.length; j += 1) {
+          aggregatedValues[j].values = aggregatedValues[j].values.concat(childGroupValues[j].values);
+        }
+      }
+      continue;
     }
-    const row = apiRef.current.getRow(rowId);
+    const row = rowLookup[rowId];
     for (let j = 0; j < aggregatedFields.length; j += 1) {
       const aggregatedField = aggregatedFields[j];
       const columnAggregationRules = aggregationRules[aggregatedField];
       const aggregationFunction = columnAggregationRules.aggregationFunction;
       const field = aggregatedField;
-      if (aggregatedValues[j] === undefined) {
-        aggregatedValues[j] = {
-          aggregatedField,
-          values: []
-        };
-      }
+      let value;
       if (typeof aggregationFunction.getCellValue === 'function') {
-        aggregatedValues[j].values.push(aggregationFunction.getCellValue({
+        value = aggregationFunction.getCellValue({
+          field,
           row
-        }));
+        });
+      } else if (isPivotActive) {
+        // Since we know that pivoted fields are flat, we can use the row directly, and save lots of processing time
+        value = row[field];
       } else {
-        const colDef = apiRef.current.getColumn(field);
-        aggregatedValues[j].values.push(apiRef.current.getRowValue(row, colDef));
+        if (!row) {
+          continue;
+        }
+        const valueGetter = valueGetters[aggregatedField];
+        value = valueGetter(row);
+      }
+      if (value !== undefined) {
+        aggregatedValues[j].values.push(value);
       }
     }
-  });
+  }
   for (let i = 0; i < aggregatedValues.length; i += 1) {
     const {
       aggregatedField,
@@ -62,13 +79,16 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
       values,
       groupId,
       field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
-    });
+    }, publicApi);
     groupAggregationLookup[aggregatedField] = {
       position,
       value
     };
   }
-  return groupAggregationLookup;
+  return {
+    groupAggregationLookup,
+    aggregatedValues
+  };
 };
 const getGroupAggregatedValueDataSource = (groupId, apiRef, aggregatedFields, position) => {
   const groupAggregationLookup = {};
@@ -83,21 +103,37 @@ const getGroupAggregatedValueDataSource = (groupId, apiRef, aggregatedFields, po
 };
 const createAggregationLookup = ({
   apiRef,
-  aggregationFunctions,
+  aggregationRules,
+  aggregatedFields,
   aggregationRowsScope,
   getAggregationPosition,
-  isDataSource
+  isDataSource,
+  applySorting = false
 }) => {
-  const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), aggregationFunctions, isDataSource);
-  const aggregatedFields = Object.keys(aggregationRules);
   if (aggregatedFields.length === 0) {
     return {};
   }
+  const columnsLookup = (0, _xDataGridPro.gridColumnLookupSelector)(apiRef);
+  const valueGetters = {};
+  for (let i = 0; i < aggregatedFields.length; i += 1) {
+    const field = aggregatedFields[i];
+    const column = columnsLookup[field];
+    const valueGetter = row => apiRef.current.getRowValue(row, column);
+    valueGetters[field] = valueGetter;
+  }
   const aggregationLookup = {};
   const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+  const groupAggregatedValuesLookup = new Map();
+  const {
+    rowIdToIndexMap
+  } = (0, _internals.getVisibleRows)(apiRef);
   const createGroupAggregationLookup = groupNode => {
-    for (let i = 0; i < groupNode.children.length; i += 1) {
-      const childId = groupNode.children[i];
+    let children = groupNode.children;
+    if (applySorting) {
+      children = children.toSorted((a, b) => rowIdToIndexMap.get(a) - rowIdToIndexMap.get(b));
+    }
+    for (let i = 0; i < children.length; i += 1) {
+      const childId = children[i];
       const childNode = rowTree[childId];
       if (childNode.type === 'group') {
         createGroupAggregationLookup(childNode);
@@ -108,7 +144,9 @@ const createAggregationLookup = ({
       if (isDataSource) {
         aggregationLookup[groupNode.id] = getGroupAggregatedValueDataSource(groupNode.id, apiRef, aggregatedFields, position);
       } else if (groupNode.children.length) {
-        aggregationLookup[groupNode.id] = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position);
+        const result = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, apiRef.current, groupAggregatedValuesLookup);
+        aggregationLookup[groupNode.id] = result.groupAggregationLookup;
+        groupAggregatedValuesLookup.set(groupNode.id, result.aggregatedValues);
       }
     }
   };

package/hooks/features/aggregation/gridAggregationFunctions.js

@@ -12,7 +12,7 @@ const sumAgg = {
     let sum = 0;
     for (let i = 0; i < values.length; i += 1) {
       const value = values[i];
-      if ((0, _internals.isNumber)(value)) {
+      if (typeof value === 'number' && !Number.isNaN(value)) {
         sum += value;
       }
     }
@@ -31,7 +31,7 @@ const avgAgg = {
     let valuesCount = 0;
     for (let i = 0; i < values.length; i += 1) {
       const value = values[i];
-      if ((0, _internals.isNumber)(value)) {
+      if (typeof value === 'number' && !Number.isNaN(value)) {
         valuesCount += 1;
         sum += value;
       }

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

@@ -1,4 +1,5 @@
 import { GridRowId, GridRowModel, GridColDef, GridValueFormatter } from '@mui/x-data-grid-pro';
+import { GridApiPremium } from "../../../models/gridApiPremium.js";
 export interface GridAggregationState {
   model: GridAggregationModel;
   lookup: GridAggregationLookup;
@@ -28,6 +29,10 @@ export interface GridAggregationGetCellValueParams {
    * The row model of the row that the current cell belongs to.
    */
   row: GridRowModel;
+  /**
+   * The field of the cell that the aggregation function is applied to.
+   */
+  field: GridColDef['field'];
 }
 /**
  * Grid aggregation function definition interface.
@@ -39,9 +44,10 @@ export interface GridAggregationFunction<V = any, AV = V> {
    * Function that takes the current cell values and generates the aggregated value.
    * @template V, AV
    * @param {GridAggregationParams<V>} params The params of the current aggregated cell.
+   * @param {GridApiPremium} api The grid API.
    * @returns {AV} The aggregated value.
    */
-  apply: (params: GridAggregationParams<V>) => AV | null | undefined;
+  apply: (params: GridAggregationParams<V>, api: GridApiPremium) => AV | null | undefined;
   /**
    * Label of the aggregation function.
    * Used for adding a label to the footer of the grouping column when this aggregation function is the only one being used.
@@ -72,6 +78,12 @@ export interface GridAggregationFunction<V = any, AV = V> {
    * @returns {V} The value of the cell that will be passed to the aggregation `apply` function
    */
   getCellValue?: (params: GridAggregationGetCellValueParams) => V;
+  /**
+   * Indicates if the aggregation function depends on rows being in a sorted order.
+   * If `true`, the values provided to `apply` will be sorted.
+   * @default false
+   */
+  applySorting?: boolean;
 }
 /**
  * Grid aggregation function data source definition interface.

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

@@ -1,5 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridColDef, GridRowId } from '@mui/x-data-grid-pro';
+import { GridColDef, GridRowId, GridGroupNode } from '@mui/x-data-grid-pro';
 import { GridColumnRawLookup, GridHydrateRowsValue } from '@mui/x-data-grid-pro/internals';
 import { GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationModel, GridAggregationRule, GridAggregationRules } from "./gridAggregationInterfaces.js";
 import { GridStatePremium } from "../../../models/gridStatePremium.js";
@@ -59,4 +59,5 @@ export declare const getAggregationFunctionLabel: ({
   apiRef: RefObject<GridApiPremium>;
   aggregationRule: GridAggregationRule;
 }) => string;
+export declare const defaultGetAggregationPosition: (groupNode: GridGroupNode) => "inline" | "footer";
 export {};

package/hooks/features/aggregation/gridAggregationUtils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mergeStateWithAggregationModel = exports.getAvailableAggregationFunctions = exports.getAggregationRules = exports.getAggregationFunctionLabel = exports.getAggregationFooterRowIdFromGroupId = exports.canColumnHaveAggregationFunction = exports.areAggregationRulesEqual = exports.addFooterRows = exports.GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = void 0;
+exports.mergeStateWithAggregationModel = exports.getAvailableAggregationFunctions = exports.getAggregationRules = exports.getAggregationFunctionLabel = exports.getAggregationFooterRowIdFromGroupId = exports.defaultGetAggregationPosition = exports.canColumnHaveAggregationFunction = exports.areAggregationRulesEqual = exports.addFooterRows = exports.GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _internals = require("@mui/x-data-grid/internals");
@@ -192,4 +192,6 @@ const getAggregationFunctionLabel = ({
     return aggregationRule.aggregationFunctionName;
   }
 };
-exports.getAggregationFunctionLabel = getAggregationFunctionLabel;
+exports.getAggregationFunctionLabel = getAggregationFunctionLabel;
+const defaultGetAggregationPosition = groupNode => groupNode.depth === -1 ? 'footer' : 'inline';
+exports.defaultGetAggregationPosition = defaultGetAggregationPosition;

package/hooks/features/aggregation/useGridAggregation.js

@@ -44,20 +44,95 @@ const useGridAggregation = (apiRef, props) => {
       apiRef.current.setState((0, _gridAggregationUtils.mergeStateWithAggregationModel)(model));
     }
   }, [apiRef]);
-  const applyAggregation = React.useCallback(() => {
-    const aggregationLookup = (0, _createAggregationLookup.createAggregationLookup)({
-      apiRef,
-      getAggregationPosition: props.getAggregationPosition,
-      aggregationFunctions: props.aggregationFunctions,
-      aggregationRowsScope: props.aggregationRowsScope,
-      isDataSource: !!props.dataSource
-    });
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      aggregation: (0, _extends2.default)({}, state.aggregation, {
-        lookup: aggregationLookup
-      })
-    }));
+  const abortControllerRef = React.useRef(null);
+  const applyAggregation = React.useCallback(reason => {
+    // Abort previous if any
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+    const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.dataSource);
+    const aggregatedFields = Object.keys(aggregationRules);
+    const needsSorting = (0, _createAggregationLookup.shouldApplySorting)(aggregationRules, aggregatedFields);
+    if (reason === 'sort' && !needsSorting) {
+      // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
+      return;
+    }
+    const renderContext = (0, _xDataGridPro.gridRenderContextSelector)(apiRef);
+    const visibleColumns = (0, _xDataGridPro.gridVisibleColumnFieldsSelector)(apiRef);
+    const chunks = [];
+    const visibleAggregatedFields = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1).filter(field => aggregatedFields.includes(field));
+    if (visibleAggregatedFields.length > 0) {
+      chunks.push(visibleAggregatedFields);
+    }
+    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFields.includes(field));
+    const chunkSize = 20; // columns per chunk
+    for (let i = 0; i < otherAggregatedFields.length; i += chunkSize) {
+      chunks.push(otherAggregatedFields.slice(i, i + chunkSize));
+    }
+    let chunkIndex = 0;
+    const aggregationLookup = {};
+    let chunkStartTime = performance.now();
+    const timeLimit = 1000 / 120;
+    const processChunk = () => {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      const currentChunk = chunks[chunkIndex];
+      if (!currentChunk) {
+        const sortModel = (0, _xDataGridPro.gridSortModelSelector)(apiRef).map(s => s.field);
+        const hasAggregatedSorting = sortModel.some(field => aggregationRules[field]);
+        if (hasAggregatedSorting) {
+          apiRef.current.applySorting();
+        }
+        abortControllerRef.current = null;
+        return;
+      }
+      const applySorting = (0, _createAggregationLookup.shouldApplySorting)(aggregationRules, currentChunk);
+
+      // createAggregationLookup now RETURNS new partial lookup
+      const partialLookup = (0, _createAggregationLookup.createAggregationLookup)({
+        apiRef,
+        getAggregationPosition: props.getAggregationPosition,
+        aggregatedFields: currentChunk,
+        aggregationRules,
+        aggregationRowsScope: props.aggregationRowsScope,
+        isDataSource: !!props.dataSource,
+        applySorting
+      });
+      for (const key of Object.keys(partialLookup)) {
+        for (const field of Object.keys(partialLookup[key])) {
+          aggregationLookup[key] ?? (aggregationLookup[key] = {});
+          aggregationLookup[key][field] = partialLookup[key][field];
+        }
+      }
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        aggregation: (0, _extends2.default)({}, state.aggregation, {
+          lookup: (0, _extends2.default)({}, aggregationLookup)
+        })
+      }));
+      chunkIndex += 1;
+      if (performance.now() - chunkStartTime < timeLimit) {
+        processChunk();
+        return;
+      }
+      setTimeout(() => {
+        chunkStartTime = performance.now();
+        processChunk();
+      }, 0);
+    };
+    processChunk();
   }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.dataSource]);
+  React.useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+    };
+  }, []);
+  const deferredApplyAggregation = (0, _xDataGridPro.useRunOncePerLoop)(applyAggregation);
   const aggregationApi = {
     setAggregationModel
   };
@@ -86,17 +161,18 @@ const useGridAggregation = (apiRef, props) => {
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!props.dataSource && !(0, _gridAggregationUtils.areAggregationRulesEqual)(rulesOnLastRowHydration, aggregationRules)) {
       apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-      applyAggregation();
+      deferredApplyAggregation();
     }
 
     // Re-apply the column hydration to wrap / unwrap the aggregated columns
     if (!(0, _gridAggregationUtils.areAggregationRulesEqual)(rulesOnLastColumnHydration, aggregationRules)) {
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
-  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
+  }, [apiRef, deferredApplyAggregation, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'columnsChange', checkAggregationRulesDiff);
-  (0, _xDataGridPro.useGridEvent)(apiRef, 'filteredRowsSet', applyAggregation);
+  (0, _xDataGridPro.useGridEvent)(apiRef, 'filteredRowsSet', deferredApplyAggregation);
+  (0, _xDataGridPro.useGridEvent)(apiRef, 'sortedRowsSet', () => deferredApplyAggregation('sort'));
 
   /**
    * EFFECTS

package/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -1,6 +1,8 @@
-import type { GridColDef } from '@mui/x-data-grid-pro';
+import type { GridColDef, GridRowModel } from '@mui/x-data-grid-pro';
 import type { GridPivotingPrivateApiCommunity, GridPivotingStatePartial } from '@mui/x-data-grid/internals';
+import type { RefObject } from '@mui/x-internals/types';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+import type { GridInitialStatePremium } from "../../../models/gridStatePremium.js";
 export type GridPivotingPropsOverrides = {
   rows: DataGridPremiumProcessedProps['rows'];
   columns: DataGridPremiumProcessedProps['columns'];
@@ -66,4 +68,12 @@ export interface GridPivotingPrivateApi extends GridPivotingPrivateApiCommunity
     targetFieldPosition?: DropPosition;
   }) => void;
 }
-export type GridPivotingColDefOverrides = Pick<GridColDef, 'width' | 'flex' | 'headerName' | 'description' | 'align' | 'headerAlign' | 'cellClassName' | 'headerClassName' | 'display' | 'maxWidth' | 'minWidth' | 'resizable' | 'sortingOrder'>;
+export type GridPivotingColDefOverrides = Pick<GridColDef, 'width' | 'flex' | 'headerName' | 'description' | 'align' | 'headerAlign' | 'cellClassName' | 'headerClassName' | 'display' | 'maxWidth' | 'minWidth' | 'resizable' | 'sortingOrder'>;
+export interface GridPivotingInternalCache {
+  nonPivotDataRef: RefObject<{
+    rows: GridRowModel[];
+    columns: Map<string, GridColDef>;
+    originalRowsProp: readonly GridRowModel[];
+  } | undefined>;
+  exportedStateRef: RefObject<GridInitialStatePremium | null>;
+}

package/hooks/features/pivoting/useGridPivoting.d.ts

@@ -4,4 +4,5 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 export declare const pivotingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'pivotActive' | 'pivotModel' | 'pivotPanelOpen' | 'initialState' | 'disablePivoting' | 'getPivotDerivedColumns' | 'columns'>>;
-export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "aggregationFunctions">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
+export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "groupingColDef" | "aggregationFunctions">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
+export declare const useGridPivotingExportState: (apiRef: RefObject<GridPrivateApiPremium>) => void;