@mui/x-data-grid 8.22.0 → 8.23.0

package/CHANGELOG.md

@@ -5,6 +5,208 @@
 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_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve Swedish (sv-SE) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@KyeongJooni, @VismaAndreasIvarsson
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @Janpot, @JCQuintas, @mapache-salvaje, @michelengelen, @mj12albert, @prakhargupta1, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.22.1`
+
+- [data grid] Fix column menu keyboard shortcut (#20621) @mj12albert
+- [data grid] Fix row checkbox disabled state on first render and keep cell focusable (ARIA) (#20641) @michelengelen
+- [data grid] Fix tree data selection bug (#20528) @michelengelen
+- [data grid] Prevent clear cell selection on edit mode (#20544) @siriwatknp
+- [data grid] Refactor column merge logic to prioritize defined properties only (#20640) @michelengelen
+- [data grid] Reset row spanning on row expansion change (#20661) @siriwatknp
+- [data grid] Resize newly added rows while resize action is happening (#20676)
+- [l10n] Improve Swedish (sv-SE) locale (#20682) @VismaAndreasIvarsson
+
+#### `@mui/x-data-grid-pro@8.22.1` [![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.22.1`.
+
+#### `@mui/x-data-grid-premium@8.22.1` [![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.22.1`, plus:
+
+- [DataGridPremium] Import `useId()` from `@mui/utils` to maintain React 17 compatibility (#20635) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.22.1`
+
+- [pickers] Add minutesStep validation test (#20672) @KyeongJooni
+- [pickers] Fix `onAccept()` returning wrong year after selecting year then month (#20639) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.22.1` [![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.22.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.22.1`
+
+- [charts] Extract `FocusedPieArc` from `PieArcPlot` (#20613) @alexfauquette
+- [charts] Fix regression on the highlight control (#20627) @alexfauquette
+- [charts] Refactor: `useSelector()` => `store.use()` (#20681) @romgrk
+- [charts] Remove duplicated types (#20694) @alexfauquette
+- [charts] Remove unused generics from bar charts (#20642) @bernardobelchior
+- [charts] Simplify tooltip position getter for pie chart (#20625) @alexfauquette
+
+#### `@mui/x-charts-pro@8.22.1` [![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.22.1`, plus:
+
+- [charts-pro] Add heatmap performance benchmark (#20695) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.22.1` [![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.22.1`, plus:
+
+- [charts-premium] Create `BarChartPremium` (#20643) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.22.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.22.1` [![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.22.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.22.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add button to GitHub source code for the Data Grid advanced demos (DX-50) (#20633) @alelthomas
+- [docs] Remove `seriesConfig` to prevent future confusion (#20678) @alexfauquette
+- [docs] Revise the Data Grid's API object doc for clarity and style (#20649) @mapache-salvaje
+- [docs] Update list of charts (#20479) @prakhargupta1
+
+### Core
+
+- [code-infra] Regression tests improvements (#20441) @Janpot
+- [code-infra] Test utils upgrade (#20592) @Janpot
+- [code-infra] Try to fix the Tree View flacky tests (#20573) @JCQuintas
+
 ## 8.22.0
 
 _Dec 11, 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/columnSelection/GridCellCheckboxRenderer.js

@@ -65,13 +65,13 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
   React.useLayoutEffect(() => {
-    if (tabIndex === 0) {
+    if (tabIndex === 0 && !disabled) {
       const element = apiRef.current.getCellElement(id, field);
       if (element) {
         element.tabIndex = -1;
       }
     }
-  }, [apiRef, tabIndex, id, field]);
+  }, [apiRef, tabIndex, id, field, disabled]);
   const handleKeyDown = (0, _useEventCallback.default)(event => {
     if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
@@ -98,12 +98,13 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
   }
   const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-    tabIndex: tabIndex,
+    tabIndex: disabled ? -1 : tabIndex,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     className: (0, _clsx.default)(classes.root, disabled && 'Mui-disabled'),
+    disabled: disabled,
     material: {
       disableRipple: disabled
     },

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/columnSelection/GridCellCheckboxRenderer.js

@@ -58,13 +58,13 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
   React.useLayoutEffect(() => {
-    if (tabIndex === 0) {
+    if (tabIndex === 0 && !disabled) {
       const element = apiRef.current.getCellElement(id, field);
       if (element) {
         element.tabIndex = -1;
       }
     }
-  }, [apiRef, tabIndex, id, field]);
+  }, [apiRef, tabIndex, id, field, disabled]);
   const handleKeyDown = useEventCallback(event => {
     if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
@@ -91,12 +91,13 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
   }
   const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-    tabIndex: tabIndex,
+    tabIndex: disabled ? -1 : tabIndex,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     className: clsx(classes.root, disabled && 'Mui-disabled'),
+    disabled: disabled,
     material: {
       disableRipple: disabled
     },

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/core/useGridProps.js

@@ -7,7 +7,8 @@ export const propsStateInitializer = (state, props) => {
     props: {
       listView: props.listView,
       getRowId: props.getRowId,
-      isCellEditable: props.isCellEditable
+      isCellEditable: props.isCellEditable,
+      isRowSelectable: props.isRowSelectable
     }
   });
 };

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,