@mui/x-data-grid 8.22.1 → 8.23.0

package/CHANGELOG.md

@@ -5,6 +5,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.23.0
+
+_Dec 23, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support Data Grid `size`, `size(true)`, and `size(false)` [aggregations for `'boolean'` column type](https://mui.com/x/react-data-grid/aggregation/#usage-with-row-grouping)
+- 🔎 Allow zooming a heatmap
+
+Special thanks go out to these community members for their valuable contributions:
+@henkerik, @sai6855
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @mapache-salvaje, @MBilalShafi, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.23.0`
+
+- [DataGrid] Fix columns state and columns prop sync issue (#20703) @arminmeh
+- [DataGrid] Fix filter datetime with seconds (#20557) @siriwatknp
+- [DataGrid] Add new `includeHeaderFilters` flag to include header filters when autosizing columns (#20510) @siriwatknp
+- [DataGrid] Prevent default on `Enter` key down when starting editing (#20751) @siriwatknp
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#20722) @Copilot
+
+#### `@mui/x-data-grid-pro@8.23.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.23.0`, plus:
+
+- [DataGridPro] Fix crash on rows change in tree data with pagination (#20215) @Copilot
+
+#### `@mui/x-data-grid-premium@8.23.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.23.0`, plus:
+
+- [DataGridPremium] Add aggregation for `'boolean'` column type (#20683) @arminmeh
+- [DataGridPremium] Fix strategy value computation with row grouping (#20725) @MBilalShafi
+- [DataGridPremium] Handle `isRowSelectable()` checks for the rows missing due to `keepNonExistentRowsSelected` (#20668) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.23.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.23.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.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.23.0`
+
+- [charts] Custom stack functions implementation (#20679) @JCQuintas
+- [charts] Extract keyboard focus navigation to the series config (#20693) @alexfauquette
+- [charts] Fix demo not wrapping in mobile (#20713) @JCQuintas
+- [charts] Fix missing dependencies in `x-charts-vendor` (#20685) @henkerik
+- [charts] Remove webkit test differences (#20707) @JCQuintas
+
+#### `@mui/x-charts-pro@8.23.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.23.0`, plus:
+
+- [charts-pro] Allow registering preview plots from higher tier packages (#20716) @bernardobelchior
+- [charts-pro] Fix erroneous behavior when adding/removing pointers from zoom&pan gestures (#20698) @JCQuintas
+- [charts-pro] Move heatmap highlight handling to plot component (#20701) @bernardobelchior
+- [charts-pro] Add zoom to heatmap (#20708) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.23.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.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.23.0`
+
+- [tree view] Add new APIs to disable selection feature for tree view item (#20666) @siriwatknp
+
+#### `@mui/x-tree-view-pro@8.23.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.23.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.23.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Clarify feature availability and relationship between Community and Pro/Premium docs (#20714) @mapache-salvaje
+- [docs] Copyedit Tree View docs and apply new component style rules (DX-19) (#20652) @mapache-salvaje
+- [docs] Fix `ColumnPinningDynamicRowHeight` demo (#20750) @sai6855
+- [docs] Clean up Charts docs sidebar (DX-97) (#20700) @alelthomas
+- [docs] Fix tick labels not being shown on a demo (#20718) @sai6855
+
+### Core
+
+- [code-infra] Bump prettier to 3.7.4 (#20709) @JCQuintas
+- [code-infra] Fix contributor generation logic in changelog script (#20705) @brijeshb42
+
 ## 8.22.1
 
 _Dec 17, 2025_

package/colDef/gridBooleanColDef.js

@@ -42,7 +42,6 @@ const GRID_BOOLEAN_COL_DEF = exports.GRID_BOOLEAN_COL_DEF = (0, _extends2.defaul
   filterOperators: (0, _gridBooleanOperators.getGridBooleanOperators)(),
   getApplyQuickFilterFn: () => null,
   // @ts-ignore
-  aggregable: false,
   chartable: false,
   // @ts-ignore
   pastedValueParser: value => stringToBoolean(value)

package/colDef/gridDateOperators.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getGridDateOperators = void 0;
 var _GridFilterInputDate = require("../components/panel/filterPanel/GridFilterInputDate");
-function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
+function buildApplyFilterFn(filterItem, compareFn, showTime, keepRawComparison) {
   if (!filterItem.value) {
     return null;
   }
@@ -27,7 +27,7 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
     if (!value) {
       return false;
     }
-    if (keepHours) {
+    if (keepRawComparison) {
       return compareFn(value.getTime(), time);
     }
 
@@ -62,7 +62,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'after',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime, showTime);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {
@@ -71,7 +71,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrAfter',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime, showTime);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {
@@ -80,7 +80,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'before',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, !showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, true);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {
@@ -89,7 +89,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrBefore',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime, showTime);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {

package/components/cell/GridBooleanCell.js

@@ -18,6 +18,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
 var _constants = require("../../internals/constants");
+var _GridFooterCell = require("./GridFooterCell");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 const useUtilityClasses = ownerState => {
@@ -116,7 +117,14 @@ const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBo
 if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBooleanCell";
 const renderBooleanCell = params => {
   if (params.field !== _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
-    return '';
+    const aggregationMetaData = params.aggregation;
+    if (!aggregationMetaData) {
+      return '';
+    }
+    if (aggregationMetaData.position === 'footer') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFooterCell.GridFooterCell, (0, _extends2.default)({}, params));
+    }
+    return params.formattedValue;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));
 };

package/components/cell/GridFooterCell.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
+interface GridFooterCellProps extends GridRenderCellParams {
+  sx?: SxProps<Theme>;
+}
+declare function GridFooterCellRaw(props: GridFooterCellProps): import("react/jsx-runtime").JSX.Element;
+declare const GridFooterCell: React.MemoExoticComponent<typeof GridFooterCellRaw>;
+export { GridFooterCell };

package/components/cell/GridFooterCell.js

@@ -0,0 +1,54 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFooterCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
+var _cssVariables = require("../../constants/cssVariables");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
+const GridFooterCellRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FooterCell'
+})({
+  fontWeight: _cssVariables.vars.typography.fontWeight.medium,
+  color: _cssVariables.vars.colors.foreground.accent
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['footerCell']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+function GridFooterCellRaw(props) {
+  const {
+      formattedValue
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridFooterCellRoot, (0, _extends2.default)({
+    ownerState: ownerState,
+    className: classes.root
+  }, other, {
+    children: formattedValue
+  }));
+}
+const GridFooterCell = exports.GridFooterCell = /*#__PURE__*/React.memo(GridFooterCellRaw);
+if (process.env.NODE_ENV !== "production") GridFooterCell.displayName = "GridFooterCell";

package/components/containers/GridRootStyles.js

@@ -357,6 +357,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       },
       [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: {
         width: 'unset'
+      },
+      [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
+        flex: 'none !important',
+        width: 'unset !important'
       }
     },
     [`&.${_gridClasses.gridClasses.withSidePanel}`]: {

package/esm/colDef/gridBooleanColDef.js

@@ -35,7 +35,6 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: () => null,
   // @ts-ignore
-  aggregable: false,
   chartable: false,
   // @ts-ignore
   pastedValueParser: value => stringToBoolean(value)

package/esm/colDef/gridDateOperators.js

@@ -1,5 +1,5 @@
 import { GridFilterInputDate } from "../components/panel/filterPanel/GridFilterInputDate.js";
-function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
+function buildApplyFilterFn(filterItem, compareFn, showTime, keepRawComparison) {
   if (!filterItem.value) {
     return null;
   }
@@ -21,7 +21,7 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
     if (!value) {
       return false;
     }
-    if (keepHours) {
+    if (keepRawComparison) {
       return compareFn(value.getTime(), time);
     }
 
@@ -56,7 +56,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'after',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime, showTime);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {
@@ -65,7 +65,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrAfter',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime, showTime);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {
@@ -74,7 +74,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'before',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, !showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, true);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {
@@ -83,7 +83,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrBefore',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime, showTime);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {

package/esm/components/cell/GridBooleanCell.js

@@ -11,6 +11,7 @@ import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.js";
 import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../../internals/constants.js";
+import { GridFooterCell } from "./GridFooterCell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -109,7 +110,14 @@ if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBo
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
   if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
-    return '';
+    const aggregationMetaData = params.aggregation;
+    if (!aggregationMetaData) {
+      return '';
+    }
+    if (aggregationMetaData.position === 'footer') {
+      return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
+    }
+    return params.formattedValue;
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
 };

package/esm/components/cell/GridFooterCell.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
+interface GridFooterCellProps extends GridRenderCellParams {
+  sx?: SxProps<Theme>;
+}
+declare function GridFooterCellRaw(props: GridFooterCellProps): import("react/jsx-runtime").JSX.Element;
+declare const GridFooterCell: React.MemoExoticComponent<typeof GridFooterCellRaw>;
+export { GridFooterCell };

package/esm/components/cell/GridFooterCell.js

@@ -0,0 +1,48 @@
+'use client';
+
+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", "hasFocus", "tabIndex", "isEditable"];
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import { vars } from "../../constants/cssVariables.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridFooterCellRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FooterCell'
+})({
+  fontWeight: vars.typography.fontWeight.medium,
+  color: vars.colors.foreground.accent
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['footerCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridFooterCellRaw(props) {
+  const {
+      formattedValue
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridFooterCellRoot, _extends({
+    ownerState: ownerState,
+    className: classes.root
+  }, other, {
+    children: formattedValue
+  }));
+}
+const GridFooterCell = /*#__PURE__*/React.memo(GridFooterCellRaw);
+if (process.env.NODE_ENV !== "production") GridFooterCell.displayName = "GridFooterCell";
+export { GridFooterCell };

package/esm/components/containers/GridRootStyles.js

@@ -351,6 +351,10 @@ export const GridRootStyles = styled('div', {
       },
       [`& .${c.treeDataGroupingCell}`]: {
         width: 'unset'
+      },
+      [`& .${c['columnHeader--filter']}`]: {
+        flex: 'none !important',
+        width: 'unset !important'
       }
     },
     [`&.${c.withSidePanel}`]: {

package/esm/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -1,6 +1,7 @@
 import type { GridColDef } from "../../../models/colDef/gridColDef.js";
 export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
   includeHeaders: boolean;
+  includeHeaderFilters: boolean;
   includeOutliers: boolean;
   outliersFactor: number;
   expand: boolean;
@@ -16,6 +17,12 @@ export type GridAutosizeOptions = {
    * @default false
    */
   includeHeaders?: boolean;
+  /**
+   * If true, include header filter widths in the calculation.
+   * Only applies when header filters are enabled.
+   * @default false
+   */
+  includeHeaderFilters?: boolean;
   /**
    * If true, width outliers will be ignored.
    * @default false

package/esm/hooks/features/columnResize/gridColumnResizeApi.js

@@ -1,5 +1,6 @@
 export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
+  includeHeaderFilters: false,
   includeOutliers: false,
   outliersFactor: 1.5,
   expand: false,

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -6,7 +6,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useRtl } from '@mui/system/RtlProvider';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridHeaderFilter, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridEvent, useGridApiMethod, useGridEventPriority, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.js";
@@ -17,6 +17,7 @@ import { useTimeout } from "../../utils/useTimeout.js";
 import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.js";
 import { gridColumnsStateSelector } from "../columns/index.js";
 import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/index.js";
 import { gridResizingColumnFieldSelector } from "./columnResizeSelector.js";
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
@@ -134,6 +135,7 @@ function extractColumnWidths(apiRef, options, columns) {
   const widthByField = {};
   const root = apiRef.current.rootElementRef.current;
   root.classList.add(gridClasses.autosizing);
+  const includeHeaderFilters = options.includeHeaderFilters && gridHeaderFilteringEnabledSelector(apiRef);
   columns.forEach(column => {
     const cells = findGridCells(apiRef.current, column.field);
     const widths = cells.map(cell => {
@@ -164,6 +166,16 @@ function extractColumnWidths(apiRef, options, columns) {
         filteredWidths.push(width);
       }
     }
+    if (includeHeaderFilters) {
+      const headerFilter = findGridHeaderFilter(apiRef.current, column.field);
+      if (headerFilter) {
+        const style = window.getComputedStyle(headerFilter, null);
+        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+        const contentWidth = headerFilter.scrollWidth;
+        const width = contentWidth + paddingWidth;
+        filteredWidths.push(width);
+      }
+    }
     const hasColumnMin = column.minWidth !== -Infinity && column.minWidth !== undefined;
     const hasColumnMax = column.maxWidth !== Infinity && column.maxWidth !== undefined;
     const min = hasColumnMin ? column.minWidth : 0;

package/esm/hooks/features/columns/gridColumnsUtils.js

@@ -236,8 +236,7 @@ export const createColumnsState = ({
     const currentState = gridColumnsStateSelector(apiRef);
     columnsState = {
       orderedFields: keepOnlyColumnsToUpsert ? [] : [...currentState.orderedFields],
-      lookup: _extends({}, currentState.lookup),
-      // Will be cleaned later if keepOnlyColumnsToUpsert=true
+      lookup: keepOnlyColumnsToUpsert ? {} : _extends({}, currentState.lookup),
       columnVisibilityModel,
       initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
     };
@@ -250,12 +249,10 @@ export const createColumnsState = ({
       }
     }
   }
-  const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
     const {
       field
     } = newColumn;
-    columnsToUpsertLookup[field] = true;
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {

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

@@ -21,8 +21,8 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   cache: GridDataSourceCache;
   events: {
     strategyAvailabilityChange: GridEventListener<"strategyAvailabilityChange">;
-    sortModelChange: (params: unknown) => void;
-    filterModelChange: (params: unknown) => void;
-    paginationModelChange: (params: unknown) => void;
+    sortModelChange: (...params: unknown[]) => void;
+    filterModelChange: (...params: unknown[]) => void;
+    paginationModelChange: (...params: unknown[]) => void;
   };
 };

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

@@ -107,6 +107,7 @@ export const useGridCellEditing = (apiRef, props) => {
         reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
+        event.preventDefault();
       } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridCellEditStartReasons.deleteKeyDown;
       }

package/esm/hooks/features/pagination/gridPaginationSelector.js

@@ -60,6 +60,9 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginat
   if (!clientSidePaginationEnabled) {
     return null;
   }
+  if (!visibleSortedRowEntries || visibleSortedRowEntries.length === 0) {
+    return null;
+  }
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -20,6 +20,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js"
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from "./utils.js";
+import { runIf } from "../../../utils/utils.js";
 import { createRowSelectionManager } from "../../../models/gridRowSelectionManager.js";
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../pagination/index.js";
 const emptyModel = {
@@ -38,11 +39,6 @@ export const rowSelectionStateInitializer = (state, props) => _extends({}, state
  */
 export const useGridRowSelection = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSelection');
-  const runIfRowSelectionIsEnabled = React.useCallback(callback => (...args) => {
-    if (props.rowSelection) {
-      callback(...args);
-    }
-  }, [props.rowSelection]);
   const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const applyAutoSelection = props.signature !== GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants) && isNestedData;
   const propRowSelectionModel = React.useMemo(() => {
@@ -121,6 +117,12 @@ export const useGridRowSelection = (apiRef, props) => {
     if (props.rowSelection === false) {
       return false;
     }
+
+    // If `keepNonExistentRowsSelected` is true, we might run in a case where row selectability is checked for a row that does not exist.
+    // Since that row was previously selected (otherwise it would not be checked at this point), we return true.
+    if (props.keepNonExistentRowsSelected && !apiRef.current.getRow(id)) {
+      return true;
+    }
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
     }
@@ -129,7 +131,7 @@ export const useGridRowSelection = (apiRef, props) => {
       return false;
     }
     return true;
-  }, [apiRef, props.rowSelection, propIsRowSelectable]);
+  }, [apiRef, props.rowSelection, props.keepNonExistentRowsSelected, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => gridRowSelectionIdsSelector(apiRef), [apiRef]);
   const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
     if (!apiRef.current.isRowSelectable(id)) {
@@ -303,7 +305,7 @@ export const useGridRowSelection = (apiRef, props) => {
    * EVENTS
    */
   const isFirstRender = React.useRef(true);
-  const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+  const removeOutdatedSelection = React.useCallback(() => {
     if (isFirstRender.current) {
       return;
     }
@@ -357,7 +359,7 @@ export const useGridRowSelection = (apiRef, props) => {
     const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && (newSelectionModel.ids.size > 0 ||
     // In case of exclude selection, newSelectionModel.ids.size === 0 means all rows are selected
     newSelectionModel.type === 'exclude');
-    if (hasChanged || shouldReapplyPropagation && !sortModelUpdated) {
+    if (hasChanged || shouldReapplyPropagation) {
       if (shouldReapplyPropagation) {
         if (newSelectionModel.type === 'exclude') {
           const unfilteredSelectedRowIds = getRowsToBeSelected();
@@ -540,12 +542,12 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     apiRef.current.setRowSelectionModel(propRowSelectionModel);
   });
-  useGridEvent(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection()));
-  useGridEvent(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
-  useGridEvent(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));
+  useGridEvent(apiRef, 'filteredRowsSet', runIf(props.rowSelection, removeOutdatedSelection));
+  useGridEvent(apiRef, 'rowClick', runIf(props.rowSelection, handleRowClick));
+  useGridEvent(apiRef, 'rowSelectionCheckboxChange', runIf(props.rowSelection, handleRowSelectionCheckboxChange));
   useGridEvent(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
-  useGridEvent(apiRef, 'cellMouseDown', runIfRowSelectionIsEnabled(preventSelectionOnShift));
-  useGridEvent(apiRef, 'cellKeyDown', runIfRowSelectionIsEnabled(handleCellKeyDown));
+  useGridEvent(apiRef, 'cellMouseDown', runIf(props.rowSelection, preventSelectionOnShift));
+  useGridEvent(apiRef, 'cellKeyDown', runIf(props.rowSelection, handleCellKeyDown));
 
   /*
    * EFFECTS
@@ -588,8 +590,8 @@ export const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
   React.useEffect(() => {
-    runIfRowSelectionIsEnabled(removeOutdatedSelection);
-  }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+    runIf(props.rowSelection, removeOutdatedSelection);
+  }, [props.rowSelection, removeOutdatedSelection]);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;