@mui/x-data-grid-premium 5.16.0 → 5.17.2

package/CHANGELOG.md

@@ -3,6 +3,143 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.2
+
+_Sep 9, 2022_
+
+This release will the last regular release for our `v5` packages.
+From now on, we'll be focusing on developing MUI X v6.
+You can check the [roadmap](https://github.com/mui/mui-x/projects/1) for more details on what's coming next.
+
+And if you'd like to help, please consider volunteering to give us a [user interview](https://docs.google.com/forms/d/11L_zxL7oD_B-ZrZDuSyIkUzJLzOTUU2M4vHXxMVtWhU/edit).
+We'd love to know more about your use cases, pain points and expectations for the future.
+
+The `v5` packages will only get new versions to patch critical bug fixes.
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📃 Add support for column grouping when exporting to Excel (#5895) @alexfauquette
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.2` / `@mui/x-data-grid-pro@v5.17.2` / `@mui/x-data-grid-premium@v5.17.2`
+
+#### Changes
+
+- [DataGrid] Revert mode if cell/row couldn't be saved due to validation error (#5897) @m4theushw
+- [DataGridPremium] Export column grouping in Excel (#5895) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.1` / `@mui/x-date-pickers-pro@v5.0.1`
+
+#### Changes
+
+- [DateTimePicker] Remove circular import (#6087) @flaviendelangle
+- [pickers] Add `sx` prop to the equality check of `PickersDay` (#6030) @TheUnlocked
+- [pickers] Add warning when `openTo` is invalid based on available `views` (#6042) @LukasTy
+- [pickers] Allow keyboard navigation to ignore disabled date for left / right arrow (#6082) @alexfauquette
+- [pickers] Fix mobile picker not opening on label click (#6074) @LukasTy
+
+### Docs
+
+- [docs] Add Recipes section
+
+### Core
+
+- [core] Add `yarn release:tag` script (#5169) @DanailH
+- [core] Upgrade monorepo (#6072) @m4theushw
+
+## 5.17.1
+
+_Sep 5, 2022_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.1` / `@mui/x-data-grid-pro@v5.17.1` / `@mui/x-data-grid-premium@v5.17.1`
+
+#### Changes
+
+- [DataGrid] Fix cells being focused on mouseUp (#5980) @cherniavskii
+- [DataGrid] Fix focused cell if column is spanned and new editing API is used (#5962) @m4theushw
+- [DataGridPro] Fix import in lazy-loading causing a bundling error (#6031) @flaviendelangle
+
+## 5.17.0
+
+_Sep 2, 2022_
+
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+
+If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Implement Lazy loading (#5214) @DanailH
+
+  Pro users now can try the experimental lazy loading feature.
+  In a few steps, you can load your data on demand, as the rows are displayed.
+
+  To enable this feature, add `experimentalFeatures={{ lazyLoading: true }}`.
+  Lazy Loading requires a few other settings.
+  See the [documentation](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) to explore the example in detail.
+
+- 🚀 Improve `pickers` focus management (#5820) @alexfauquette
+- 🎉 Enable disabling `day` on date range picker depending on `position` (#5773) @alexfauquette
+- ✨ Various improvements
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.0` / `@mui/x-data-grid-pro@v5.17.0` / `@mui/x-data-grid-premium@v5.17.0`
+
+#### Changes
+
+- [DataGrid] Add `sort` prop to columns panel slot (#5888) @gavbrennan
+- [DataGrid] Do not throw if `fieldToFocus` cannot be found (#5871) @cherniavskii
+- [DataGrid] Support `getRowId` in the `replaceRows` method (#5988) @flaviendelangle
+- [DataGridPro] Add class name to row with open detail panel (#5924) @m4theushw
+- [DataGridPro] Fix crash when using `pinnedRows` + `getRowClassName` props and `rows=[]` (#5851) @cherniavskii
+- [DataGridPro] Fix filtering with inactive filter items (#5993) @alexfauquette
+- [DataGridPro] Implement Lazy loading (#5214) @DanailH
+- [DataGridPro] Support pinned columns and dynamic row height (#5782) @m4theushw
+- [DataGridPremium] Add state initializer for column groups (#5963) @alexfauquette
+- [DataGridPremium] Update grouping when `groupingValueGetter` changes (#5919) @flaviendelangle
+- [DataGridPremium] Use the aggregated value on tree data real groups (#5953) @flaviendelangle
+
+### `@mui/x-date-pickers@v5.0.0` / `@mui/x-date-pickers-pro@v5.0.0`
+
+#### Changes
+
+- [DatePicker] Improve focus management (#5820) @alexfauquette
+- [DateRangePicker] Enable disabling `day` depending on `position` (#5773) @alexfauquette
+- [DateTimePicker] Create a new `tabs` component slot (#5972) @LukasTy
+- [pickers] Do not forward validation props to the DOM on field components (#5971) @flaviendelangle
+- [pickers] Do not hardcode `date-fns` elements in field components (#5975) @flaviendelangle
+- [pickers] Do not require `date-fns` in `@mui/x-date-pickers-pro` (#5941) @flaviendelangle
+- [pickers] Fix mobile picker not opening on label click (#5651) @LukasTy
+- [pickers] Improve DOM event management on `useField` (#5901) @flaviendelangle
+- [pickers] Include `community` package `themeAugmentation` in `pro` package types (#5969) @LukasTy
+- [pickers] Rename `DateRangeField` into `SingleInputDateRangeField` (#5961) @flaviendelangle
+- [pickers] Support `isSameError` on field components (#5984) @flaviendelangle
+
+### Docs
+
+- [docs] Add `description` and `default` to pickers slots (#5893) @alexfauquette
+- [docs] Fix typo (#5945) @wettopa
+- [docs] Fix typo `onYearPicker` to `onYearChange` (#5954) @alexfauquette
+- [docs] Update `GridCellParams`'s `value` description (#5849) @cherniavskii
+- [docs] Update `README.md` to match Introduction section of the docs (#5754) @samuelsycamore
+
+### Core
+
+- [core] Fix typo (#5990) @flaviendelangle
+- [core] Remove old babel resolve rule (#5939) @oliviertassinari
+- [core] Remove outdated TODO (#5956) @flaviendelangle
+- [core] Upgrade monorepo (#5960) @cherniavskii
+- [core] Fix statics (#5986) @DanailH
+- [core] Remove unused dependencies (#5937) @oliviertassinari
+- [license] Remove CLI (#5757) @flaviendelangle
+- [test] Fix time zone sensitive test (#5955) @LukasTy
+- [test] Use `userEvent.mousePress` instead of `fireClickEvent` (#5920) @cherniavskii
+
 ## 5.16.0
 
 _Aug 25, 2022_
@@ -585,7 +722,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   **MonthPicker**: The prop `onMonthChange` has been removed, you can use `onChange` instead since every change is a month change
 
-  **YearPicker**: The prop `onYearPicker` has been removed, you can use `onChange` instead since every change is a year change
+  **YearPicker**: The prop `onYearChange` has been removed, you can use `onChange` instead since every change is a year change
 
   **DayPicker**: The prop `isDateDisabled` has been removed, you can now use the same validation props as for the other components (`maxDate`, `minDate`, `shouldDisableDate`, `disableFuture` and `disablePast`)
 

package/DataGridPremium/DataGridPremium.js

@@ -307,6 +307,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
     columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -716,6 +717,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -980,6 +989,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

package/DataGridPremium/useDataGridPremiumComponent.js

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

package/hooks/features/aggregation/createAggregationLookup.js

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

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

@@ -34,7 +34,7 @@ export declare const addFooterRows: ({ groupingParams, aggregationRules, getAggr
 /**
  * Compares two sets of aggregation rules to determine if they are equal or not.
  */
-export declare const hasAggregationRulesChanged: (previousValue: GridAggregationRules | undefined, newValue: GridAggregationRules) => boolean;
+export declare const areAggregationRulesEqual: (previousValue: GridAggregationRules | undefined, newValue: GridAggregationRules) => boolean;
 export declare const getAggregationFunctionLabel: ({ apiRef, aggregationRule, }: {
     apiRef: React.MutableRefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;

package/hooks/features/aggregation/gridAggregationUtils.js

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

package/hooks/features/aggregation/useGridAggregation.js

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

package/hooks/features/aggregation/wrapColumnWithAggregation.js

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

package/hooks/features/export/gridExcelExportInterface.d.ts

@@ -34,6 +34,11 @@ export interface GridExcelExportOptions extends GridFileExportOptions {
      * Object mapping column field to Exceljs style
      * */
     columnsStyles?: ColumnsStylesInterface;
+    /**
+     * If `true`, the headers of the column groups will be added into the file.
+     * @default true
+     */
+    includeColumnGroupsHeaders?: boolean;
 }
 export interface GridToolbarExportProps extends GridToolbarExportPropsCommunity {
     excelOptions: GridExcelExportOptions & GridExportDisplayOptions;

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -5,6 +5,7 @@ interface BuildExcelOptions {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
     includeHeaders: boolean;
+    includeColumnGroupsHeaders: boolean;
     valueOptionsSheetName: string;
     exceljsPreProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
     exceljsPostProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;

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

@@ -174,11 +174,79 @@ const serializeColumn = (column, columnsStyles) => {
   };
 };
 
+const addColumnGroupingHeaders = (worksheet, columns, api) => {
+  const maxDepth = Math.max(...columns.map(({
+    field
+  }) => {
+    var _api$unstable_getColu, _api$unstable_getColu2;
+
+    return (_api$unstable_getColu = (_api$unstable_getColu2 = api.unstable_getColumnGroupPath(field)) == null ? void 0 : _api$unstable_getColu2.length) != null ? _api$unstable_getColu : 0;
+  }));
+
+  if (maxDepth === 0) {
+    return;
+  }
+
+  const columnGroupDetails = api.unstable_getAllGroupDetails();
+
+  for (let rowIndex = 0; rowIndex < maxDepth; rowIndex += 1) {
+    const row = columns.map(({
+      field
+    }) => {
+      const groupingPath = api.unstable_getColumnGroupPath(field);
+
+      if (groupingPath.length <= rowIndex) {
+        return {
+          groupId: null,
+          parents: groupingPath
+        };
+      }
+
+      return _extends({}, columnGroupDetails[groupingPath[rowIndex]], {
+        parents: groupingPath.slice(0, rowIndex)
+      });
+    });
+    const newRow = worksheet.addRow(row.map(group => group.groupId === null ? null : (group == null ? void 0 : group.headerName) || group.groupId)); // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+
+    const lastRowIndex = newRow.worksheet.rowCount;
+    let leftIndex = 0;
+    let rightIndex = 1;
+
+    while (rightIndex < columns.length) {
+      const {
+        groupId: leftGroupId,
+        parents: leftParents
+      } = row[leftIndex];
+      const {
+        groupId: rightGroupId,
+        parents: rightParents
+      } = row[rightIndex];
+      const areInSameGroup = leftGroupId === rightGroupId && leftParents.length === rightParents.length && leftParents.every((leftParent, index) => rightParents[index] === leftParent);
+
+      if (areInSameGroup) {
+        rightIndex += 1;
+      } else {
+        if (rightIndex - leftIndex > 1) {
+          worksheet.mergeCells(lastRowIndex, leftIndex + 1, lastRowIndex, rightIndex);
+        }
+
+        leftIndex = rightIndex;
+        rightIndex += 1;
+      }
+    }
+
+    if (rightIndex - leftIndex > 1) {
+      worksheet.mergeCells(lastRowIndex, leftIndex + 1, lastRowIndex, rightIndex);
+    }
+  }
+};
+
 export async function buildExcel(options, api) {
   const {
     columns,
     rowIds,
     includeHeaders,
+    includeColumnGroupsHeaders,
     valueOptionsSheetName,
     exceljsPreProcess,
     exceljsPostProcess,
@@ -196,6 +264,10 @@ export async function buildExcel(options, api) {
     });
   }
 
+  if (includeColumnGroupsHeaders) {
+    addColumnGroupingHeaders(worksheet, columns, api);
+  }
+
   if (includeHeaders) {
     worksheet.addRow(columns.map(column => column.headerName || column.field));
   }

package/hooks/features/export/useGridExcelExport.js

@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridExcelExport = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridExcelExport');
   const getDataAsExcel = React.useCallback((options = {}) => {
-    var _options$getRowsToExp, _options$includeHeade;
+    var _options$getRowsToExp, _options$includeHeade, _options$includeColum;
 
     logger.debug(`Get data as excel`);
     const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport;
@@ -30,6 +30,7 @@ export const useGridExcelExport = apiRef => {
       columns: exportedColumns,
       rowIds: exportedRowIds,
       includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
       valueOptionsSheetName: (options == null ? void 0 : options.valueOptionsSheetName) || 'Options',
       columnsStyles: options == null ? void 0 : options.columnsStyles,
       exceljsPreProcess: options == null ? void 0 : options.exceljsPreProcess,

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

@@ -1,3 +1,4 @@
+import { GridColDef } from '@mui/x-data-grid';
 export declare type GridRowGroupingModel = string[];
 export interface GridRowGroupingState {
     model: GridRowGroupingModel;
@@ -10,7 +11,7 @@ export interface GridRowGroupingInternalCache {
      * Tracks the model on the last pre-processing
      * Allows to check if we need to re-build the grouping columns when the grid upserts a column.
      */
-    sanitizedModelOnLastRowTreeCreation: GridRowGroupingModel;
+    rulesOnLastRowTreeCreation: GridGroupingRules;
 }
 export interface GridRowGroupingApi {
     /**
@@ -36,3 +37,8 @@ export interface GridRowGroupingApi {
      */
     setRowGroupingCriteriaIndex: (groupingCriteriaField: string, groupingIndex: number) => void;
 }
+export interface GridGroupingRule<R = any, V = any> {
+    field: string;
+    groupingValueGetter?: GridColDef<R, V>['groupingValueGetter'];
+}
+export declare type GridGroupingRules<R = any> = GridGroupingRule<R>[];

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { GridRowTreeConfig, GridFilterState, GridFilterModel } from '@mui/x-data-grid-pro';
-import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid-pro/internals';
+import { GridAggregatedFilterItemApplier, GridColumnRawLookup, GridApiCommunity } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-import { GridRowGroupingModel } from './gridRowGroupingInterfaces';
+import { GridGroupingRules, GridRowGroupingModel } from './gridRowGroupingInterfaces';
 import { GridStatePremium } from '../../../models/gridStatePremium';
 import { GridApiPremium } from '../../../models/gridApiPremium';
 export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
@@ -14,6 +14,7 @@ interface FilterRowTreeFromTreeDataParams {
     rowTree: GridRowTreeConfig;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;
+    apiRef: React.MutableRefObject<GridApiCommunity>;
 }
 /**
  * A leaf is visible if it passed the filter
@@ -25,4 +26,12 @@ export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFro
 export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps['groupingColDef'], fields: string[]) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePremium) => GridStatePremium;
 export declare const setStrategyAvailability: (apiRef: React.MutableRefObject<GridApiPremium>, disableRowGrouping: boolean) => void;
+export declare const getGroupingRules: ({ sanitizedRowGroupingModel, columnsLookup, }: {
+    sanitizedRowGroupingModel: GridRowGroupingModel;
+    columnsLookup: GridColumnRawLookup;
+}) => GridGroupingRules<any>;
+/**
+ * Compares two sets of grouping rules to determine if they are equal or not.
+ */
+export declare const areGroupingRulesEqual: (previousValue: GridGroupingRules | undefined, newValue: GridGroupingRules<any>) => boolean;
 export {};

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

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

package/hooks/features/rowGrouping/useGridRowGrouping.js

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