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

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

@@ -1,51 +1,67 @@
-import { gridColumnLookupSelector, gridFilteredRowsLookupSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID, gridRowNodeSelector } from '@mui/x-data-grid-pro';
-import { getAggregationRules } from "./gridAggregationUtils.js";
-import { gridAggregationModelSelector } from "./gridAggregationSelectors.js";
-const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position) => {
+import { gridColumnLookupSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID, gridRowsLookupSelector } from '@mui/x-data-grid-pro';
+import { getVisibleRows } from '@mui/x-data-grid/internals';
+export const shouldApplySorting = (aggregationRules, aggregatedFields) => {
+  return aggregatedFields.some(field => aggregationRules[field].aggregationFunction.applySorting);
+};
+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 = gridRowTreeSelector(apiRef);
+  const rowLookup = 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 = 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 = 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,
@@ -56,13 +72,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 = {};
@@ -77,21 +96,37 @@ const getGroupAggregatedValueDataSource = (groupId, apiRef, aggregatedFields, po
 };
 export const createAggregationLookup = ({
   apiRef,
-  aggregationFunctions,
+  aggregationRules,
+  aggregatedFields,
   aggregationRowsScope,
   getAggregationPosition,
-  isDataSource
+  isDataSource,
+  applySorting = false
 }) => {
-  const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), aggregationFunctions, isDataSource);
-  const aggregatedFields = Object.keys(aggregationRules);
   if (aggregatedFields.length === 0) {
     return {};
   }
+  const columnsLookup = 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 = gridRowTreeSelector(apiRef);
+  const groupAggregatedValuesLookup = new Map();
+  const {
+    rowIdToIndexMap
+  } = 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);
@@ -102,7 +137,9 @@ export 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/esm/hooks/features/aggregation/gridAggregationFunctions.js

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

package/esm/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/esm/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/esm/hooks/features/aggregation/gridAggregationUtils.js

@@ -177,4 +177,5 @@ export const getAggregationFunctionLabel = ({
   } catch {
     return aggregationRule.aggregationFunctionName;
   }
-};
+};
+export const defaultGetAggregationPosition = groupNode => groupNode.depth === -1 ? 'footer' : 'inline';

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

@@ -2,11 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { gridColumnLookupSelector, useGridEvent, useGridApiMethod } from '@mui/x-data-grid-pro';
+import { gridColumnLookupSelector, useGridEvent, useGridApiMethod, useRunOncePerLoop, gridRenderContextSelector, gridVisibleColumnFieldsSelector, gridSortModelSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationModelSelector } from "./gridAggregationSelectors.js";
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from "./gridAggregationUtils.js";
-import { createAggregationLookup } from "./createAggregationLookup.js";
+import { createAggregationLookup, shouldApplySorting } from "./createAggregationLookup.js";
 export const aggregationStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.aggregation = {
     rulesOnLastColumnHydration: {},
@@ -36,20 +36,95 @@ export const useGridAggregation = (apiRef, props) => {
       apiRef.current.setState(mergeStateWithAggregationModel(model));
     }
   }, [apiRef]);
