@mui/x-data-grid 9.10.1 → 9.12.0

package/CHANGELOG.md

@@ -1,5 +1,288 @@
 # Changelog
 
+## 9.12.0
+
+_Aug 21, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support [Formulas](https://mui.com/x/react-data-grid/formulas/) on the Data Grid: cells in opted-in columns can hold spreadsheet-like formulas (`=SUM(RANGE(…))`, `=price * quantity`) evaluated by a built-in engine, with a formula editor and [Formula Bar](https://mui.com/x/react-data-grid/components/formula-bar/), autocomplete, reference highlighting, optional A1 notation, fill-handle reference adjustment, custom functions, and live formula Excel export
+- ♿️ Improve the accessibility of Data Grid cells and picker day cells
+- 🗓️ Enable multi-resource event creation and editing in the Scheduler
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @mustafajw07
+
+The following team members contributed to this release:
+@brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @romgrk, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.12.0`
+
+- [DataGrid] Expose `apiRef` on `GridCallbackDetails` for selector access in callbacks (#22973) @michelengelen
+- [DataGrid] Fix header height not updating when `headerFilters` or `columnGroupingModel` change (#23059) @MBilalShafi
+- [DataGrid] Fix unhandled rejection when unmounting mid-autosize (#23319) @JCQuintas
+- [DataGrid] Label the blank `singleSelect` filter option (#23294) @JCQuintas
+- [DataGrid] Stop sending incomplete filter items to the data source (#23303) @JCQuintas
+- [DataGrid] Support the `rowheader` attribute for grid cells (#23340) @silviuaavram
+
+#### `@mui/x-data-grid-pro@9.12.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@9.12.0`, plus:
+
+- [DataGridPro] Honor `hasNextPage` in infinite lazy loading (#23048) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@9.12.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@9.12.0`, plus:
+
+- [DataGridPremium] Formula support (#22807) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.12.0`
+
+- [fields] Keep the selected section on blank space clicks (#23318) @LukasTy
+- [pickers] Associate the day cells with their week day column header (#23339) @LukasTy
+- [pickers] Keep the `gridcell` role and the column index on filler cells (#23326) @Anexus5919
+
+#### `@mui/x-date-pickers-pro@9.12.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@9.12.0`, plus:
+
+- [DateRangeCalendar] Round the range highlight at the month grid edges (#23297) @JCQuintas
+- [DateRangePicker] Keep the range highlight opaque for disabled days (#23317) @JCQuintas
+
+### Charts
+
+#### `@mui/x-charts@9.12.0`
+
+- [charts] Add a demo for label on grid row (#23333) @noraleonte
+- [charts] Fix React 18 `propTypes` warnings and stray-pointer test flakiness (#23384) @LukasTy
+- [charts] Focus the clicked item for keyboard navigation (#23247) @JCQuintas
+
+#### `@mui/x-charts-pro@9.12.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@9.12.0`.
+
+#### `@mui/x-charts-premium@9.12.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@9.12.0`, plus:
+
+- [charts-premium] Add `onItemClick` to the radial charts (#23253) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.12.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.12.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@9.12.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.10`
+
+- [scheduler] Add `onEventEditingStart` to let consumers open their own edit UI (#23361) @rita-codes
+- [scheduler] Fix keyboard and focus issues around the "+N more" popover (#23312) @rita-codes
+- [scheduler] Honor `viewConfig` hour limits in the compact day and week views (#23316) @rita-codes
+- [scheduler] Share timeline event layout data (#23366) @flaviendelangle
+- [scheduler] enable multi-resource event creation and editing (#23313) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.10` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.10`, plus:
+
+- [scheduler-premium] Allow to control the min and max hour in the Event Timeline (#23212) @rita-codes
+- [scheduler-premium] Dependencies - Create, select and delete via terminals (#23200) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs][charts] Document line mark size customization (#23370) @JCQuintas
+- [docs] Add recipe for constraining the `make-child` drop action by item type (#22940) @michelengelen
+- [docs] Redirect the renamed Event Timeline views page (#23324) @brijeshb42
+- [docs] Remove unused `adapter-dependencies.json` (#23328) @LukasTy
+
+### Core
+
+- [code-infra] Add release skill (#23308) @brijeshb42
+- [code-infra] Fix changelog categorization of docs and `DateRangeCalendar` tags (#23385) @JCQuintas
+- [code-infra] Sync mui-release skill (#23330) @brijeshb42
+
+### Miscellaneous
+
+- [core] Declare the missing `react-dom` peer dependencies (#23381) @LukasTy
+- [test] Fix act warnings in the data source filter tests (#23360) @JCQuintas
+- [virtualizer] Add inverse-sticky layout (#23053) @romgrk
+
+## 9.11.1
+
+_Aug 6, 2026_
+
+We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 Fix the empty `@mui/x-charts-vendor` package published in v9.11.0
+
+The following team members contributed to this release:
+@JCQuintas, @rita-codes
+
+### Charts
+
+#### `@mui/x-charts@9.11.1`
+
+- [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
+
+#### `@mui/x-charts-pro@9.11.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@9.11.1`.
+
+#### `@mui/x-charts-premium@9.11.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@9.11.1`.
+
+#### `@mui/x-charts-vendor@9.11.1`
+
+- [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.9`
+
+- [scheduler] Show the range validation errors on the End date and End time fields (#23291) @rita-codes
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.9` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.9`.
+
+## 9.11.0
+
+_Aug 6, 2026_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add `addItems()` and `getItemSelection()` API methods to Tree View
+
+Special thanks go out to these community members for their valuable contributions:
+@12joan, @Anexus5919, @kevincorizi-sbt, @mixelburg, @mustafajw07, @strazto
+
+The following team members contributed to this release:
+@flaviendelangle, @hasdfa, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.11.0`
+
+- [DataGrid] Fix `updateRows` stripping class prototypes from rows in datasource mode (#22288) @mixelburg
+- [DataGrid] Do not re-fetch data when an `Activity` becomes visible (#22603) @12joan
+- [DataGrid] Fix toolbar button stealing focus when a sibling's disabled state changes (#23204) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@9.11.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@9.11.0`.
+
+#### `@mui/x-data-grid-premium@9.11.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@9.11.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.11.0`
+
+- [pickers] Fix day shift when editing dates predating timezone standardization (#23296) @JCQuintas
+
+#### `@mui/x-date-pickers-pro@9.11.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@9.11.0`, plus:
+
+- [DateRangePicker] Fix disabled filler cells showing the range highlight (#23293) @JCQuintas
+
+### Charts
+
+#### `@mui/x-charts@9.11.0`
+
+- [charts] Activate the focused item with `Enter`/`Space` (#23218) @JCQuintas
+- [charts] Extract the axis click payload builders (#23215) @JCQuintas
+- [charts] Fix `GestureManager` event listener leak on chart unmount (#23283) @kevincorizi-sbt
+- [charts] Fix `slotProps.legend.position` and `direction` in `RadarChart` (#23254) @JCQuintas
+- [charts] Fix axis clicks being discarded on slight pointer movement (#23244) @noraleonte
+- [charts] Fix image export of charts sized by their parent element (#23255) @JCQuintas
+- [charts] Forward `experimentalFeatures` on `RadarChart` and `Heatmap` (#23216) @JCQuintas
+- [charts] Hide focus indicator when the chart loses focus (#23213) @JCQuintas
+
+#### `@mui/x-charts-pro@9.11.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@9.11.0`.
+
+#### `@mui/x-charts-premium@9.11.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@9.11.0`, plus:
+
+- [charts-premium] Fix `RangeBar` type override (#23217) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.11.0`
+
+- [tree view] Add `addItems()` API method (#23159) @JCQuintas
+- [tree view] Add `getItemSelection` API method (#23257) @noraleonte
+- [tree view] Ignore `keepExistingSelection` when `multiSelect` is `false` (#23242) @JCQuintas
+- [tree view] Prevent duplicate ids in multi-select arrow navigation (#23006) @Anexus5919
+
+#### `@mui/x-tree-view-pro@9.11.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@9.11.0`, plus:
+
+- [tree view] Discard superseded lazy-loading responses (#23005) @Anexus5919
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.8`
+
+- [scheduler] Add `localeText` prop to standalone views (#23210) @rita-codes
+- [scheduler] Finetune touch experience for time grid events and introduce editing drawer (#22624) @noraleonte
+- [scheduler] Introduce the edit dialog form context & lifecycle contract (#23284) @rita-codes
+- [scheduler] Refactor edit dialog General tab into section components (#23206) @rita-codes
+- [scheduler] Replace copied Base UI internals with `@base-ui/react/internals` imports (#21972) @flaviendelangle
+- [scheduler] Hide resource picker when no resources are provided (#23290) @mustafajw07
+- [scheduler] Support multi-resource occurrences in `EventTimeline` (#23240) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.8` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.8`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.11.0`
+
+- [codemod] Remove unused `@babel/core` and `@babel/traverse` dependencies (#23245) @LukasTy
+
+### Docs
+
+- [docs] Add recipe for adding new rows from clipboard copy (#22913) @michelengelen
+- [docs] Clarify the package versions in v8 upgrade guides (#22376) @strazto
+- [docs] Replace README peer dependency lists with an npm install command (#23256) @LukasTy
+
+### Core
+
+- [code-infra] Align action pin version comments (#23238) @LukasTy
+
+### Miscellaneous
+
+- [chat] Drop the undeclared `@mui/icons-material` dependency (#23252) @LukasTy
+- [chat] Sanitize image part URLs and share the URL allow-list with markdown (#23058) @hasdfa
+- [test] Type the `PickersTextField` test stub instead of `as any` (#23194) @LukasTy
+
 ## 9.10.1
 
 _Jul 23, 2026_

package/DataGrid/DataGrid.js

@@ -33,7 +33,8 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods,
     useIsCellEditable: _useGridCellEditable.useIsCellEditable,
     useCellAggregationResult: () => null,
-    useFilterValueGetter: apiRef => apiRef.current.getRowValue
+    useFilterValueGetter: apiRef => apiRef.current.getRowValue,
+    useColumnHeaderAdornment: () => null
   }
 };
 const DataGridRaw = function DataGrid(inProps, ref) {
@@ -166,6 +167,7 @@ process.env.NODE_ENV !== "production" ? DataGridRaw.propTypes /* remove-proptype
     renderEditCell: _propTypes.default.func,
     renderHeader: _propTypes.default.func,
     resizable: _propTypes.default.bool,
+    rowHeader: _propTypes.default.bool,
     rowSpanValueGetter: _propTypes.default.func,
     sortable: _propTypes.default.bool,
     sortComparator: _propTypes.default.func,

package/DataGrid/DataGrid.mjs

@@ -26,7 +26,8 @@ const configuration = {
     useGridParamsOverridableMethods,
     useIsCellEditable,
     useCellAggregationResult: () => null,
-    useFilterValueGetter: apiRef => apiRef.current.getRowValue
+    useFilterValueGetter: apiRef => apiRef.current.getRowValue,
+    useColumnHeaderAdornment: () => null
   }
 };
 const DataGridRaw = function DataGrid(inProps, ref) {
@@ -159,6 +160,7 @@ process.env.NODE_ENV !== "production" ? DataGridRaw.propTypes /* remove-proptype
     renderEditCell: PropTypes.func,
     renderHeader: PropTypes.func,
     resizable: PropTypes.bool,
+    rowHeader: PropTypes.bool,
     rowSpanValueGetter: PropTypes.func,
     sortable: PropTypes.bool,
     sortComparator: PropTypes.func,

package/DataGrid/useDataGridProps.d.mts

@@ -1,3 +1,3 @@
 import type { DataGridProcessedProps, DataGridProps } from "../models/props/DataGridProps.mjs";
 import type { GridValidRowModel } from "../models/index.mjs";
-export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R>;
+export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R, any>;

package/DataGrid/useDataGridProps.d.ts

@@ -1,3 +1,3 @@
 import type { DataGridProcessedProps, DataGridProps } from "../models/props/DataGridProps.js";
 import type { GridValidRowModel } from "../models/index.js";
-export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R>;
+export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R, any>;

package/README.md

@@ -8,17 +8,7 @@ It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core li
 Install the package in your project directory with:
 
 ```bash
-npm install @mui/x-data-grid
-```
-
-This component has the following peer dependencies that you need to install as well.
-
-```json
-"peerDependencies": {
-  "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-},
+npm install @mui/x-data-grid @mui/material @emotion/react @emotion/styled
 ```
 
 ## Documentation

package/components/cell/GridCell.js

@@ -231,6 +231,19 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     }
     const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      // An external editor can legitimately hold DOM focus for the focused cell
+      // (e.g. the Premium formula bar) — the same pipe the document click
+      // handler consults decides whether pulling focus back is allowed. The
+      // pseudo-event only carries the element that owns the focus.
+      const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
+        event: {
+          target: doc.activeElement
+        },
+        cell: null
+      });
+      if (!canUpdateFocus) {
+        return;
+      }
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || cellRef.current;
       (0, _focusElement.focusElement)(elementToFocus, apiRef);
@@ -291,7 +304,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, classNames, className),
-    role: "gridcell",
+    role: column.rowHeader ? 'rowheader' : 'gridcell',
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,

package/components/cell/GridCell.mjs

@@ -224,6 +224,19 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     }
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      // An external editor can legitimately hold DOM focus for the focused cell
+      // (e.g. the Premium formula bar) — the same pipe the document click
+      // handler consults decides whether pulling focus back is allowed. The
+      // pseudo-event only carries the element that owns the focus.
+      const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
+        event: {
+          target: doc.activeElement
+        },
+        cell: null
+      });
+      if (!canUpdateFocus) {
+        return;
+      }
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || cellRef.current;
       focusElement(elementToFocus, apiRef);
@@ -284,7 +297,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   };
   return /*#__PURE__*/_jsx("div", _extends({
     className: clsx(classes.root, classNames, className),
-    role: "gridcell",
+    role: column.rowHeader ? 'rowheader' : 'gridcell',
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,

package/components/columnHeaders/GridBaseColumnHeaders.js

@@ -47,7 +47,7 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = (0, _forwardRef.fo
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "none",
+    role: "rowgroup",
     ref: ref
   }));
 });

package/components/columnHeaders/GridBaseColumnHeaders.mjs

@@ -40,7 +40,7 @@ export const GridBaseColumnHeaders = forwardRef(function GridColumnHeaders(props
     className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "none",
+    role: "rowgroup",
     ref: ref
   }));
 });

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -18,6 +18,7 @@ var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _focusElement = require("../../utils/focusElement");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _getColumnMenuItemKeys = require("../../hooks/features/columnMenu/getColumnMenuItemKeys");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
@@ -81,8 +82,10 @@ function GridColumnHeaderItem(props) {
     pinnedOffset
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
+  const adornment = configuration.hooks.useColumnHeaderAdornment(colDef.field);
   const headerCellRef = React.useRef(null);
   const columnMenuId = (0, _useId.default)();
   const columnMenuButtonId = (0, _useId.default)();
@@ -232,6 +235,7 @@ function GridColumnHeaderItem(props) {
     separatorSide: separatorSide,
     isDraggable: isDraggable,
     headerComponent: headerComponent,
+    adornment: adornment,
     description: colDef.description,
     elementId: colDef.field,
     width: colDef.computedWidth,

package/components/columnHeaders/GridColumnHeaderItem.mjs

@@ -11,6 +11,7 @@ import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
 import { focusElement } from "../../utils/focusElement.mjs";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
+import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.mjs";
 import { getColumnMenuItemKeys } from "../../hooks/features/columnMenu/getColumnMenuItemKeys.mjs";
 import { ColumnHeaderMenuIcon } from "./ColumnHeaderMenuIcon.mjs";
 import { GridColumnHeaderMenu } from "../menu/columnMenu/GridColumnHeaderMenu.mjs";
@@ -74,8 +75,10 @@ function GridColumnHeaderItem(props) {
     pinnedOffset
   } = props;
   const apiRef = useGridPrivateApiContext();
+  const configuration = useGridConfiguration();
   const rootProps = useGridRootProps();
   const isRtl = useRtl();
+  const adornment = configuration.hooks.useColumnHeaderAdornment(colDef.field);
   const headerCellRef = React.useRef(null);
   const columnMenuId = useId();
   const columnMenuButtonId = useId();
@@ -225,6 +228,7 @@ function GridColumnHeaderItem(props) {
     separatorSide: separatorSide,
     isDraggable: isDraggable,
     headerComponent: headerComponent,
+    adornment: adornment,
     description: colDef.description,
     elementId: colDef.field,
     width: colDef.computedWidth,

package/components/columnHeaders/GridGenericColumnHeaderItem.d.mts

@@ -23,6 +23,13 @@ interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'header
   columnMenuIconButton?: React.ReactNode;
   columnMenu?: React.ReactNode;
   columnTitleIconButtons?: React.ReactNode;
+  /**
+   * Optional adornment rendered at the start of the title content, before the
+   * title label (used by the Premium formula feature for A1 column letters).
+   * Placing it inside the (non-reversed) title content keeps it on the same
+   * side of the title for both left- and right-aligned headers.
+   */
+  adornment?: React.ReactNode;
   label: string;
   draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
   columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;

package/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -23,6 +23,13 @@ interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'header
   columnMenuIconButton?: React.ReactNode;
   columnMenu?: React.ReactNode;
   columnTitleIconButtons?: React.ReactNode;
+  /**
+   * Optional adornment rendered at the start of the title content, before the
+   * title label (used by the Premium formula feature for A1 column letters).
+   * Placing it inside the (non-reversed) title content keeps it on the same
+   * side of the title for both left- and right-aligned headers.
+   */
+  adornment?: React.ReactNode;
   label: string;
   draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
   columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -17,7 +17,7 @@ var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "adornment", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
 const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _forwardRef.forwardRef)(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
@@ -34,6 +34,7 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       columnMenuIconButton = null,
       columnMenu = null,
       columnTitleIconButtons = null,
+      adornment = null,
       headerClassName,
       label,
       resizable,
@@ -68,13 +69,13 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.titleContainer,
         role: "none",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: classes.titleContainerContent,
-          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
+          children: [adornment, headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
             label: label,
             description: description,
             columnWidth: width
-          })
+          })]
         }), columnTitleIconButtons]
       }), columnMenuIconButton]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSeparator.GridColumnHeaderSeparator, (0, _extends2.default)({

package/components/columnHeaders/GridGenericColumnHeaderItem.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "adornment", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
 import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
@@ -27,6 +27,7 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
       columnMenuIconButton = null,
       columnMenu = null,
       columnTitleIconButtons = null,
+      adornment = null,
       headerClassName,
       label,
       resizable,
@@ -61,13 +62,13 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
       children: [/*#__PURE__*/_jsxs("div", {
         className: classes.titleContainer,
         role: "none",
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/_jsxs("div", {
           className: classes.titleContainerContent,
-          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+          children: [adornment, headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
             label: label,
             description: description,
             columnWidth: width
-          })
+          })]
         }), columnTitleIconButtons]
       }), columnMenuIconButton]
     })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, _extends({

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -23,12 +23,23 @@ const renderSingleSelectOptions = ({
   getOptionLabel,
   getOptionValue,
   isSelectNative,
-  baseSelectOptionProps
+  baseSelectOptionProps,
+  blankOptionLabel
 }) => {
-  const iterableColumnValues = ['', ...((0, _filterPanelUtils.getValueOptions)(column) || [])];
-  return iterableColumnValues.map(option => {
-    const value = getOptionValue(option);
-    let label = getOptionLabel(option);
+  const valueOptions = (0, _filterPanelUtils.getValueOptions)(column) || [];
+
+  // A column that declares its own blank entry already offers a way to reset the filter.
+  // Prepending another one would render two options sharing the same `''` key.
+  const declaresBlankOption = valueOptions.some(option => {
+    const optionValue = getOptionValue(option);
+    return optionValue === '' || optionValue === null || optionValue === undefined;
+  });
+  const iterableColumnValues = declaresBlankOption ? valueOptions : ['', ...valueOptions];
+  return iterableColumnValues.map((option, index) => {
+    // The prepended entry is ours, not a value option, so it skips the column accessors.
+    const isBlankOption = !declaresBlankOption && index === 0;
+    const value = isBlankOption ? '' : getOptionValue(option);
+    let label = isBlankOption ? blankOptionLabel : getOptionLabel(option);
     if (label === '') {
       label = ' '; // To force the height of the empty option
     }
@@ -98,7 +109,8 @@ function GridFilterInputSingleSelect(props) {
         getOptionLabel,
         getOptionValue,
         isSelectNative,
-        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
+        blankOptionLabel: apiRef.current.getLocaleText('filterValueAny')
       })
     })), headerFilterMenu, clearButton]
   });