@mui/x-data-grid-premium 8.0.0-alpha.1 → 8.0.0-alpha.11

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

@@ -1,18 +1,13 @@
 import { gridColumnLookupSelector, gridFilteredRowsLookupSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 import { getAggregationRules } from "./gridAggregationUtils.js";
 import { gridAggregationModelSelector } from "./gridAggregationSelectors.js";
-const getAggregationCellValue = ({
-  apiRef,
-  groupId,
-  field,
-  aggregationFunction,
-  aggregationRowsScope
-}) => {
-  const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position) => {
+  const groupAggregationLookup = {};
+  const aggregatedValues = [];
   const rowIds = apiRef.current.getRowGroupChildren({
     groupId
   });
-  const values = [];
+  const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
   rowIds.forEach(rowId => {
     if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
       return;
@@ -29,42 +24,53 @@ const getAggregationCellValue = ({
     if (rowNode.type === 'group') {
       return;
     }
-    if (typeof aggregationFunction.getCellValue === 'function') {
-      const row = apiRef.current.getRow(rowId);
-      values.push(aggregationFunction.getCellValue({
-        row
-      }));
-    } else {
-      values.push(apiRef.current.getCellValue(rowId, field));
+    const row = apiRef.current.getRow(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: []
+        };
+      }
+      if (typeof aggregationFunction.getCellValue === 'function') {
+        aggregatedValues[j].values.push(aggregationFunction.getCellValue({
+          row
+        }));
+      } else {
+        const colDef = apiRef.current.getColumn(field);
+        aggregatedValues[j].values.push(apiRef.current.getRowValue(row, colDef));
+      }
     }
   });
-  return aggregationFunction.apply({
-    values,
-    groupId,
-    field // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
-  });
+  for (let i = 0; i < aggregatedValues.length; i += 1) {
+    const {
+      aggregatedField,
+      values
+    } = aggregatedValues[i];
+    const aggregationFunction = aggregationRules[aggregatedField].aggregationFunction;
+    const value = aggregationFunction.apply({
+      values,
+      groupId,
+      field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
+    });
+    groupAggregationLookup[aggregatedField] = {
+      position,
+      value
+    };
+  }
+  return groupAggregationLookup;
 };
-const getGroupAggregatedValue = ({
-  groupId,
-  apiRef,
-  aggregationRowsScope,
-  aggregatedFields,
-  aggregationRules,
-  position
-}) => {
+const getGroupAggregatedValueDataSource = (groupId, apiRef, aggregatedFields, position) => {
   const groupAggregationLookup = {};
   for (let j = 0; j < aggregatedFields.length; j += 1) {
     const aggregatedField = aggregatedFields[j];
-    const columnAggregationRules = aggregationRules[aggregatedField];
     groupAggregationLookup[aggregatedField] = {
       position,
-      value: getAggregationCellValue({
-        apiRef,
-        groupId,
-        field: aggregatedField,
-        aggregationFunction: columnAggregationRules.aggregationFunction,
-        aggregationRowsScope
-      })
+      value: apiRef.current.resolveGroupAggregation(groupId, aggregatedField)
     };
   }
   return groupAggregationLookup;
@@ -73,13 +79,10 @@ export const createAggregationLookup = ({
   apiRef,
   aggregationFunctions,
   aggregationRowsScope,
-  getAggregationPosition
+  getAggregationPosition,
+  isDataSource
 }) => {
-  const aggregationRules = getAggregationRules({
-    columnsLookup: gridColumnLookupSelector(apiRef),
-    aggregationModel: gridAggregationModelSelector(apiRef),
-    aggregationFunctions
-  });
+  const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), aggregationFunctions, isDataSource);
   const aggregatedFields = Object.keys(aggregationRules);
   if (aggregatedFields.length === 0) {
     return {};
@@ -94,18 +97,12 @@ export const createAggregationLookup = ({
         createGroupAggregationLookup(childNode);
       }
     }
-    const hasAggregableChildren = groupNode.children.length;
-    if (hasAggregableChildren) {
-      const position = getAggregationPosition(groupNode);
-      if (position != null) {
-        aggregationLookup[groupNode.id] = getGroupAggregatedValue({
-          groupId: groupNode.id,
-          apiRef,
-          aggregatedFields,
-          aggregationRowsScope,
-          aggregationRules,
-          position
-        });
+    const position = getAggregationPosition(groupNode);
+    if (position !== null) {
+      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);
       }
     }
   };

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

@@ -10,56 +10,60 @@ export const getAggregationFooterRowIdFromGroupId = groupId => {
   }
   return `auto-generated-group-footer-${groupId}`;
 };
+const isClientSideAggregateFunction = aggregationFunction => !!aggregationFunction && 'apply' in aggregationFunction;
 export const canColumnHaveAggregationFunction = ({
   colDef,
   aggregationFunctionName,
-  aggregationFunction
+  aggregationFunction,
+  isDataSource
 }) => {
   if (!colDef) {
     return false;
   }
-  if (!aggregationFunction) {
+  if (!isClientSideAggregateFunction(aggregationFunction) && !isDataSource) {
     return false;
   }
   if (colDef.availableAggregationFunctions != null) {
     return colDef.availableAggregationFunctions.includes(aggregationFunctionName);
   }
-  if (!aggregationFunction.columnTypes) {
+  if (!aggregationFunction?.columnTypes) {
     return true;
   }
   return aggregationFunction.columnTypes.includes(colDef.type);
 };
 export const getAvailableAggregationFunctions = ({
   aggregationFunctions,
-  colDef
+  colDef,
+  isDataSource
 }) => Object.keys(aggregationFunctions).filter(aggregationFunctionName => canColumnHaveAggregationFunction({
   colDef,
   aggregationFunctionName,
-  aggregationFunction: aggregationFunctions[aggregationFunctionName]
+  aggregationFunction: aggregationFunctions[aggregationFunctionName],
+  isDataSource
 }));
 export const mergeStateWithAggregationModel = aggregationModel => state => _extends({}, state, {
   aggregation: _extends({}, state.aggregation, {
     model: aggregationModel
   })
 });
-export const getAggregationRules = ({
-  columnsLookup,
-  aggregationModel,
-  aggregationFunctions
-}) => {
+export const getAggregationRules = (columnsLookup, aggregationModel, aggregationFunctions, isDataSource) => {
   const aggregationRules = {};
-  Object.entries(aggregationModel).forEach(([field, columnItem]) => {
+
+  // eslint-disable-next-line guard-for-in
+  for (const field in aggregationModel) {
+    const columnItem = aggregationModel[field];
     if (columnsLookup[field] && canColumnHaveAggregationFunction({
       colDef: columnsLookup[field],
       aggregationFunctionName: columnItem,
-      aggregationFunction: aggregationFunctions[columnItem]
+      aggregationFunction: aggregationFunctions[columnItem],
+      isDataSource
     })) {
       aggregationRules[field] = {
         aggregationFunctionName: columnItem,
         aggregationFunction: aggregationFunctions[columnItem]
       };
     }
-  });
+  }
   return aggregationRules;
 };
 /**
@@ -107,7 +111,7 @@ export const addFooterRows = ({
     }
   };
   const updateRootGroupFooter = groupNode => {
-    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
+    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer' && groupNode.children.length > 0;
     if (shouldHaveFooter) {
       const rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = addPinnedRow({

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

@@ -1,4 +1,3 @@
-export * from "./gridAggregationInterfaces.js";
 export * from "./gridAggregationSelectors.js";
 export * from "./gridAggregationFunctions.js";
 export { GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, getAggregationFooterRowIdFromGroupId } from "./gridAggregationUtils.js";

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

@@ -1,6 +1,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 { 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";
@@ -31,7 +32,6 @@ export const useGridAggregation = (apiRef, props) => {
     const currentModel = gridAggregationModelSelector(apiRef);
     if (currentModel !== model) {
       apiRef.current.setState(mergeStateWithAggregationModel(model));
-      apiRef.current.forceUpdate();
     }
   }, [apiRef]);
   const applyAggregation = React.useCallback(() => {
@@ -39,18 +39,29 @@ export const useGridAggregation = (apiRef, props) => {
       apiRef,
       getAggregationPosition: props.getAggregationPosition,
       aggregationFunctions: props.aggregationFunctions,
-      aggregationRowsScope: props.aggregationRowsScope
+      aggregationRowsScope: props.aggregationRowsScope,
+      isDataSource: !!props.unstable_dataSource
     });
     apiRef.current.setState(state => _extends({}, state, {
       aggregation: _extends({}, state.aggregation, {
         lookup: aggregationLookup
       })
     }));
-  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope]);
+  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.unstable_dataSource]);
   const aggregationApi = {
     setAggregationModel
   };
+  const aggregationPrivateApi = {
+    applyAggregation
+  };
   useGridApiMethod(apiRef, aggregationApi, 'public');
+  useGridApiMethod(apiRef, aggregationPrivateApi, 'private');
+  const addGetRowsParams = React.useCallback(params => {
+    return _extends({}, params, {
+      aggregationModel: gridAggregationModelSelector(apiRef)
+    });
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'getRowsParams', addGetRowsParams);
 
   /**
    * EVENTS
@@ -60,24 +71,23 @@ export const useGridAggregation = (apiRef, props) => {
       rulesOnLastRowHydration,
       rulesOnLastColumnHydration
     } = apiRef.current.caches.aggregation;
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
-      columnsLookup: gridColumnLookupSelector(apiRef),
-      aggregationModel: gridAggregationModelSelector(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
 
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
-      apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-      applyAggregation();
+      if (props.unstable_dataSource) {
+        apiRef.current.unstable_dataSource.fetchRows();
+      } else {
+        apiRef.current.requestPipeProcessorsApplication('hydrateRows');
+        applyAggregation();
+      }
     }
 
     // Re-apply the column hydration to wrap / unwrap the aggregated columns
     if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
-      apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
-  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);
+  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   useGridApiEventHandler(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   useGridApiEventHandler(apiRef, 'columnsChange', checkAggregationRulesDiff);
   useGridApiEventHandler(apiRef, 'filteredRowsSet', applyAggregation);

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

@@ -10,11 +10,7 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
   // that the pre-processor is called it will already have been updated with the current rules.
   const rulesOnLastColumnHydration = React.useRef({});
   const updateAggregatedColumns = React.useCallback(columnsState => {
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
-      columnsLookup: columnsState.lookup,
-      aggregationModel: gridAggregationModelSelector(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(columnsState.lookup, gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
     columnsState.orderedFields.forEach(field => {
       const shouldHaveAggregationValue = !!aggregationRules[field];
       const haveAggregationColumnValue = !!rulesOnLastColumnHydration.current[field];
@@ -34,14 +30,11 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
       columnsState.lookup[field] = column;
     });
     rulesOnLastColumnHydration.current = aggregationRules;
+    apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
     return columnsState;
-  }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   const addGroupFooterRows = React.useCallback(value => {
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
-      columnsLookup: gridColumnLookupSelector(apiRef),
-      aggregationModel: gridAggregationModelSelector(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
     const hasAggregationRule = Object.keys(aggregationRules).length > 0;
 
     // If we did not have any aggregation footer before, and we still don't have any,
@@ -56,20 +49,21 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
       getAggregationPosition: props.getAggregationPosition,
       hasAggregationRule
     });
-  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions]);
+  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.unstable_dataSource]);
   const addColumnMenuButtons = React.useCallback((columnMenuItems, colDef) => {
     if (props.disableAggregation || !colDef.aggregable) {
       return columnMenuItems;
     }
     const availableAggregationFunctions = getAvailableAggregationFunctions({
       aggregationFunctions: props.aggregationFunctions,
-      colDef
+      colDef,
+      isDataSource: !!props.unstable_dataSource
     });
     if (availableAggregationFunctions.length === 0) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuAggregationItem'];
-  }, [props.aggregationFunctions, props.disableAggregation]);
+  }, [props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   const stateExportPreProcessing = React.useCallback(prevState => {
     if (props.disableAggregation) {
       return prevState;

package/modern/hooks/features/cellSelection/useGridCellSelection.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
-import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
+import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";
 export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
   cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
@@ -16,13 +16,10 @@ const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the s
 
 export const useGridCellSelection = (apiRef, props) => {
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
-  const visibleRows = useGridVisibleRows(apiRef, props);
-  const cellWithVirtualFocus = React.useRef();
-  const lastMouseDownCell = React.useRef();
+  const cellWithVirtualFocus = React.useRef(null);
+  const lastMouseDownCell = React.useRef(null);
   const mousePosition = React.useRef(null);
-  const autoScrollRAF = React.useRef();
-  const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const autoScrollRAF = React.useRef(null);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, props);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
@@ -76,6 +73,7 @@ export const useGridCellSelection = (apiRef, props) => {
       finalEndColumnIndex = startColumnIndex;
     }
     const visibleColumns = apiRef.current.getVisibleColumns();
+    const visibleRows = getVisibleRows(apiRef);
     const rowsInRange = visibleRows.rows.slice(finalStartRowIndex, finalEndRowIndex + 1);
     const columnsInRange = visibleColumns.slice(finalStartColumnIndex, finalEndColumnIndex + 1);
     const newModel = keepOtherSelected ? _extends({}, apiRef.current.getCellSelectionModel()) : {};
@@ -88,10 +86,9 @@ export const useGridCellSelection = (apiRef, props) => {
       }, {});
     });
     apiRef.current.setCellSelectionModel(newModel);
-  }, [apiRef, visibleRows.rows]);
+  }, [apiRef]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
     const currentVisibleRows = getVisibleRows(apiRef, props);
     const sortedEntries = currentVisibleRows.rows.reduce((result, row) => {
       if (row.id in selectionModel) {
@@ -103,7 +100,7 @@ export const useGridCellSelection = (apiRef, props) => {
       selectedCells.push(...Object.entries(fields).reduce((selectedFields, [field, isSelected]) => {
         if (isSelected) {
           selectedFields.push({
-            id: idToIdLookup[id],
+            id,
             field
           });
         }
@@ -187,6 +184,7 @@ export const useGridCellSelection = (apiRef, props) => {
       if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
         return;
       }
+      const dimensions = gridDimensionsSelector(apiRef.current.state);
       const {
         x: mouseX,
         y: mouseY
@@ -229,7 +227,7 @@ export const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef, dimensions, totalHeaderHeight]);
+  }, [apiRef, totalHeaderHeight]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -246,6 +244,7 @@ export const useGridCellSelection = (apiRef, props) => {
     if (!virtualScrollerRect) {
       return;
     }
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
     const {
       x,
       y
@@ -271,7 +270,7 @@ export const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,
@@ -331,6 +330,7 @@ export const useGridCellSelection = (apiRef, props) => {
     } else if (event.key === 'ArrowLeft') {
       endColumnIndex -= 1;
     }
+    const visibleRows = getVisibleRows(apiRef);
     if (endRowIndex < 0 || endRowIndex >= visibleRows.rows.length) {
       return;
     }
@@ -383,6 +383,7 @@ export const useGridCellSelection = (apiRef, props) => {
     id,
     field
   }) => {
+    const visibleRows = getVisibleRows(apiRef);
     if (!visibleRows.range || !apiRef.current.isCellSelected(id, field)) {
       return classes;
     }
@@ -431,7 +432,7 @@ export const useGridCellSelection = (apiRef, props) => {
       newClasses.push(gridClasses['cell--rangeRight']);
     }
     return newClasses;
-  }, [apiRef, visibleRows.range, visibleRows.rows]);
+  }, [apiRef]);
   const canUpdateFocus = React.useCallback((initialValue, {
     event,
     cell
@@ -452,6 +453,7 @@ export const useGridCellSelection = (apiRef, props) => {
     if (apiRef.current.getSelectedCellsAsArray().length <= 1) {
       return value;
     }
+    const sortedRowIds = gridSortedRowIdsSelector(apiRef.current.state);
     const cellSelectionModel = apiRef.current.getCellSelectionModel();
     const unsortedSelectedRowIds = Object.keys(cellSelectionModel);
     const sortedSelectedRowIds = sortedRowIds.filter(id => unsortedSelectedRowIds.includes(`${id}`));
@@ -477,7 +479,7 @@ export const useGridCellSelection = (apiRef, props) => {
       return acc === '' ? rowString : [acc, rowString].join('\r\n');
     }, '');
     return copyData;
-  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds]);
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
   useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);
   useGridRegisterPipeProcessor(apiRef, 'cellClassName', addClassesToCells);
   useGridRegisterPipeProcessor(apiRef, 'canUpdateFocus', canUpdateFocus);

package/modern/hooks/features/clipboard/useGridClipboardImport.js

@@ -121,7 +121,7 @@ class CellValueUpdater {
           if (onProcessRowUpdateError) {
             onProcessRowUpdateError(errorThrown);
           } else if (process.env.NODE_ENV !== 'production') {
-            warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+            warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
           }
         };
         try {

package/modern/hooks/features/dataSource/cache.js

@@ -0,0 +1,3 @@
+export function getKeyPremium(params) {
+  return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.aggregationModel]);
+}

package/modern/hooks/features/dataSource/models.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiEventHandler as addEventHandler, useGridApiMethod, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
+import { useGridDataSourceBase, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { getKeyPremium } from "./cache.js";
+const options = {
+  cacheOptions: {
+    getKey: getKeyPremium
+  }
+};
+export const useGridDataSourcePremium = (apiRef, props) => {
+  const {
+    api,
+    strategyProcessor,
+    events
+  } = useGridDataSourceBase(apiRef, props, options);
+  const aggregateRowRef = React.useRef({});
+  const processDataSourceRows = React.useCallback(({
+    params,
+    response
+  }, applyRowHydration) => {
+    if (response.aggregateRow) {
+      aggregateRowRef.current = response.aggregateRow;
+    }
+    if (Object.keys(params.aggregationModel || {}).length > 0) {
+      if (applyRowHydration) {
+        apiRef.current.requestPipeProcessorsApplication('hydrateRows');
+      }
+      apiRef.current.applyAggregation();
+    }
+    return {
+      params,
+      response
+    };
+  }, [apiRef]);
+  const resolveGroupAggregation = React.useCallback((groupId, field) => {
+    if (groupId === GRID_ROOT_GROUP_ID) {
+      return props.unstable_dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
+    }
+    const row = apiRef.current.getRow(groupId);
+    return props.unstable_dataSource?.getAggregatedValue?.(row, field);
+  }, [apiRef, props.unstable_dataSource]);
+  const privateApi = _extends({}, api.private, {
+    resolveGroupAggregation
+  });
+  useGridApiMethod(apiRef, api.public, 'public');
+  useGridApiMethod(apiRef, privateApi, 'private');
+  useGridRegisterStrategyProcessor(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
+  useGridRegisterPipeProcessor(apiRef, 'processDataSourceRows', processDataSourceRows);
+  Object.entries(events).forEach(([event, handler]) => {
+    addEventHandler(apiRef, event, handler);
+  });
+};

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

@@ -32,7 +32,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = _extends({}, GROUPING_COL
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = gridRowGroupingSanitizedModelSelector({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -63,10 +65,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn } from '@mui/x-data-grid-pro/internals';
+import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn };
 export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
@@ -75,7 +75,9 @@ export const filterRowTreeFromGroupingColumns = params => {
         isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, params.apiRef, filterCache);
       }
     }
-    filteredRowsLookup[node.id] = isPassingFiltering;
+    if (!isPassingFiltering) {
+      filteredRowsLookup[node.id] = false;
+    }
     if (!isPassingFiltering) {
       return 0;
     }
@@ -124,7 +126,7 @@ export const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataS
     };
   }
   const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
-  privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
+  privateApiRef.current.setStrategyAvailability(GridStrategyGroup.RowTree, strategy, isAvailable);
 };
 export const getCellGroupingCriteria = ({
   row,

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { getRowGroupingFieldFromGroupingCriteria, RowGroupingStrategy, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
@@ -162,7 +162,7 @@ export const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === RowGroupingStrategy.Default) {
+      if (apiRef.current.getActiveStrategy(GridStrategyGroup.RowTree) === RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }