@mui/x-data-grid-premium 8.13.1 → 8.14.0

package/CHANGELOG.md

@@ -5,6 +5,114 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.14.0
+
+_Oct 9, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 The [Chart zoom now supports the `pressAndDrag` gesture](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration). Pan by pressing and dragging.
+- 🔄 [Server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pivoting/) support for the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@djpremier, @Utkarsh-0304
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @prakhargupta1, @rita-codes, @noraleonte, @brijeshb42, @arminmeh, @michelengelen
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.14.0`
+
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#19658) @djpremier
+
+#### `@mui/x-data-grid-pro@8.14.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.14.0`.
+
+#### `@mui/x-data-grid-premium@8.14.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.14.0`, plus:
+
+- [DataGridPremium] Server-side pivoting (#19575) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.14.0`
+
+- [pickers] Fixed the extra element for the disabled date picker (#19387) @Utkarsh-0304
+- [pickers] Fix input `autoCapitalize` value for Firefox compatibility (#19285) @michelengelen
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#19658) @djpremier
+
+#### `@mui/x-date-pickers-pro@8.14.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.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.14.0`
+
+- [charts] Add `pressAndDrag` pan gesture (#19779) @JCQuintas
+- [charts] Allow `minPointers` and `maxPointers` to be configured by pointer type (#19794) @JCQuintas
+- [charts] Correct scale domain types (#19844) @bernardobelchior
+- [charts] Fix tooltip position when scrolling (#19857) @alexfauquette
+- [charts] Link item highlight with keyboard navigation (#19768) @alexfauquette
+- [charts] Refactor domain/scale selectors (#19832) @bernardobelchior
+- [charts] Remove min/max from ordinal configuration (#19789) @alexfauquette
+- [charts] Simplify axes filters selectors (#19833) @bernardobelchior
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#19658) @djpremier
+
+#### `@mui/x-charts-pro@8.14.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.14.0`.
+
+#### `@mui/x-charts-premium@8.14.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.14.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.14.0`
+
+- [tree view] Fix Tree View tooltip anchoring on overview page (#19806) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.14.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.14.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add overview section for pie chart (#19672) @prakhargupta1
+- [docs] Fix demo title knob keys (#19843) @JCQuintas
+- [docs] Hide UI elements of unsupported features in the data source demos (#19849) @arminmeh
+
+### Core
+
+- [code-infra] Cleanup unused dependencies (#19788) @brijeshb42
+- [code-infra] Fix pnpm-lock issue (#19861) @JCQuintas
+- [code-infra] Improve publishing docs (#19404) @Janpot
+- [code-infra] Remove tsconfig `baseUrl` (#19837) @Janpot
+- [code-infra] Support custom npm dist tags during release (#19803) @Janpot
+- [code-infra] Wait longer for print dialog (#19795) @JCQuintas
+- [code-infra] Replace `lodash` with `es-toolkit` (#19853) @bernardobelchior
+- [code-infra] Update release script PR checklist (#19785) @bernardobelchior
+- [code-infra] Remove remaining usages of `lodash` (#19864) @bernardobelchior
+- [docs-infra] Add `title` knob (#19792) @JCQuintas
+- [docs-infra] Fix missing key in title knob (#19804) @JCQuintas
+
+### Miscellaneous
+
+- [x-telemetry] Fix transpile issues (#19761) @hasdfa
+- [x-telemetry] Fix ref to deleted file (#19842) @JCQuintas
+
 ## 8.13.1
 
 _Oct 1, 2025_
@@ -222,7 +330,7 @@ We'd like to extend a big thank you to the 15 contributors who made this release
 
 ![Grid x Charts](https://github.com/user-attachments/assets/0817c36f-f87f-4688-8f30-fa0db638ca8c)
 
-  👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
+👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
 
 - ⌨️ Charts keyboard navigation
 - ⚡️ Charts: Add new `renderer="svg-batch"` prop to Scatter charts that provides improved performance for large datasets

package/DataGridPremium/DataGridPremium.js

@@ -48,7 +48,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
+const releaseInfo = "MTc1OTk2ODAwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -493,7 +493,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridColDef} column The column to generate derived columns for.
    * @param {GridLocaleTextApi['getLocaleText']} getLocaleText The function to get the locale text.
    * @returns {GridColDef[] | undefined} The derived columns.
-   * @default {defaultGetPivotDerivedColumns} Creates year and quarter columns for date columns.
+   * @default {defaultGetPivotDerivedColumns | undefined} Creates year and quarter columns for date columns if not in server side mode.
    */
   getPivotDerivedColumns: _propTypes.default.func,
   /**
@@ -1118,16 +1118,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   pivotActive: _propTypes.default.bool,
   /**
    * The column definition overrides for the columns generated by the pivoting feature.
-   * @param {string} originalColumnField The field of the original column.
-   * @param {string[]} columnGroupPath The path of the column groups the column belongs to.
-   * @returns {Partial<GridPivotingColDefOverrides> | undefined | void} The column definition overrides.
+   * Pass either a partial column definition to apply the same overrides to all pivot columns, or a callback to apply different overrides to each pivot column.
+   * For server-side pivoting, only the `PivotingColDefCallback` signature is supported, and the prop is required.
+   * @type {Partial<GridPivotingColDefOverrides> | PivotingColDefCallback}
    * @default undefined
+   * @throws {Error} If `undefined` and `dataSource` is provided.
    */
   pivotingColDef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     align: _propTypes.default.oneOf(['center', 'left', 'right']),
     cellClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
     description: _propTypes.default.string,
     display: _propTypes.default.oneOf(['flex', 'text']),
+    field: _propTypes.default.string,
     flex: _propTypes.default.number,
     headerAlign: _propTypes.default.oneOf(['center', 'left', 'right']),
     headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),

package/DataGridPremium/useDataGridPremiumProps.js

@@ -43,7 +43,6 @@ const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PREMIUM_PROPS_D
     return text.split(/\r\n|\n|\r/).map(row => row.split(delimiter));
   },
   disablePivoting: false,
-  getPivotDerivedColumns: _utils.defaultGetPivotDerivedColumns,
   aiAssistant: false,
   chartsIntegration: false
 });
@@ -62,7 +61,9 @@ const useDataGridPremiumProps = inProps => {
   }), [themedProps.slots]);
   return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.dataSource ? {
     aggregationFunctions: {}
-  } : {}, themedProps, {
+  } : {
+    getPivotDerivedColumns: _utils.defaultGetPivotDerivedColumns
+  }, themedProps, {
     localeText,
     slots
   }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);

package/components/GridDataSourceGroupingCriteriaCell.js

@@ -13,6 +13,7 @@ var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _gridRowGroupingSelector = require("../hooks/features/rowGrouping/gridRowGroupingSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -89,7 +90,12 @@ function GridDataSourceGroupingCriteriaCell(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const row = (0, _xDataGridPro.useGridSelector)(apiRef, _internals.gridRowSelector, id);
+  const pivotActive = (0, _xDataGridPro.useGridSelector)(apiRef, _internals.gridPivotActiveSelector);
+  const rowGroupingModelLength = (0, _xDataGridPro.useGridSelector)(apiRef, _gridRowGroupingSelector.gridRowGroupingModelSelector).length;
   const classes = useUtilityClasses(rootProps);
+  const shouldShowToggleContainer = !pivotActive || rowGroupingModelLength > 1;
+  // Do not allow expand/collapse the last grouping criteria cell when in pivot mode
+  const shouldShowToggleButton = !pivotActive || rowNode.depth < rowGroupingModelLength - 1;
   let descendantCount = 0;
   if (row) {
     descendantCount = rootProps.dataSource?.getChildrenCount?.(row) ?? 0;
@@ -112,9 +118,9 @@ function GridDataSourceGroupingCriteriaCell(props) {
     style: {
       marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : `calc(var(--DataGrid-cellOffsetMultiplier) * ${_internals.vars.spacing(rowNode.depth)})`
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [shouldShowToggleContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.toggle,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGroupingCriteriaCellIcon, {
+      children: shouldShowToggleButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGroupingCriteriaCellIcon, {
         id: id,
         field: field,
         rowNode: rowNode,

package/components/GridPremiumToolbar.js

@@ -15,7 +15,6 @@ var _export = require("./export");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _PivotPanelTrigger = require("./pivotPanel/PivotPanelTrigger");
-var _utils = require("../hooks/features/pivoting/utils");
 var _aiAssistantPanel = require("./aiAssistantPanel");
 var _ChartsPanelTrigger = require("./chartsPanel/ChartsPanelTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,7 +24,7 @@ function GridPremiumToolbar(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const additionalItems = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [(0, _utils.isPivotingAvailable)(rootProps) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PivotPanelTrigger.PivotPanelTrigger, {
+    children: [!rootProps.disablePivoting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PivotPanelTrigger.PivotPanelTrigger, {
       render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarPivot'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, (0, _extends2.default)({}, triggerProps, {

package/components/pivotPanel/GridPivotPanelField.js

@@ -140,8 +140,8 @@ function AggregationSelect({
   const availableAggregationFunctions = React.useMemo(() => (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
     aggregationFunctions: rootProps.aggregationFunctions,
     colDef,
-    isDataSource: false
-  }), [colDef, rootProps.aggregationFunctions]);
+    isDataSource: !!rootProps.dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.dataSource]);
   const handleClick = func => {
     apiRef.current.setPivotModel(prev => {
       return (0, _extends2.default)({}, prev, {
@@ -157,7 +157,7 @@ function AggregationSelect({
     });
     setAggregationMenuOpen(false);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+  return availableAggregationFunctions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, {
       label: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
         apiRef,
@@ -198,7 +198,7 @@ function AggregationSelect({
         }), func))
       }))
     })]
-  });
+  }) : null;
 }
 function GridPivotPanelField(props) {
   const {

package/esm/DataGridPremium/DataGridPremium.js

@@ -41,7 +41,7 @@ const configuration = {
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
+const releaseInfo = "MTc1OTk2ODAwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -486,7 +486,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridColDef} column The column to generate derived columns for.
    * @param {GridLocaleTextApi['getLocaleText']} getLocaleText The function to get the locale text.
    * @returns {GridColDef[] | undefined} The derived columns.
-   * @default {defaultGetPivotDerivedColumns} Creates year and quarter columns for date columns.
+   * @default {defaultGetPivotDerivedColumns | undefined} Creates year and quarter columns for date columns if not in server side mode.
    */
   getPivotDerivedColumns: PropTypes.func,
   /**
@@ -1111,16 +1111,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   pivotActive: PropTypes.bool,
   /**
    * The column definition overrides for the columns generated by the pivoting feature.
-   * @param {string} originalColumnField The field of the original column.
-   * @param {string[]} columnGroupPath The path of the column groups the column belongs to.
-   * @returns {Partial<GridPivotingColDefOverrides> | undefined | void} The column definition overrides.
+   * Pass either a partial column definition to apply the same overrides to all pivot columns, or a callback to apply different overrides to each pivot column.
+   * For server-side pivoting, only the `PivotingColDefCallback` signature is supported, and the prop is required.
+   * @type {Partial<GridPivotingColDefOverrides> | PivotingColDefCallback}
    * @default undefined
+   * @throws {Error} If `undefined` and `dataSource` is provided.
    */
   pivotingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     align: PropTypes.oneOf(['center', 'left', 'right']),
     cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     description: PropTypes.string,
     display: PropTypes.oneOf(['flex', 'text']),
+    field: PropTypes.string,
     flex: PropTypes.number,
     headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
     headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

package/esm/DataGridPremium/useDataGridPremiumProps.js

@@ -35,7 +35,6 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
     return text.split(/\r\n|\n|\r/).map(row => row.split(delimiter));
   },
   disablePivoting: false,
-  getPivotDerivedColumns: defaultGetPivotDerivedColumns,
   aiAssistant: false,
   chartsIntegration: false
 });
@@ -54,7 +53,9 @@ export const useDataGridPremiumProps = inProps => {
   }), [themedProps.slots]);
   return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.dataSource ? {
     aggregationFunctions: {}
-  } : {}, themedProps, {
+  } : {
+    getPivotDerivedColumns: defaultGetPivotDerivedColumns
+  }, themedProps, {
     localeText,
     slots
   }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);

package/esm/components/GridDataSourceGroupingCriteriaCell.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridPrivateApiContext, gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector, gridRowSelector, vars } from '@mui/x-data-grid-pro/internals';
+import { useGridPrivateApiContext, gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector, gridRowSelector, vars, gridPivotActiveSelector } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridRowGroupingModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -81,7 +82,12 @@ export function GridDataSourceGroupingCriteriaCell(props) {
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
   const row = useGridSelector(apiRef, gridRowSelector, id);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const rowGroupingModelLength = useGridSelector(apiRef, gridRowGroupingModelSelector).length;
   const classes = useUtilityClasses(rootProps);
+  const shouldShowToggleContainer = !pivotActive || rowGroupingModelLength > 1;
+  // Do not allow expand/collapse the last grouping criteria cell when in pivot mode
+  const shouldShowToggleButton = !pivotActive || rowNode.depth < rowGroupingModelLength - 1;
   let descendantCount = 0;
   if (row) {
     descendantCount = rootProps.dataSource?.getChildrenCount?.(row) ?? 0;
@@ -104,9 +110,9 @@ export function GridDataSourceGroupingCriteriaCell(props) {
     style: {
       marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(rowNode.depth)})`
     },
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [shouldShowToggleContainer && /*#__PURE__*/_jsx("div", {
       className: classes.toggle,
-      children: /*#__PURE__*/_jsx(GridGroupingCriteriaCellIcon, {
+      children: shouldShowToggleButton && /*#__PURE__*/_jsx(GridGroupingCriteriaCellIcon, {
         id: id,
         field: field,
         rowNode: rowNode,

package/esm/components/GridPremiumToolbar.js

@@ -8,7 +8,6 @@ import { ExportExcel } from "./export/index.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { PivotPanelTrigger } from "./pivotPanel/PivotPanelTrigger.js";
-import { isPivotingAvailable } from "../hooks/features/pivoting/utils.js";
 import { AiAssistantPanelTrigger } from "./aiAssistantPanel/index.js";
 import { ChartsPanelTrigger } from "./chartsPanel/ChartsPanelTrigger.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,7 +16,7 @@ export function GridPremiumToolbar(props) {
   const apiRef = useGridApiContext();
   const other = _objectWithoutPropertiesLoose(props, _excluded);
   const additionalItems = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isPivotingAvailable(rootProps) && /*#__PURE__*/_jsx(PivotPanelTrigger, {
+    children: [!rootProps.disablePivoting && /*#__PURE__*/_jsx(PivotPanelTrigger, {
       render: (triggerProps, state) => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarPivot'),
         children: /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {

package/esm/components/pivotPanel/GridPivotPanelField.js

@@ -133,8 +133,8 @@ function AggregationSelect({
   const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
     aggregationFunctions: rootProps.aggregationFunctions,
     colDef,
-    isDataSource: false
-  }), [colDef, rootProps.aggregationFunctions]);
+    isDataSource: !!rootProps.dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.dataSource]);
   const handleClick = func => {
     apiRef.current.setPivotModel(prev => {
       return _extends({}, prev, {
@@ -150,7 +150,7 @@ function AggregationSelect({
     });
     setAggregationMenuOpen(false);
   };
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  return availableAggregationFunctions.length > 0 ? /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseChip, {
       label: getAggregationFunctionLabel({
         apiRef,
@@ -191,7 +191,7 @@ function AggregationSelect({
         }), func))
       }))
     })]
-  });
+  }) : null;
 }
 function GridPivotPanelField(props) {
   const {

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

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
 import { gridColumnLookupSelector, useGridEvent, useGridApiMethod, useRunOncePerLoop, gridRenderContextSelector, gridVisibleColumnFieldsSelector, gridSortModelSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, gridPivotActiveSelector } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationLookupSelector, gridAggregationModelSelector } from "./gridAggregationSelectors.js";
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from "./gridAggregationUtils.js";
 import { createAggregationLookup, shouldApplySorting } from "./createAggregationLookup.js";
@@ -156,6 +156,7 @@ export const useGridAggregation = (apiRef, props) => {
    * EVENTS
    */
   const checkAggregationRulesDiff = React.useCallback(() => {
+    const pivotingActive = gridPivotActiveSelector(apiRef);
     const {
       rulesOnLastRowHydration,
       rulesOnLastColumnHydration
@@ -163,7 +164,7 @@ export const useGridAggregation = (apiRef, props) => {
     const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
 
     // Re-apply the row hydration to add / remove the aggregation footers
-    if (!props.dataSource && !areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
+    if ((!props.dataSource || pivotingActive) && !areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
       apiRef.current.requestPipeProcessorsApplication('hydrateRows');
       deferredApplyAggregation();
     }

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

@@ -1,5 +1,22 @@
-import type { GridColDef, GridRowId, GridValidRowModel, GridDataSource, GridGetRowsResponse, GridGetRowsParams, GridDataSourceApiBase, GridDataSourcePrivateApi } from '@mui/x-data-grid-pro';
+import type { GridColDef, GridRowId, GridValidRowModel, GridDataSource, GridGetRowsResponse, GridGetRowsParams, GridDataSourceApiBase, GridDataSourcePrivateApi, GridRowModel } from '@mui/x-data-grid-pro';
 import type { GridAggregationModel } from "../aggregation/gridAggregationInterfaces.js";
+import type { GridPivotModel } from "../pivoting/gridPivotingInterfaces.js";
+export interface GridGetRowsResponsePivotColumn {
+  key: string;
+  group: string | GridRowModel;
+  children?: GridGetRowsResponsePivotColumn[];
+}
+/**
+ * Path to a pivot column group.
+ * @param {string} key Pivot column key.
+ * @param {string} field Pivot column field.
+ * @param {string | GridRowModel} value Path value that is either a string or a part of row model needed to get the formatted value of the original column.
+ */
+export interface GridDataSourcePivotColumnGroupPath {
+  key: string;
+  field: string;
+  value: string | GridRowModel;
+}
 export interface GridGetRowsResponsePremium extends GridGetRowsResponse {
   /**
    * Row to be used for aggregation footer row.
@@ -7,6 +24,32 @@ export interface GridGetRowsResponsePremium extends GridGetRowsResponse {
    * `GridGetRowsParams.aggregationModel`.
    */
   aggregateRow?: GridValidRowModel;
+  /**
+   * Defines the structure of pivot columns to be created from the pivoted data.
+   * Each node in the tree must have a `key` and `group` property.
+   * `key` is used to identify the column group and will be passed to the `pivotingColDef` callback as the column path parameter.
+   * `group` is either a string or a part of a row model needed to get the formatted value of the original column.
+   * optionally,`children` is a list of the next level nodes.
+   * Each node at the last level of the tree will be a column group containing each pivot value as a column.
+   *
+   * Structure:
+   * The `group` property can be a string or an object:
+   *   - Strings are used directly as column group header names (e.g. `"2025"`, `"January"`)
+   *   - Objects contain data that will be formatted into header names using the column's valueFormatter or valueGetter
+   *     (e.g. `{date: "2025-01-01"}` could be formatted as `"Jan 2025"`)
+   *
+   * Examples:
+   * - `[{key: "Y", group: "Yes"}, {key: "N", group: "No"}]` - Creates column groups with values "Yes" and "No"
+   * - `[{key: "2025", group: "2025", children: [{key: "January", group: "January"}, {key: "February", group: "February"}]}]` - Creates a column group with value "2025"
+   *   that has column groups "January" and "February"
+   * - `[
+   *      {key: "2025-01", group: {date: "2025-01-01"}, children: [{key: "01", group: {date: "2025-01-01"}}]},
+   *      {key: "2025-02", group: {date: "2025-02-01"}, children: [{key: "02", group: {date: "2025-02-01"}}]},
+   *    ]` - Creates two levels of column groups with values returned from the value formatters of the columns used for pivoting.
+   *   Even though the same values are passed, the header names can be different based on the valueFormatter or valueGetter.
+   *   One pivoting column may format the date as a year and the other as a month.
+   */
+  pivotColumns?: GridGetRowsResponsePivotColumn[];
 }
 export interface GridGetRowsParamsPremium extends GridGetRowsParams {
   /**
@@ -17,6 +60,14 @@ export interface GridGetRowsParamsPremium extends GridGetRowsParams {
    * List of grouped columns (only applicable with `rowGrouping`).
    */
   groupFields?: GridColDef['field'][];
+  /**
+   * Visible rows, columns and values from the pivot model (only applicable with `pivoting`).
+   */
+  pivotModel?: {
+    columns: Omit<GridPivotModel['columns'], 'hidden'>;
+    rows: Omit<GridPivotModel['rows'], 'hidden'>;
+    values: Omit<GridPivotModel['values'], 'hidden'>;
+  };
 }
 export interface GridDataSourcePremium extends Omit<GridDataSource, 'getRows'> {
   /**

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

@@ -3,9 +3,11 @@
 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 } from '@mui/x-data-grid-pro/internals';
+import { useGridDataSourceBasePro, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor, gridPivotInitialColumnsSelector, runIf, gridPivotActiveSelector } from '@mui/x-data-grid-pro/internals';
+import { gridPivotModelSelector } from "../pivoting/gridPivotingSelectors.js";
+import { getPropsOverrides } from "./utils.js";
 function getKeyPremium(params) {
-  return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.aggregationModel]);
+  return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.pivotModel ? {} : params.aggregationModel, params.pivotModel]);
 }
 const options = {
   cacheOptions: {
@@ -21,6 +23,9 @@ export const useGridDataSourcePremium = (apiRef, props) => {
     setStrategyAvailability
   } = useGridDataSourceBasePro(apiRef, props, options);
   const aggregateRowRef = React.useRef({});
+  const initialColumns = gridPivotInitialColumnsSelector(apiRef);
+  const pivotActive = gridPivotActiveSelector(apiRef);
+  const pivotModel = gridPivotModelSelector(apiRef);
   const processDataSourceRows = React.useCallback(({
     params,
     response
@@ -34,11 +39,29 @@ export const useGridDataSourcePremium = (apiRef, props) => {
       }
       apiRef.current.applyAggregation();
     }
+    if (response.pivotColumns) {
+      const pivotingColDef = props.pivotingColDef;
+      if (!pivotingColDef || typeof pivotingColDef !== 'function') {
+        throw new Error('MUI X: No `pivotingColDef()` prop provided with to the Data Grid, but response contains `pivotColumns`.\n\n\
+            You need a callback to return at least a field column prop for each generated pivot column.\n\n\
+            See [server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pivoting/) documentation for more details.');
+      }
+
+      // Update the grid state with new columns and column grouping model
+      const partialPropsOverrides = getPropsOverrides(response.pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef);
+      apiRef.current.setState(state => {
+        return _extends({}, state, {
+          pivoting: _extends({}, state.pivoting, {
+            propsOverrides: _extends({}, state.pivoting.propsOverrides, partialPropsOverrides)
+          })
+        });
+      });
+    }
     return {
       params,
       response
     };
-  }, [apiRef]);
+  }, [apiRef, props.pivotingColDef, initialColumns, pivotModel]);
   const resolveGroupAggregation = React.useCallback((groupId, field) => {
     if (groupId === GRID_ROOT_GROUP_ID) {
       return props.dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
@@ -56,8 +79,10 @@ export const useGridDataSourcePremium = (apiRef, props) => {
   Object.entries(events).forEach(([event, handler]) => {
     addEventHandler(apiRef, event, handler);
   });
-  useGridEvent(apiRef, 'rowGroupingModelChange', () => debouncedFetchRows());
-  useGridEvent(apiRef, 'aggregationModelChange', () => debouncedFetchRows());
+  useGridEvent(apiRef, 'rowGroupingModelChange', runIf(!pivotActive, () => debouncedFetchRows()));
+  useGridEvent(apiRef, 'aggregationModelChange', runIf(!pivotActive, () => debouncedFetchRows()));
+  useGridEvent(apiRef, 'pivotModeChange', runIf(!pivotActive, () => debouncedFetchRows()));
+  useGridEvent(apiRef, 'pivotModelChange', runIf(pivotActive, () => debouncedFetchRows()));
   React.useEffect(() => {
     setStrategyAvailability();
   }, [setStrategyAvailability]);

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

@@ -0,0 +1,6 @@
+import type { RefObject } from '@mui/x-internals/types';
+import { GridColDef } 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;