@mui/x-data-grid-premium 8.17.0 → 8.19.0

package/CHANGELOG.md

@@ -5,6 +5,219 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.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.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.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.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.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.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.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.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.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.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.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.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
+## 8.18.0
+
+<!-- generated comparing v8.17.0..master -->
+
+_Nov 13, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `barLabelPlacement` property to customize the bar label position in bar charts, enabling labels to be placed above bars.
+
+  ![image](https://github.com/user-attachments/assets/4bc3a75b-74b8-4c6d-896b-5f5bf837bcda)
+
+- Add `source` property to the date/time picker lifecycle and event handler context, enabling clearer differentiation between changes initiated by the picker UI and those from direct field input.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@htollefsen, @sai6855, @Sigdriv
+
+The following team members contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @JCQuintas, @michelengelen, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.18.0`
+
+- [DataGrid] Allow default event in the column action cell item click event handler (#20272) @arminmeh
+- [DataGrid] Remove unnecessary generic from `useGridApiRef` (#20277) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.18.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.18.0`.
+
+#### `@mui/x-data-grid-premium@8.18.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.18.0`, plus:
+
+- [DataGridPremium] Return the correct `cellParams` value from the aggregation cells (#20224) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.18.0`
+
+- [pickers] Keep invalid date state consistent (#20040) @michelengelen
+- [pickers] Adds new `source` property to `onChange` and `onAccept` context object (#20234) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.18.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.18.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.18.0`
+
+- [charts] Add prop for positioning a bar label (#20194) @Sigdriv
+- [charts] Fix applying dark mode styles in `ChartAxisZoomSliderThumb` (#20232) @sai6855
+
+#### `@mui/x-charts-pro@8.18.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.18.0`, plus:
+
+- [charts-pro] Allow specifying Content Security Policy nonce on export (#20053) @bernardobelchior
+- [charts-pro] Fix applying dark mode styles to slider (#20220) @sai6855
+- [charts-pro] Sankey should respect node order (#20065) @JCQuintas
+
+#### `@mui/x-charts-premium@8.18.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.18.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.18.0`
+
+- [tree view] Prepare tests for the new store structure (#20225) @flaviendelangle
+- [tree view] Prepare the item plugin files for the store migration (#20240) @flaviendelangle
+- [tree view] Use `TreeItemId` type instead of raw string (#20233) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.18.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.18.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.18.0`
+
+Internal changes.
+
+### Docs
+
+- [charts] Add a demo for a custom tick label (#20073) @prakhargupta1
+- [charts] Create `useAxes()` hook documentation page (#20229) @JCQuintas
+- [charts] Fix logo alignment (#20228) @JCQuintas
+- [charts] Fixes typo in import example (#20236) @htollefsen
+- [Data Grid] Add recipe for cursor pagination with data source (#19700) @siriwatknp
+- [Data Grid] Add a demo for pinned rows aggregation (#20198) @cherniavskii
+
+### Core
+
+- [docs-infra] Use deployment config from docs-infra package (#20243) @brijeshb42
+
 ## 8.17.0
 
 _Nov 5, 2025_

package/DataGridPremium/DataGridPremium.js

@@ -50,7 +50,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2MjMwMDgwMDAwMA==";
+const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -168,13 +168,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   'aria-labelledby': _propTypes.default.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
+   * Use it instead of a flex parent container approach, if:
+   * - you don't need to set a minimum or maximum height for the Data Grid
+   * - you want to avoid the scrollbar flickering when the content changes
    * @default false
-   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
-   * @example
-   * <div style={{ display: 'flex', flexDirection: 'column' }}>
-   *   <DataGrid />
-   * </div>
    */
   autoHeight: _propTypes.default.bool,
   /**
@@ -1331,6 +1329,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Sets the tab navigation behavior for the Data Grid.
+   * - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence.
+   * - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header.
+   * - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content.
+   * - "all": Combines the "content" and "header" behavior.
+   * @default "none"
+   */
+  tabNavigation: _propTypes.default.oneOf(['all', 'content', 'header', 'none']),
   /**
    * If positive, the Data Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
    * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -100,7 +100,6 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAiAssistant.aiAssistantStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridChartsIntegration.chartsIntegrationStateInitializer, apiRef, props);
-  (0, _internals.useGridVirtualizer)(apiRef, props);
   (0, _useGridSidebar.useGridSidebar)(apiRef, props);
   (0, _useGridPivoting.useGridPivoting)(apiRef, props, inProps.columns, inProps.rows);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
@@ -129,7 +128,6 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridColumnReorder)(apiRef, props);
   (0, _internals.useGridColumnResize)(apiRef, props);
   (0, _internals.useGridPagination)(apiRef, props);
-  (0, _internals.useGridRowsMeta)(apiRef, props);
   (0, _internals.useGridRowReorder)(apiRef, props);
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _internals.useGridInfiniteLoader)(apiRef, props);
@@ -152,6 +150,9 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _useGridPivoting.useGridPivotingExportState)(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  (0, _internals.useFirstRender)(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/components/GridFooterCell.js

@@ -13,7 +13,7 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "focusElementRef", "hasFocus", "tabIndex", "isEditable"];
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
 const GridFooterCellRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FooterCell'

package/esm/DataGridPremium/DataGridPremium.js

@@ -43,7 +43,7 @@ const configuration = {
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2MjMwMDgwMDAwMA==";
+const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -161,13 +161,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
+   * Use it instead of a flex parent container approach, if:
+   * - you don't need to set a minimum or maximum height for the Data Grid
+   * - you want to avoid the scrollbar flickering when the content changes
    * @default false
-   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
-   * @example
-   * <div style={{ display: 'flex', flexDirection: 'column' }}>
-   *   <DataGrid />
-   * </div>
    */
   autoHeight: PropTypes.bool,
   /**
@@ -1324,6 +1322,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Sets the tab navigation behavior for the Data Grid.
+   * - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence.
+   * - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header.
+   * - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content.
+   * - "all": Combines the "content" and "header" behavior.
+   * @default "none"
+   */
+  tabNavigation: PropTypes.oneOf(['all', 'content', 'header', 'none']),
   /**
    * If positive, the Data Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
    * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridInitialization, useGridInitializeState, useGridVirtualizer, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, rowReorderStateInitializer } 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, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, rowReorderStateInitializer, useFirstRender } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
 // Premium-only features
@@ -92,7 +92,6 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridInitializeState(aiAssistantStateInitializer, apiRef, props);
   useGridInitializeState(chartsIntegrationStateInitializer, apiRef, props);
-  useGridVirtualizer(apiRef, props);
   useGridSidebar(apiRef, props);
   useGridPivoting(apiRef, props, inProps.columns, inProps.rows);
   useGridRowGrouping(apiRef, props);
@@ -121,7 +120,6 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
-  useGridRowsMeta(apiRef, props);
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
@@ -144,6 +142,9 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridPivotingExportState(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  useFirstRender(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/esm/components/GridFooterCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "focusElementRef", "hasFocus", "tabIndex", "isEditable"];
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
 import { getDataGridUtilityClass } from '@mui/x-data-grid';
 import { vars } from '@mui/x-data-grid/internals';
 import { styled } from '@mui/material/styles';

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

@@ -36,6 +36,9 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
       continue;
     }
     const row = rowLookup[rowId];
+    if (!row) {
+      continue;
+    }
     for (let j = 0; j < aggregatedFields.length; j += 1) {
       const aggregatedField = aggregatedFields[j];
       const columnAggregationRules = aggregationRules[aggregatedField];
@@ -51,9 +54,6 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
         // Since we know that pivoted fields are flat, we can use the row directly, and save lots of processing time
         value = row[field];
       } else {
-        if (!row) {
-          continue;
-        }
         const valueGetter = valueGetters[aggregatedField];
         value = valueGetter(row);
       }

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

@@ -3,7 +3,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 { gridColumnLookupSelector, useGridEvent, useGridApiMethod, useRunOncePerLoop, gridRenderContextSelector, gridVisibleColumnFieldsSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor, gridPivotActiveSelector } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationLookupSelector, gridAggregationModelSelector } from "./gridAggregationSelectors.js";
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from "./gridAggregationUtils.js";
@@ -38,8 +38,8 @@ export const useGridAggregation = (apiRef, props) => {
     }
   }, [apiRef]);
   const abortControllerRef = React.useRef(null);
-  const applyAggregation = React.useCallback(reason => {
-    // Abort previous if any
+  const applyAggregation = React.useCallback(() => {
+    // Abort previous if we're proceeding
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
@@ -48,19 +48,17 @@ export const useGridAggregation = (apiRef, props) => {
     const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
     const aggregatedFields = Object.keys(aggregationRules);
     const currentAggregationLookup = gridAggregationLookupSelector(apiRef);
-    const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
-    if (reason === 'sort' && !needsSorting) {
-      // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
-      return;
-    }
     const renderContext = gridRenderContextSelector(apiRef);
     const visibleColumns = gridVisibleColumnFieldsSelector(apiRef);
     const chunks = [];
+    const sortedAggregatedFields = gridSortModelSelector(apiRef).map(s => s.field).filter(field => aggregatedFields.includes(field));
     const visibleAggregatedFields = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1).filter(field => aggregatedFields.includes(field));
+    const visibleAggregatedFieldsWithSort = [...visibleAggregatedFields, ...sortedAggregatedFields.filter(field => !visibleAggregatedFields.includes(field))];
+    const hasAggregatedSortedField = gridRowMaximumTreeDepthSelector(apiRef) > 1 && sortedAggregatedFields.length > 0;
     if (visibleAggregatedFields.length > 0) {
-      chunks.push(visibleAggregatedFields);
+      chunks.push(visibleAggregatedFieldsWithSort);
     }
-    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFields.includes(field));
+    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFieldsWithSort.includes(field));
     const chunkSize = 20; // columns per chunk
     for (let i = 0; i < otherAggregatedFields.length; i += chunkSize) {
       chunks.push(otherAggregatedFields.slice(i, i + chunkSize));
@@ -75,11 +73,7 @@ export const useGridAggregation = (apiRef, props) => {
       }
       const currentChunk = chunks[chunkIndex];
       if (!currentChunk) {
-        const sortModel = gridSortModelSelector(apiRef).map(s => s.field);
-        const hasAggregatedSorting = sortModel.some(field => aggregationRules[field]);
-        if (hasAggregatedSorting) {
-          apiRef.current.applySorting();
-        }
+        apiRef.current.publishEvent('aggregationLookupSet');
         abortControllerRef.current = null;
         return;
       }
@@ -106,6 +100,9 @@ export const useGridAggregation = (apiRef, props) => {
           lookup: _extends({}, aggregationLookup)
         })
       }));
+      if (chunkIndex === 0 && hasAggregatedSortedField) {
+        apiRef.current.applySorting();
+      }
       chunkIndex += 1;
       if (performance.now() - chunkStartTime < timeLimit) {
         processChunk();
@@ -136,7 +133,9 @@ export const useGridAggregation = (apiRef, props) => {
       }
     };
   }, []);
-  const deferredApplyAggregation = useRunOncePerLoop(applyAggregation);
+  const {
+    schedule: deferredApplyAggregation
+  } = useRunOncePerLoop(applyAggregation);
   const aggregationApi = {
     setAggregationModel
   };
@@ -177,7 +176,24 @@ export const useGridAggregation = (apiRef, props) => {
   useGridEvent(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   useGridEvent(apiRef, 'columnsChange', checkAggregationRulesDiff);
   useGridEvent(apiRef, 'filteredRowsSet', deferredApplyAggregation);
-  useGridEvent(apiRef, 'sortedRowsSet', () => deferredApplyAggregation('sort'));
+  const lastSortModel = React.useRef(gridSortModelSelector(apiRef));
+  useGridEvent(apiRef, 'sortedRowsSet', () => {
+    const sortModel = gridSortModelSelector(apiRef);
+    if (lastSortModel.current === sortModel) {
+      return;
+    }
+    lastSortModel.current = sortModel;
+    const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
+    const aggregatedFields = Object.keys(aggregationRules);
+    if (!aggregatedFields.length) {
+      return;
+    }
+    const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
+    if (!needsSorting) {
+      return;
+    }
+    deferredApplyAggregation();
+  });
 
   /**
    * EFFECTS
@@ -187,4 +203,9 @@ export const useGridAggregation = (apiRef, props) => {
       apiRef.current.setAggregationModel(props.aggregationModel);
     }
   }, [apiRef, props.aggregationModel]);
+  React.useEffect(() => {
+    if (props.getAggregationPosition !== undefined) {
+      deferredApplyAggregation();
+    }
+  }, [deferredApplyAggregation, props.getAggregationPosition]);
 };

package/esm/hooks/features/aiAssistant/useGridAiAssistant.js

@@ -74,10 +74,7 @@ export const useGridAiAssistant = (apiRef, props) => {
         length: Math.min(DEFAULT_SAMPLE_COUNT, rows.length)
       }).map(() => {
         const row = rows[Math.floor(Math.random() * rows.length)];
-        if (column.valueGetter) {
-          return column.valueGetter(row[column.field], row, column, apiRef);
-        }
-        return row[column.field];
+        return apiRef.current.getRowValue(row, column);
       });
     });
     return columnExamples;

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

@@ -498,6 +498,7 @@ 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)));
+  useGridEvent(apiRef, 'aggregationLookupSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
     if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
       return prevState;

package/esm/hooks/features/rows/useGridParamsOverridableMethods.js

@@ -12,10 +12,20 @@ export const useGridParamsOverridableMethods = apiRef => {
     id: gridRowIdSelector(apiRef, row),
     field: colDef.field
   })?.value ?? communityMethods.getRowValue(row, colDef), [apiRef, communityMethods]);
-  const getRowFormattedValue = React.useCallback((row, colDef) => gridCellAggregationResultSelector(apiRef, {
-    id: gridRowIdSelector(apiRef, row),
-    field: colDef.field
-  })?.formattedValue ?? communityMethods.getRowFormattedValue(row, colDef), [apiRef, communityMethods]);
+  const getRowFormattedValue = React.useCallback((row, colDef) => {
+    const aggregationFormattedValue = gridCellAggregationResultSelector(apiRef, {
+      id: gridRowIdSelector(apiRef, row),
+      field: colDef.field
+    })?.formattedValue;
+    if (aggregationFormattedValue !== undefined) {
+      return aggregationFormattedValue;
+    }
+    const value = getRowValue(row, colDef);
+    if (!colDef || !colDef.valueFormatter) {
+      return value;
+    }
+    return colDef.valueFormatter(value, row, colDef, apiRef);
+  }, [apiRef, getRowValue]);
   return {
     getCellValue,
     getRowValue,

package/esm/hooks/utils/useGridApiRef.d.ts

@@ -1,4 +1,3 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiCommon } from '@mui/x-data-grid';
 import { GridApiPremium } from "../../models/gridApiPremium.js";
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiPremium>() => RefObject<Api | null>;
+export declare const useGridApiRef: () => RefObject<GridApiPremium | null>;

package/esm/index.js

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

package/hooks/features/aggregation/createAggregationLookup.js

@@ -43,6 +43,9 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
       continue;
     }
     const row = rowLookup[rowId];
+    if (!row) {
+      continue;
+    }
     for (let j = 0; j < aggregatedFields.length; j += 1) {
       const aggregatedField = aggregatedFields[j];
       const columnAggregationRules = aggregationRules[aggregatedField];
@@ -58,9 +61,6 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
         // Since we know that pivoted fields are flat, we can use the row directly, and save lots of processing time
         value = row[field];
       } else {
-        if (!row) {
-          continue;
-        }
         const valueGetter = valueGetters[aggregatedField];
         value = valueGetter(row);
       }

package/hooks/features/aggregation/useGridAggregation.js

@@ -46,8 +46,8 @@ const useGridAggregation = (apiRef, props) => {
     }
   }, [apiRef]);
   const abortControllerRef = React.useRef(null);
-  const applyAggregation = React.useCallback(reason => {
-    // Abort previous if any
+  const applyAggregation = React.useCallback(() => {
+    // Abort previous if we're proceeding
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
@@ -56,19 +56,17 @@ const useGridAggregation = (apiRef, props) => {
     const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.dataSource);
     const aggregatedFields = Object.keys(aggregationRules);
     const currentAggregationLookup = (0, _gridAggregationSelectors.gridAggregationLookupSelector)(apiRef);
-    const needsSorting = (0, _createAggregationLookup.shouldApplySorting)(aggregationRules, aggregatedFields);
-    if (reason === 'sort' && !needsSorting) {
-      // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
-      return;
-    }
     const renderContext = (0, _xDataGridPro.gridRenderContextSelector)(apiRef);
     const visibleColumns = (0, _xDataGridPro.gridVisibleColumnFieldsSelector)(apiRef);
     const chunks = [];
+    const sortedAggregatedFields = (0, _xDataGridPro.gridSortModelSelector)(apiRef).map(s => s.field).filter(field => aggregatedFields.includes(field));
     const visibleAggregatedFields = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1).filter(field => aggregatedFields.includes(field));
+    const visibleAggregatedFieldsWithSort = [...visibleAggregatedFields, ...sortedAggregatedFields.filter(field => !visibleAggregatedFields.includes(field))];
+    const hasAggregatedSortedField = (0, _xDataGridPro.gridRowMaximumTreeDepthSelector)(apiRef) > 1 && sortedAggregatedFields.length > 0;
     if (visibleAggregatedFields.length > 0) {
-      chunks.push(visibleAggregatedFields);
+      chunks.push(visibleAggregatedFieldsWithSort);
     }
-    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFields.includes(field));
+    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFieldsWithSort.includes(field));
     const chunkSize = 20; // columns per chunk
     for (let i = 0; i < otherAggregatedFields.length; i += chunkSize) {
       chunks.push(otherAggregatedFields.slice(i, i + chunkSize));
@@ -83,11 +81,7 @@ const useGridAggregation = (apiRef, props) => {
       }
       const currentChunk = chunks[chunkIndex];
       if (!currentChunk) {
-        const sortModel = (0, _xDataGridPro.gridSortModelSelector)(apiRef).map(s => s.field);
-        const hasAggregatedSorting = sortModel.some(field => aggregationRules[field]);
-        if (hasAggregatedSorting) {
-          apiRef.current.applySorting();
-        }
+        apiRef.current.publishEvent('aggregationLookupSet');
         abortControllerRef.current = null;
         return;
       }
@@ -114,6 +108,9 @@ const useGridAggregation = (apiRef, props) => {
           lookup: (0, _extends2.default)({}, aggregationLookup)
         })
       }));
+      if (chunkIndex === 0 && hasAggregatedSortedField) {
+        apiRef.current.applySorting();
+      }
       chunkIndex += 1;
       if (performance.now() - chunkStartTime < timeLimit) {
         processChunk();
@@ -144,7 +141,9 @@ const useGridAggregation = (apiRef, props) => {
       }
     };
   }, []);
-  const deferredApplyAggregation = (0, _xDataGridPro.useRunOncePerLoop)(applyAggregation);
+  const {
+    schedule: deferredApplyAggregation
+  } = (0, _xDataGridPro.useRunOncePerLoop)(applyAggregation);
   const aggregationApi = {
     setAggregationModel
   };
@@ -185,7 +184,24 @@ const useGridAggregation = (apiRef, props) => {
   (0, _xDataGridPro.useGridEvent)(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'columnsChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'filteredRowsSet', deferredApplyAggregation);
-  (0, _xDataGridPro.useGridEvent)(apiRef, 'sortedRowsSet', () => deferredApplyAggregation('sort'));
+  const lastSortModel = React.useRef((0, _xDataGridPro.gridSortModelSelector)(apiRef));
+  (0, _xDataGridPro.useGridEvent)(apiRef, 'sortedRowsSet', () => {
+    const sortModel = (0, _xDataGridPro.gridSortModelSelector)(apiRef);
+    if (lastSortModel.current === sortModel) {
+      return;
+    }
+    lastSortModel.current = sortModel;
+    const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.dataSource);
+    const aggregatedFields = Object.keys(aggregationRules);
+    if (!aggregatedFields.length) {
+      return;
+    }
+    const needsSorting = (0, _createAggregationLookup.shouldApplySorting)(aggregationRules, aggregatedFields);
+    if (!needsSorting) {
+      return;
+    }
+    deferredApplyAggregation();
+  });
 
   /**
    * EFFECTS
@@ -195,5 +211,10 @@ const useGridAggregation = (apiRef, props) => {
       apiRef.current.setAggregationModel(props.aggregationModel);
     }
   }, [apiRef, props.aggregationModel]);
+  React.useEffect(() => {
+    if (props.getAggregationPosition !== undefined) {
+      deferredApplyAggregation();
+    }
+  }, [deferredApplyAggregation, props.getAggregationPosition]);
 };
 exports.useGridAggregation = useGridAggregation;

package/hooks/features/aiAssistant/useGridAiAssistant.js

@@ -82,10 +82,7 @@ const useGridAiAssistant = (apiRef, props) => {
         length: Math.min(DEFAULT_SAMPLE_COUNT, rows.length)
       }).map(() => {
         const row = rows[Math.floor(Math.random() * rows.length)];
-        if (column.valueGetter) {
-          return column.valueGetter(row[column.field], row, column, apiRef);
-        }
-        return row[column.field];
+        return apiRef.current.getRowValue(row, column);
       });
     });
     return columnExamples;

package/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -506,6 +506,7 @@ 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)));
+  (0, _internals.useGridEvent)(apiRef, 'aggregationLookupSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
     if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
       return prevState;

package/hooks/features/rows/useGridParamsOverridableMethods.js

@@ -19,10 +19,20 @@ const useGridParamsOverridableMethods = apiRef => {
     id: (0, _xDataGridPro.gridRowIdSelector)(apiRef, row),
     field: colDef.field
   })?.value ?? communityMethods.getRowValue(row, colDef), [apiRef, communityMethods]);
-  const getRowFormattedValue = React.useCallback((row, colDef) => (0, _gridAggregationSelectors.gridCellAggregationResultSelector)(apiRef, {
-    id: (0, _xDataGridPro.gridRowIdSelector)(apiRef, row),
-    field: colDef.field
-  })?.formattedValue ?? communityMethods.getRowFormattedValue(row, colDef), [apiRef, communityMethods]);
+  const getRowFormattedValue = React.useCallback((row, colDef) => {
+    const aggregationFormattedValue = (0, _gridAggregationSelectors.gridCellAggregationResultSelector)(apiRef, {
+      id: (0, _xDataGridPro.gridRowIdSelector)(apiRef, row),
+      field: colDef.field
+    })?.formattedValue;
+    if (aggregationFormattedValue !== undefined) {
+      return aggregationFormattedValue;
+    }
+    const value = getRowValue(row, colDef);
+    if (!colDef || !colDef.valueFormatter) {
+      return value;
+    }
+    return colDef.valueFormatter(value, row, colDef, apiRef);
+  }, [apiRef, getRowValue]);
   return {
     getCellValue,
     getRowValue,

package/hooks/utils/useGridApiRef.d.ts

@@ -1,4 +1,3 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiCommon } from '@mui/x-data-grid';
 import { GridApiPremium } from "../../models/gridApiPremium.js";
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiPremium>() => RefObject<Api | null>;
+export declare const useGridApiRef: () => RefObject<GridApiPremium | null>;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.17.0
+ * @mui/x-data-grid-premium v8.19.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.17.0",
+  "version": "8.19.0",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@mui/utils": "^7.3.3",
-    "@mui/x-internal-exceljs-fork": "^4.4.2",
+    "@mui/utils": "^7.3.5",
+    "@mui/x-internal-exceljs-fork": "4.4.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid": "8.17.0",
-    "@mui/x-data-grid-pro": "8.17.0",
-    "@mui/x-internals": "8.17.0",
-    "@mui/x-license": "8.17.0"
+    "@mui/x-data-grid-pro": "8.19.0",
+    "@mui/x-data-grid": "8.19.0",
+    "@mui/x-internals": "8.19.0",
+    "@mui/x-license": "8.19.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",