@mui/x-data-grid-premium 8.15.0 → 8.16.0

package/CHANGELOG.md

@@ -5,6 +5,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.16.0
+
+_Oct 29, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add `brush` zoom interaction to charts
+- 🔁 [Server-side update](https://mui.com/x/react-data-grid/server-side-data/#updating-server-side-data) in a grid with tree data/row grouping and aggregation will trigger re-fetch for all parent levels of that row to update aggregated values. See the [demo](https://mui.com/x/react-data-grid/server-side-data/aggregation/#usage-with-tree-data).
+
+Special thanks go out to the community members for their valuable contributions:
+@felix-wg, @frncesc, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @MBilalShafi, @mbrookes, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.16.0`
+
+- [DataGrid] Ignore `Ctrl+A` key combination for the row selection in the community version (#20110) @felix-wg
+- [DataGrid][l10n] Improve Spanish (es-ES) locale (#20134) @frncesc
+
+#### `@mui/x-data-grid-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.16.0`, plus:
+
+- [DataGridPro] Add explicit return type to `getVisibleRowsLookup()` to fix the build with `tsc` (#20116) @arminmeh
+- [DataGridPro] Retain the expansion state with expansion configuration props (#20126) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.16.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.16.0`, plus:
+
+- [DataGridPremium] Export and restore chart integration state (#20079) @arminmeh
+- [DataGridPremium] Fix grouping column `valueFormatter()` crash  (#20070) @sai6855
+- [DataGridPremium] Refetch aggregation data after row update with server-side aggregation (#20039) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.16.0`
+
+- [pickers] Prevent blur event propagation on individual sections (#19825) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.16.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.16.0`
+
+- [charts] Allow tooltip to anchor items (#19954) @alexfauquette
+- [charts] Fix behavior of grouped axis (#20118) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+- [charts] Fix AreaChartConnectNulls demo height not correctly resizing (#20078) @sai6855
+- [charts] Fix charts resizing overflow (#20080) @alexfauquette
+- [charts] Fix tooltip not showing on first render (#20115) @bernardobelchior
+- [charts] Handle `undefined` id and color in series (#20087) @bernardobelchior
+- [charts] Remove `useMemo` from isZoomOn*Enabled and isPanOn*Enabled hooks (#20132) @Copilot
+- [charts] Use static data for perf (#20072) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+
+#### `@mui/x-charts-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.16.0`, plus:
+
+- [charts-pro] Add `brush` zoom interaction (#19899) @JCQuintas
+- [charts-pro] Add sankey performance check (#20069) @JCQuintas
+
+#### `@mui/x-charts-premium@8.16.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.16.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.16.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.16.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.16.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Setup eslint compat plugin (#20105) @brijeshb42
+- [code-infra] Improve store types (#20129) @JCQuintas
+- [docs] Update the callout in `rows` prop documentation (#20127) @MBilalShafi
+- [docs-infra] Refine changelog contributor acknowledgment messages (#20123) @mbrookes
+
+### Miscellaneous
+
+- [x-telemetry] Skip telemetry tests on browser mode (#20122) @bernardobelchior
+
 ## 8.15.0
 
 _Oct 23, 2025_

package/DataGridPremium/DataGridPremium.js

@@ -25,6 +25,7 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRowsOverridableMethods = require("../hooks/features/rows/useGridRowsOverridableMethods");
 var _useGridParamsOverridableMethods = require("../hooks/features/rows/useGridParamsOverridableMethods");
 var _sidebar2 = require("../hooks/features/sidebar");
+var _useGridCellEditable = require("../hooks/features/editing/useGridCellEditable");
 var _jsxRuntime = require("react/jsx-runtime");
 const configuration = {
   hooks: {
@@ -44,11 +45,12 @@ const configuration = {
       }
       return (0, _internals.getRowValue)(row, column, apiRef);
     },
+    useIsCellEditable: _useGridCellEditable.useIsCellEditable,
     useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods,
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2MTE3NzYwMDAwMA==";
+const releaseInfo = "MTc2MTY5NjAwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -120,7 +120,7 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridColumnSpanning)(apiRef);
   (0, _internals.useGridColumnGrouping)(apiRef, props);
   (0, _useGridClipboardImport.useGridClipboardImport)(apiRef, props);
-  (0, _internals.useGridEditing)(apiRef, props);
+  (0, _internals.useGridEditing)(apiRef, props, configuration);
   (0, _internals.useGridFocus)(apiRef, props);
   (0, _internals.useGridPreferencesPanel)(apiRef, props);
   (0, _internals.useGridFilter)(apiRef, props, configuration);

package/esm/DataGridPremium/DataGridPremium.js

@@ -18,6 +18,7 @@ import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 import { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
 import { gridSidebarOpenSelector } from "../hooks/features/sidebar/index.js";
+import { useIsCellEditable } from "../hooks/features/editing/useGridCellEditable.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
@@ -37,11 +38,12 @@ const configuration = {
       }
       return getRowValue(row, column, apiRef);
     },
+    useIsCellEditable,
     useGridRowsOverridableMethods,
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2MTE3NzYwMDAwMA==";
+const releaseInfo = "MTc2MTY5NjAwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -112,7 +112,7 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridClipboardImport(apiRef, props);
-  useGridEditing(apiRef, props);
+  useGridEditing(apiRef, props, configuration);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props, configuration);

package/esm/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.d.ts

@@ -3,6 +3,12 @@ import { GridStatePremium } from "../../../models/gridStatePremium.js";
 export declare const gridChartsIntegrationActiveChartIdSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => string;
+export declare const gridChartsIntegrationChartsLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => Record<string, {
+  dimensions: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+  values: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+}>;
 export declare const gridChartsPanelOpenSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => boolean;

package/esm/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js

@@ -3,6 +3,7 @@ import { gridSidebarStateSelector, GridSidebarValue } from "../sidebar/index.js"
 import { gridPivotModelSelector } from "../pivoting/gridPivotingSelectors.js";
 const gridChartsIntegrationStateSelector = createRootSelector(state => state.chartsIntegration);
 export const gridChartsIntegrationActiveChartIdSelector = createSelector(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.activeChartId);
+export const gridChartsIntegrationChartsLookupSelector = createSelector(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.charts);
 export const gridChartsPanelOpenSelector = createSelector(gridSidebarStateSelector, sidebar => sidebar.value === GridSidebarValue.Charts && sidebar.open);
 export const gridChartableColumnsSelector = createSelectorMemoized(gridColumnLookupSelector, gridPivotActiveSelector, gridPivotModelSelector, (columns, pivotActive, pivotModel) => {
   let chartableColumns = Object.values(columns).filter(column => column.chartable);

package/esm/hooks/features/chartsIntegration/useGridChartsIntegration.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { ChartState } from "../../../models/gridChartsIntegration.js";
 export declare const EMPTY_CHART_INTEGRATION_CONTEXT_STATE: ChartState;
 export declare const chartsIntegrationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'chartsIntegration' | 'initialState' | 'activeChartId' | 'rowGroupingModel' | 'pivotModel' | 'experimentalFeatures'>, GridPrivateApiPremium>;

package/esm/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -6,7 +6,7 @@ import debounce from '@mui/utils/debounce';
 import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector } from '@mui/x-data-grid-pro';
 import { useGridApiMethod, useGridEvent, gridColumnLookupSelector, runIf, gridPivotActiveSelector, useGridRegisterPipeProcessor, gridColumnFieldsSelector, gridFilteredSortedDepthRowEntriesSelector, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from '@mui/x-data-grid-pro/internals';
 import { getRowGroupingFieldFromGroupingCriteria } from "../rowGrouping/gridRowGroupingUtils.js";
-import { gridChartsPanelOpenSelector, gridChartsDimensionsSelector, gridChartsValuesSelector, gridChartsIntegrationActiveChartIdSelector, gridChartableColumnsSelector } from "./gridChartsIntegrationSelectors.js";
+import { gridChartsPanelOpenSelector, gridChartsDimensionsSelector, gridChartsValuesSelector, gridChartsIntegrationActiveChartIdSelector, gridChartableColumnsSelector, gridChartsIntegrationChartsLookupSelector } from "./gridChartsIntegrationSelectors.js";
 import { useGridChartsIntegrationContext } from "../../utils/useGridChartIntegration.js";
 import { isBlockedForSection } from "./utils.js";
 import { gridRowGroupingSanitizedModelSelector } from "../rowGrouping/gridRowGroupingSelector.js";
@@ -150,19 +150,21 @@ export const useGridChartsIntegration = (apiRef, props) => {
     if (!pivotActive && visibleValues.current[activeChartId] && rowGroupingModel.length > 0) {
       // with row grouping add the aggregation model to the newly added value dataset
       const aggregatedFields = Object.keys(aggregationModel);
+      const aggregationsToAdd = {};
       visibleValues.current[activeChartId].forEach(item => {
         const hasAggregation = aggregatedFields.includes(item.field);
         if (!hasAggregation) {
-          apiRef.current.setAggregationModel(_extends({}, aggregationModel, {
-            // use the first available aggregation function
-            [item.field]: getAvailableAggregationFunctions({
-              aggregationFunctions: props.aggregationFunctions,
-              colDef: item,
-              isDataSource: !!props.dataSource
-            })[0]
-          }));
+          // use the first available aggregation function
+          aggregationsToAdd[item.field] = getAvailableAggregationFunctions({
+            aggregationFunctions: props.aggregationFunctions,
+            colDef: item,
+            isDataSource: !!props.dataSource
+          })[0];
         }
       });
+      if (Object.keys(aggregationsToAdd).length > 0) {
+        apiRef.current.setAggregationModel(_extends({}, aggregationModel, aggregationsToAdd));
+      }
     }
   }, [apiRef, props.aggregationFunctions, props.dataSource, activeChartId, pivotActive, aggregationModel]);
   const handleRowDataUpdate = React.useCallback(chartIds => {
@@ -296,8 +298,8 @@ export const useGridChartsIntegration = (apiRef, props) => {
       }
     });
     updateOtherModels();
-    handleRowDataUpdate(chartIds);
-  }, [apiRef, chartStateLookup, pivotActive, pivotModel, handleRowDataUpdate, updateOtherModels]);
+    debouncedHandleRowDataUpdate(chartIds);
+  }, [apiRef, chartStateLookup, pivotActive, pivotModel, debouncedHandleRowDataUpdate, updateOtherModels]);
   const debouncedHandleColumnDataUpdate = React.useMemo(() => debounce(handleColumnDataUpdate, 0), [handleColumnDataUpdate]);
   const setChartsPanelOpen = React.useCallback(callback => {
     if (!isChartsIntegrationAvailable) {
@@ -496,6 +498,67 @@ export const useGridChartsIntegration = (apiRef, props) => {
   useGridEvent(apiRef, 'pivotModeChange', runIf(isChartsIntegrationAvailable, () => debouncedHandleColumnDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'filteredRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'sortedRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
+  const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
+    if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
+      return prevState;
+    }
+    const currentActiveChartId = gridChartsIntegrationActiveChartIdSelector(apiRef);
+    const chartsLookup = gridChartsIntegrationChartsLookupSelector(apiRef);
+    const integrationContextToExport = Object.fromEntries(Object.entries(chartStateLookup).map(([chartId, chartState]) => [chartId,
+    // keep only the state that is controlled by the user, drop the data and labels
+    {
+      synced: chartState.synced,
+      type: chartState.type,
+      configuration: chartState.configuration
+    }]));
+    const shouldExportChartState =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !exportContext.exportOnlyDirtyModels ||
+    // Always export if the chart state has been initialized
+    props.initialState?.chartsIntegration != null ||
+    // Export if the chart model or context is not empty
+    Object.keys(chartsLookup).length > 0 || Object.keys(integrationContextToExport).length > 0;
+    if (!shouldExportChartState) {
+      return prevState;
+    }
+    const chartStateToExport = {
+      activeChartId: currentActiveChartId,
+      charts: chartsLookup,
+      // add a custom prop to keep the integration context in the exported state
+      integrationContext: integrationContextToExport
+    };
+    return _extends({}, prevState, {
+      chartsIntegration: chartStateToExport
+    });
+  }, [apiRef, chartStateLookup, props.chartsIntegration, props.experimentalFeatures?.charts, props.initialState?.chartsIntegration]);
+  const stateRestorePreProcessing = React.useCallback((params, restoreContext) => {
+    const chartsRestoreState = restoreContext.stateToRestore.chartsIntegration;
+    if (!chartsRestoreState) {
+      return params;
+    }
+    const {
+      activeChartId: activeChartIdToRestore,
+      charts: chartsToRestore,
+      integrationContext
+    } = chartsRestoreState;
+    if (activeChartIdToRestore === undefined || chartsToRestore === undefined || Object.keys(chartsToRestore).length === 0) {
+      return params;
+    }
+    apiRef.current.setState(_extends({}, apiRef.current.state, {
+      chartsIntegration: {
+        activeChartId: activeChartIdToRestore,
+        charts: chartsToRestore
+      }
+    }));
+
+    // restore the integration context for each chart
+    Object.entries(integrationContext).forEach(([chartId, chartContextState]) => {
+      setChartState(chartId, chartContextState);
+    });
+    return params;
+  }, [apiRef, setChartState]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   React.useEffect(() => {
     if (!activeChartId && availableChartIds.length > 0) {
       setActiveChartId(availableChartIds[0]);

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

@@ -2,11 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridEvent as addEventHandler, useGridApiMethod, GRID_ROOT_GROUP_ID, useGridEvent } from '@mui/x-data-grid-pro';
-import { useGridDataSourceBasePro, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor, gridPivotInitialColumnsSelector, runIf, gridPivotActiveSelector, GridStrategyGroup, DataSourceRowsUpdateStrategy } from '@mui/x-data-grid-pro/internals';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useGridEvent as addEventHandler, useGridApiMethod, GRID_ROOT_GROUP_ID, useGridEvent, gridRowTreeSelector } from '@mui/x-data-grid-pro';
+import { useGridDataSourceBasePro, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor, gridPivotInitialColumnsSelector, runIf, gridPivotActiveSelector, GridStrategyGroup, DataSourceRowsUpdateStrategy, getGroupKeys } from '@mui/x-data-grid-pro/internals';
 import { gridPivotModelSelector } from "../pivoting/gridPivotingSelectors.js";
-import { getPropsOverrides } from "./utils.js";
+import { getPropsOverrides, fetchParents } from "./utils.js";
 import { gridRowGroupingSanitizedModelSelector } from "../rowGrouping/gridRowGroupingSelector.js";
+import { gridAggregationModelSelector } from "../aggregation/gridAggregationSelectors.js";
 function getKeyPremium(params) {
   return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.pivotModel ? {} : params.aggregationModel, params.pivotModel]);
 }
@@ -16,18 +18,32 @@ const options = {
   }
 };
 export const useGridDataSourcePremium = (apiRef, props) => {
+  const aggregationModel = gridAggregationModelSelector(apiRef);
   const groupingModelSize = gridRowGroupingSanitizedModelSelector(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
     const targetStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? DataSourceRowsUpdateStrategy.GroupedData : DataSourceRowsUpdateStrategy.Default;
     apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, targetStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
+  const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    if (updatedRow && !isDeepEqual(updatedRow, params.previousRow)) {
+      // Reset the outdated cache, only if the row is _actually_ updated
+      apiRef.current.dataSource.cache.clear();
+    }
+    const groupKeys = getGroupKeys(rowTree, params.rowId);
+    apiRef.current.updateNestedRows([updatedRow], groupKeys);
+    // To refresh the aggregation values of all parent rows and the footer row, recursively re-fetch all parent levels
+    fetchParents(rowTree, params.rowId, apiRef.current.dataSource.fetchRows);
+  }, [apiRef]);
   const {
     api,
     debouncedFetchRows,
     flatTreeStrategyProcessor,
     groupedDataStrategyProcessor,
     events
-  } = useGridDataSourceBasePro(apiRef, props, options);
+  } = useGridDataSourceBasePro(apiRef, props, _extends({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
+    handleEditRow: handleEditRowWithAggregation
+  } : {}, options));
   const aggregateRowRef = React.useRef({});
   const initialColumns = gridPivotInitialColumnsSelector(apiRef);
   const pivotActive = gridPivotActiveSelector(apiRef);

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

@@ -1,6 +1,7 @@
 import type { RefObject } from '@mui/x-internals/types';
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef, GridRowId, GridRowTreeConfig } from '@mui/x-data-grid-pro';
 import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridPivotingDynamicPropsOverrides, PivotingColDefCallback, GridPivotModel } from "../pivoting/gridPivotingInterfaces.js";
 import type { GridGetRowsResponsePivotColumn } from "./models.js";
-export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const fetchParents: (rowTree: GridRowTreeConfig, rowId: GridRowId, fetchHandler: (id?: GridRowId) => Promise<void>) => Promise<void[]>;

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridStringOrNumberComparator } from '@mui/x-data-grid-pro';
+import { gridStringOrNumberComparator, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 export const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef) => {
   const visiblePivotColumns = pivotModel.columns.filter(column => !column.hidden);
   const visiblePivotValues = pivotModel.values.filter(value => !value.hidden);
@@ -137,4 +137,16 @@ export const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, init
     columnGroupingModel,
     aggregationModel
   };
+};
+export const fetchParents = (rowTree, rowId, fetchHandler) => {
+  const parents = [];
+
+  // collect all parents ids
+  let currentId = rowId;
+  while (currentId !== undefined && currentId !== GRID_ROOT_GROUP_ID) {
+    const parentId = rowTree[currentId].parent;
+    parents.push(parentId);
+    currentId = parentId;
+  }
+  return Promise.all(parents.reverse().map(fetchHandler));
 };

package/esm/hooks/features/editing/useGridCellEditable.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from '@mui/x-internals/types';
+import { CellEditableConditionFn } from '@mui/x-data-grid-pro/internals';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+export declare const useIsCellEditable: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => CellEditableConditionFn;

package/esm/hooks/features/editing/useGridCellEditable.js

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import { useIsCellEditable as useIsCellEditableCommunity } from '@mui/x-data-grid-pro/internals';
+import { gridAggregationModelSelector } from "../aggregation/gridAggregationSelectors.js";
+
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+export const useIsCellEditable = (apiRef, props) => {
+  const isCellEditableCommunity = useIsCellEditableCommunity();
+  return React.useCallback(params => {
+    const isCellEditable = isCellEditableCommunity(params);
+
+    // If the cell is not editable by the community hook, return false immediately
+    if (!isCellEditable) {
+      return false;
+    }
+
+    // If the data source is not used or aggregation is disabled or both tree data and row grouping are disabled, return the community hook result
+    if (!props.dataSource || props.disableAggregation || !props.treeData && props.disableRowGrouping) {
+      return isCellEditable;
+    }
+
+    // If the cell is not a part of the aggregation model, return the community hook result
+    const aggregationModelFields = Object.keys(gridAggregationModelSelector(apiRef));
+    if (!aggregationModelFields.includes(params.field)) {
+      return isCellEditable;
+    }
+
+    // The cell is a part of the aggregation model and it is retrieved from the server-side data.
+    // Allow editing only for the non-grouped rows.
+    return params.rowNode.type !== 'group';
+  }, [apiRef, props.dataSource, props.treeData, props.disableAggregation, props.disableRowGrouping, isCellEditableCommunity]);
+};

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

@@ -84,12 +84,12 @@ function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, r
       const rowId = gridRowIdSelector(apiRef, row);
       const rowNode = gridRowNodeSelector(apiRef, rowId);
       if (rowNode?.type === 'group') {
-        const originalColDef = columnsLookup[rowNode.groupingField];
-        if (originalColDef.type === 'singleSelect') {
+        const originalColDef = rowNode.groupingField ? columnsLookup[rowNode.groupingField] : null;
+        if (originalColDef?.type === 'singleSelect') {
           // the default valueFormatter of a singleSelect colDef won't work with the grouping column values
           return value;
         }
-        const columnValueFormatter = originalColDef.valueFormatter;
+        const columnValueFormatter = originalColDef?.valueFormatter;
         if (typeof columnValueFormatter === 'function') {
           return columnValueFormatter(value, row, column, apiRef);
         }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.15.0
+ * @mui/x-data-grid-premium v8.16.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.d.ts

@@ -3,6 +3,12 @@ import { GridStatePremium } from "../../../models/gridStatePremium.js";
 export declare const gridChartsIntegrationActiveChartIdSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => string;
+export declare const gridChartsIntegrationChartsLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => Record<string, {
+  dimensions: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+  values: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+}>;
 export declare const gridChartsPanelOpenSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => boolean;

package/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridChartsValuesSelector = exports.gridChartsPanelOpenSelector = exports.gridChartsIntegrationActiveChartIdSelector = exports.gridChartsDimensionsSelector = exports.gridChartableColumnsSelector = void 0;
+exports.gridChartsValuesSelector = exports.gridChartsPanelOpenSelector = exports.gridChartsIntegrationChartsLookupSelector = exports.gridChartsIntegrationActiveChartIdSelector = exports.gridChartsDimensionsSelector = exports.gridChartableColumnsSelector = void 0;
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _sidebar = require("../sidebar");
 var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 const gridChartsIntegrationStateSelector = (0, _internals.createRootSelector)(state => state.chartsIntegration);
 const gridChartsIntegrationActiveChartIdSelector = exports.gridChartsIntegrationActiveChartIdSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.activeChartId);
+const gridChartsIntegrationChartsLookupSelector = exports.gridChartsIntegrationChartsLookupSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.charts);
 const gridChartsPanelOpenSelector = exports.gridChartsPanelOpenSelector = (0, _internals.createSelector)(_sidebar.gridSidebarStateSelector, sidebar => sidebar.value === _sidebar.GridSidebarValue.Charts && sidebar.open);
 const gridChartableColumnsSelector = exports.gridChartableColumnsSelector = (0, _internals.createSelectorMemoized)(_internals.gridColumnLookupSelector, _internals.gridPivotActiveSelector, _gridPivotingSelectors.gridPivotModelSelector, (columns, pivotActive, pivotModel) => {
   let chartableColumns = Object.values(columns).filter(column => column.chartable);

package/hooks/features/chartsIntegration/useGridChartsIntegration.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { ChartState } from "../../../models/gridChartsIntegration.js";
 export declare const EMPTY_CHART_INTEGRATION_CONTEXT_STATE: ChartState;
 export declare const chartsIntegrationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'chartsIntegration' | 'initialState' | 'activeChartId' | 'rowGroupingModel' | 'pivotModel' | 'experimentalFeatures'>, GridPrivateApiPremium>;

package/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -158,19 +158,21 @@ const useGridChartsIntegration = (apiRef, props) => {
     if (!pivotActive && visibleValues.current[activeChartId] && rowGroupingModel.length > 0) {
       // with row grouping add the aggregation model to the newly added value dataset
       const aggregatedFields = Object.keys(aggregationModel);
+      const aggregationsToAdd = {};
       visibleValues.current[activeChartId].forEach(item => {
         const hasAggregation = aggregatedFields.includes(item.field);
         if (!hasAggregation) {
-          apiRef.current.setAggregationModel((0, _extends2.default)({}, aggregationModel, {
-            // use the first available aggregation function
-            [item.field]: (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
-              aggregationFunctions: props.aggregationFunctions,
-              colDef: item,
-              isDataSource: !!props.dataSource
-            })[0]
-          }));
+          // use the first available aggregation function
+          aggregationsToAdd[item.field] = (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
+            aggregationFunctions: props.aggregationFunctions,
+            colDef: item,
+            isDataSource: !!props.dataSource
+          })[0];
         }
       });
+      if (Object.keys(aggregationsToAdd).length > 0) {
+        apiRef.current.setAggregationModel((0, _extends2.default)({}, aggregationModel, aggregationsToAdd));
+      }
     }
   }, [apiRef, props.aggregationFunctions, props.dataSource, activeChartId, pivotActive, aggregationModel]);
   const handleRowDataUpdate = React.useCallback(chartIds => {
@@ -304,8 +306,8 @@ const useGridChartsIntegration = (apiRef, props) => {
       }
     });
     updateOtherModels();
-    handleRowDataUpdate(chartIds);
-  }, [apiRef, chartStateLookup, pivotActive, pivotModel, handleRowDataUpdate, updateOtherModels]);
+    debouncedHandleRowDataUpdate(chartIds);
+  }, [apiRef, chartStateLookup, pivotActive, pivotModel, debouncedHandleRowDataUpdate, updateOtherModels]);
   const debouncedHandleColumnDataUpdate = React.useMemo(() => (0, _debounce.default)(handleColumnDataUpdate, 0), [handleColumnDataUpdate]);
   const setChartsPanelOpen = React.useCallback(callback => {
     if (!isChartsIntegrationAvailable) {
@@ -504,6 +506,67 @@ const useGridChartsIntegration = (apiRef, props) => {
   (0, _internals.useGridEvent)(apiRef, 'pivotModeChange', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleColumnDataUpdate(syncedChartIds)));
   (0, _internals.useGridEvent)(apiRef, 'filteredRowsSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   (0, _internals.useGridEvent)(apiRef, 'sortedRowsSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
+  const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
+    if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
+      return prevState;
+    }
+    const currentActiveChartId = (0, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector)(apiRef);
+    const chartsLookup = (0, _gridChartsIntegrationSelectors.gridChartsIntegrationChartsLookupSelector)(apiRef);
+    const integrationContextToExport = Object.fromEntries(Object.entries(chartStateLookup).map(([chartId, chartState]) => [chartId,
+    // keep only the state that is controlled by the user, drop the data and labels
+    {
+      synced: chartState.synced,
+      type: chartState.type,
+      configuration: chartState.configuration
+    }]));
+    const shouldExportChartState =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !exportContext.exportOnlyDirtyModels ||
+    // Always export if the chart state has been initialized
+    props.initialState?.chartsIntegration != null ||
+    // Export if the chart model or context is not empty
+    Object.keys(chartsLookup).length > 0 || Object.keys(integrationContextToExport).length > 0;
+    if (!shouldExportChartState) {
+      return prevState;
+    }
+    const chartStateToExport = {
+      activeChartId: currentActiveChartId,
+      charts: chartsLookup,
+      // add a custom prop to keep the integration context in the exported state
+      integrationContext: integrationContextToExport
+    };
+    return (0, _extends2.default)({}, prevState, {
+      chartsIntegration: chartStateToExport
+    });
+  }, [apiRef, chartStateLookup, props.chartsIntegration, props.experimentalFeatures?.charts, props.initialState?.chartsIntegration]);
+  const stateRestorePreProcessing = React.useCallback((params, restoreContext) => {
+    const chartsRestoreState = restoreContext.stateToRestore.chartsIntegration;
+    if (!chartsRestoreState) {
+      return params;
+    }
+    const {
+      activeChartId: activeChartIdToRestore,
+      charts: chartsToRestore,
+      integrationContext
+    } = chartsRestoreState;
+    if (activeChartIdToRestore === undefined || chartsToRestore === undefined || Object.keys(chartsToRestore).length === 0) {
+      return params;
+    }
+    apiRef.current.setState((0, _extends2.default)({}, apiRef.current.state, {
+      chartsIntegration: {
+        activeChartId: activeChartIdToRestore,
+        charts: chartsToRestore
+      }
+    }));
+
+    // restore the integration context for each chart
+    Object.entries(integrationContext).forEach(([chartId, chartContextState]) => {
+      setChartState(chartId, chartContextState);
+    });
+    return params;
+  }, [apiRef, setChartState]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   React.useEffect(() => {
     if (!activeChartId && availableChartIds.length > 0) {
       setActiveChartId(availableChartIds[0]);

package/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -9,11 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridDataSourcePremium = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 var _utils = require("./utils");
 var _gridRowGroupingSelector = require("../rowGrouping/gridRowGroupingSelector");
+var _gridAggregationSelectors = require("../aggregation/gridAggregationSelectors");
 function getKeyPremium(params) {
   return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.pivotModel ? {} : params.aggregationModel, params.pivotModel]);
 }
@@ -23,18 +25,32 @@ const options = {
   }
 };
 const useGridDataSourcePremium = (apiRef, props) => {
+  const aggregationModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
   const groupingModelSize = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
     const targetStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? _internals.DataSourceRowsUpdateStrategy.GroupedData : _internals.DataSourceRowsUpdateStrategy.Default;
     apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, targetStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
+  const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
+    const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+    if (updatedRow && !(0, _isDeepEqual.isDeepEqual)(updatedRow, params.previousRow)) {
+      // Reset the outdated cache, only if the row is _actually_ updated
+      apiRef.current.dataSource.cache.clear();
+    }
+    const groupKeys = (0, _internals.getGroupKeys)(rowTree, params.rowId);
+    apiRef.current.updateNestedRows([updatedRow], groupKeys);
+    // To refresh the aggregation values of all parent rows and the footer row, recursively re-fetch all parent levels
+    (0, _utils.fetchParents)(rowTree, params.rowId, apiRef.current.dataSource.fetchRows);
+  }, [apiRef]);
   const {
     api,
     debouncedFetchRows,
     flatTreeStrategyProcessor,
     groupedDataStrategyProcessor,
     events
-  } = (0, _internals.useGridDataSourceBasePro)(apiRef, props, options);
+  } = (0, _internals.useGridDataSourceBasePro)(apiRef, props, (0, _extends2.default)({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
+    handleEditRow: handleEditRowWithAggregation
+  } : {}, options));
   const aggregateRowRef = React.useRef({});
   const initialColumns = (0, _internals.gridPivotInitialColumnsSelector)(apiRef);
   const pivotActive = (0, _internals.gridPivotActiveSelector)(apiRef);

package/hooks/features/dataSource/utils.d.ts

@@ -1,6 +1,7 @@
 import type { RefObject } from '@mui/x-internals/types';
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef, GridRowId, GridRowTreeConfig } from '@mui/x-data-grid-pro';
 import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridPivotingDynamicPropsOverrides, PivotingColDefCallback, GridPivotModel } from "../pivoting/gridPivotingInterfaces.js";
 import type { GridGetRowsResponsePivotColumn } from "./models.js";
-export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const fetchParents: (rowTree: GridRowTreeConfig, rowId: GridRowId, fetchHandler: (id?: GridRowId) => Promise<void>) => Promise<void[]>;

package/hooks/features/dataSource/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPropsOverrides = void 0;
+exports.getPropsOverrides = exports.fetchParents = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef) => {
@@ -145,4 +145,17 @@ const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColu
     aggregationModel
   };
 };
-exports.getPropsOverrides = getPropsOverrides;
+exports.getPropsOverrides = getPropsOverrides;
+const fetchParents = (rowTree, rowId, fetchHandler) => {
+  const parents = [];
+
+  // collect all parents ids
+  let currentId = rowId;
+  while (currentId !== undefined && currentId !== _xDataGridPro.GRID_ROOT_GROUP_ID) {
+    const parentId = rowTree[currentId].parent;
+    parents.push(parentId);
+    currentId = parentId;
+  }
+  return Promise.all(parents.reverse().map(fetchHandler));
+};
+exports.fetchParents = fetchParents;

package/hooks/features/editing/useGridCellEditable.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from '@mui/x-internals/types';
+import { CellEditableConditionFn } from '@mui/x-data-grid-pro/internals';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+export declare const useIsCellEditable: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => CellEditableConditionFn;

package/hooks/features/editing/useGridCellEditable.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsCellEditable = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _gridAggregationSelectors = require("../aggregation/gridAggregationSelectors");
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+const useIsCellEditable = (apiRef, props) => {
+  const isCellEditableCommunity = (0, _internals.useIsCellEditable)();
+  return React.useCallback(params => {
+    const isCellEditable = isCellEditableCommunity(params);
+
+    // If the cell is not editable by the community hook, return false immediately
+    if (!isCellEditable) {
+      return false;
+    }
+
+    // If the data source is not used or aggregation is disabled or both tree data and row grouping are disabled, return the community hook result
+    if (!props.dataSource || props.disableAggregation || !props.treeData && props.disableRowGrouping) {
+      return isCellEditable;
+    }
+
+    // If the cell is not a part of the aggregation model, return the community hook result
+    const aggregationModelFields = Object.keys((0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef));
+    if (!aggregationModelFields.includes(params.field)) {
+      return isCellEditable;
+    }
+
+    // The cell is a part of the aggregation model and it is retrieved from the server-side data.
+    // Allow editing only for the non-grouped rows.
+    return params.rowNode.type !== 'group';
+  }, [apiRef, props.dataSource, props.treeData, props.disableAggregation, props.disableRowGrouping, isCellEditableCommunity]);
+};
+exports.useIsCellEditable = useIsCellEditable;

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -92,12 +92,12 @@ function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, r
       const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
       const rowNode = (0, _xDataGridPro.gridRowNodeSelector)(apiRef, rowId);
       if (rowNode?.type === 'group') {
-        const originalColDef = columnsLookup[rowNode.groupingField];
-        if (originalColDef.type === 'singleSelect') {
+        const originalColDef = rowNode.groupingField ? columnsLookup[rowNode.groupingField] : null;
+        if (originalColDef?.type === 'singleSelect') {
           // the default valueFormatter of a singleSelect colDef won't work with the grouping column values
           return value;
         }
-        const columnValueFormatter = originalColDef.valueFormatter;
+        const columnValueFormatter = originalColDef?.valueFormatter;
         if (typeof columnValueFormatter === 'function') {
           return columnValueFormatter(value, row, column, apiRef);
         }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.15.0
+ * @mui/x-data-grid-premium v8.16.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "8.15.0",
+  "version": "8.16.0",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -38,10 +38,10 @@
     "@mui/x-internal-exceljs-fork": "^4.4.1",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-internals": "8.14.0",
-    "@mui/x-data-grid": "8.15.0",
-    "@mui/x-data-grid-pro": "8.15.0",
-    "@mui/x-license": "8.15.0"
+    "@mui/x-data-grid": "8.16.0",
+    "@mui/x-data-grid-pro": "8.16.0",
+    "@mui/x-license": "8.16.0",
+    "@mui/x-internals": "8.16.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",