-  const applyAggregation = React.useCallback(() => {
-    const aggregationLookup = createAggregationLookup({
-      apiRef,
-      getAggregationPosition: props.getAggregationPosition,
-      aggregationFunctions: props.aggregationFunctions,
-      aggregationRowsScope: props.aggregationRowsScope,
-      isDataSource: !!props.dataSource
-    });
-    apiRef.current.setState(state => _extends({}, state, {
-      aggregation: _extends({}, 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 = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
+    const aggregatedFields = Object.keys(aggregationRules);
+    const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
+    if (reason === 'sort' && !needsSorting) {
+      // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
+      return;
+    }
+    const renderContext = gridRenderContextSelector(apiRef);
+    const visibleColumns = 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 = gridSortModelSelector(apiRef).map(s => s.field);
+        const hasAggregatedSorting = sortModel.some(field => aggregationRules[field]);
+        if (hasAggregatedSorting) {
+          apiRef.current.applySorting();
+        }
+        abortControllerRef.current = null;
+        return;
+      }
+      const applySorting = shouldApplySorting(aggregationRules, currentChunk);
+
+      // createAggregationLookup now RETURNS new partial lookup
+      const partialLookup = 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][field] = partialLookup[key][field];
+        }
+      }
+      apiRef.current.setState(state => _extends({}, state, {
+        aggregation: _extends({}, state.aggregation, {
+          lookup: _extends({}, 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 = useRunOncePerLoop(applyAggregation);
   const aggregationApi = {
     setAggregationModel
   };
@@ -78,17 +153,18 @@ export const useGridAggregation = (apiRef, props) => {
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!props.dataSource && !areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
       apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-      applyAggregation();
+      deferredApplyAggregation();
     }
 
     // Re-apply the column hydration to wrap / unwrap the aggregated columns
     if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
-  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
+  }, [apiRef, deferredApplyAggregation, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   useGridEvent(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   useGridEvent(apiRef, 'columnsChange', checkAggregationRulesDiff);
-  useGridEvent(apiRef, 'filteredRowsSet', applyAggregation);
+  useGridEvent(apiRef, 'filteredRowsSet', deferredApplyAggregation);
+  useGridEvent(apiRef, 'sortedRowsSet', () => deferredApplyAggregation('sort'));
 
   /**
    * EFFECTS

package/esm/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/esm/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;

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

@@ -13,6 +13,14 @@ const emptyPivotModel = {
   values: []
 };
 export const pivotingStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.pivoting = {
+    exportedStateRef: {
+      current: null
+    },
+    nonPivotDataRef: {
+      current: undefined
+    }
+  };
   if (!isPivotingAvailableFn(props)) {
     return _extends({}, state, {
       pivoting: {
@@ -34,8 +42,10 @@ export const pivotingStateInitializer = (state, props, apiRef) => {
 };
 export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) => {
   const isPivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
-  const exportedStateRef = React.useRef(null);
-  const nonPivotDataRef = React.useRef(undefined);
+  const {
+    exportedStateRef,
+    nonPivotDataRef
+  } = apiRef.current.caches.pivoting;
   const isPivotingAvailable = isPivotingAvailableFn(props);
   apiRef.current.registerControlState({
     stateId: 'pivotModel',
@@ -68,9 +78,10 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
     const initialColumns = getInitialColumns(originalColumnsProp, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
     return {
       rows,
-      columns: initialColumns
+      columns: initialColumns,
+      originalRowsProp
     };
-  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp]);
+  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp, originalRowsProp, exportedStateRef]);
   const computePivotingState = React.useCallback(({
     active,
     model: pivotModel
@@ -91,51 +102,44 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
           columns,
           pivotModel,
           apiRef: apiRef,
-          pivotingColDef: props.pivotingColDef
+          pivotingColDef: props.pivotingColDef,
+          groupingColDef: props.groupingColDef
         })
       };
     }
     return undefined;
-  }, [apiRef, props.pivotingColDef]);
+  }, [apiRef, props.pivotingColDef, props.groupingColDef, nonPivotDataRef]);
   useOnMount(() => {
     if (!isPivotingAvailable || !isPivotActive) {
       return undefined;
     }
+    nonPivotDataRef.current = getInitialData();
     const isLoading = gridRowsLoadingSelector(apiRef) ?? false;
-    const runPivoting = () => {
-      nonPivotDataRef.current = getInitialData();
-      apiRef.current.setState(state => {
-        const pivotingState = _extends({}, state.pivoting, computePivotingState(state.pivoting));
-        return _extends({}, state, {
-          pivoting: pivotingState
-        });
-      });
-    };
-    if (!isLoading) {
-      runPivoting();
+    if (isLoading) {
       return undefined;
     }
-    const unsubscribe = apiRef.current?.store.subscribe(() => {
-      const loading = gridRowsLoadingSelector(apiRef);
-      if (loading === false) {
-        unsubscribe();
-        runPivoting();
-      }
+    apiRef.current.setState(state => {
+      const pivotingState = _extends({}, state.pivoting, computePivotingState(state.pivoting));
+      return _extends({}, state, {
+        pivoting: pivotingState
+      });
     });
-    return unsubscribe;
+    return undefined;
   });
   useEnhancedEffect(() => {
     if (!isPivotingAvailable || !isPivotActive) {
-      if (exportedStateRef.current) {
-        apiRef.current.restoreState(exportedStateRef.current);
-        exportedStateRef.current = null;
-      }
       if (nonPivotDataRef.current) {
+        // Prevent rows from being resynced from the original rows prop
+        apiRef.current.caches.rows.rowsBeforePartialUpdates = nonPivotDataRef.current.originalRowsProp;
         apiRef.current.setRows(nonPivotDataRef.current.rows);
         nonPivotDataRef.current = undefined;
       }
+      if (exportedStateRef.current) {
+        apiRef.current.restoreState(exportedStateRef.current);
+        exportedStateRef.current = null;
+      }
     }
-  }, [isPivotActive, apiRef, isPivotingAvailable]);
+  }, [isPivotActive, apiRef, isPivotingAvailable, nonPivotDataRef, exportedStateRef]);
   const setPivotModel = React.useCallback(callback => {
     if (!isPivotingAvailable) {
       return;
@@ -221,7 +225,6 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
     if (!isPivotingAvailable) {
       return;
     }
-    apiRef.current.selectRows([], false, true);
     apiRef.current.setState(state => {
       const newPivotMode = typeof callback === 'function' ? callback(state.pivoting?.active) : callback;
       if (state.pivoting?.active === newPivotMode) {
@@ -240,7 +243,8 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       });
       return newState;
     });
-  }, [apiRef, computePivotingState, getInitialData, isPivotingAvailable]);
+    apiRef.current.selectRows([], false, true);
+  }, [apiRef, computePivotingState, getInitialData, isPivotingAvailable, nonPivotDataRef]);
   const setPivotPanelOpen = React.useCallback(callback => {
     if (!isPivotingAvailable) {
       return;
@@ -276,9 +280,9 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
         })
       });
     });
-  }, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState]);
+  }, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState, nonPivotDataRef]);
   const updateNonPivotRows = React.useCallback((rows, keepPreviousRows = true) => {
-    if (!nonPivotDataRef.current || !rows || rows.length === 0) {
+    if (!nonPivotDataRef.current || !isPivotingAvailable || !rows || rows.length === 0) {
       return;
     }
     if (keepPreviousRows) {
@@ -304,7 +308,7 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
         pivoting: _extends({}, state.pivoting, computePivotingState(state.pivoting))
       });
     });
-  }, [apiRef, computePivotingState]);
+  }, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef]);
   useGridApiMethod(apiRef, {
     setPivotModel,
     setPivotActive,
@@ -320,7 +324,10 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
   }, [originalColumnsProp, apiRef]);
   useEnhancedEffect(() => {
     apiRef.current.updateNonPivotRows(originalRowsProp, false);
-  }, [originalRowsProp, apiRef]);
+    if (nonPivotDataRef.current) {
+      nonPivotDataRef.current.originalRowsProp = originalRowsProp;
+    }
+  }, [originalRowsProp, apiRef, nonPivotDataRef]);
   useEnhancedEffect(() => {
     if (props.pivotModel !== undefined) {
       apiRef.current.setPivotModel(props.pivotModel);
@@ -336,4 +343,19 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       apiRef.current.setPivotPanelOpen(props.pivotPanelOpen);
     }
   }, [apiRef, props.pivotPanelOpen]);
+};
+export const useGridPivotingExportState = apiRef => {
+  const stateExportPreProcessing = React.useCallback(state => {
+    const isPivotActive = gridPivotActiveSelector(apiRef);
+    if (!isPivotActive) {
+      return state;
+    }
+
+    // To-do: implement context.exportOnlyDirtyModels
+    const newState = _extends({}, state, apiRef.current.caches.pivoting.exportedStateRef.current, {
+      sorting: state.sorting
+    });
+    return newState;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
 };

package/esm/hooks/features/pivoting/utils.d.ts

@@ -11,11 +11,13 @@ export declare const getPivotedData: ({
   columns,
   pivotModel,
   apiRef,
-  pivotingColDef
+  pivotingColDef,
+  groupingColDef
 }: {
   rows: GridRowModel[];
   columns: Map<string, GridColDef>;
   pivotModel: GridPivotModel;
   apiRef: RefObject<GridApiPremium>;
   pivotingColDef: DataGridPremiumProcessedProps["pivotingColDef"];
+  groupingColDef: DataGridPremiumProcessedProps["groupingColDef"];
 }) => GridPivotingPropsOverrides;