@mui/x-data-grid 8.11.2 → 8.12.0

package/CHANGELOG.md

@@ -5,6 +5,237 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.12.0
+
+_Sep 25, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🤝 Grid-Charts integration
+
+![Grid x Charts](https://github.com/user-attachments/assets/0817c36f-f87f-4688-8f30-fa0db638ca8c)
+
+  👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
+
+- ⌨️ Charts keyboard navigation
+- ⚡️ Charts: Add new `renderer="svg-batch"` prop to Scatter charts that provides improved performance for large datasets
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🧰 Codemod requires Node >=20.19
+
+`@mui/x-codemod` minimum supported Node version is `20.19`.
+This was only the case due to using the v18 `yargs` package; this now explicitly aligns with it. (#18979)
+
+Special thanks go out to the community members for their valuable contributions:
+@deade1e, @sai6855, @thomas-mcdonald
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.0`
+
+- [DataGrid] Fix flex column width diff calculation while resizing (#19667) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.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@8.12.0`.
+
+#### `@mui/x-data-grid-premium@8.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@8.12.0`, plus:
+
+- [DataGridPremium] Grid-Charts integration (#18021) @arminmeh
+- [DataGridPremium] Fix sorting and filtering of the tree group columns with aggregation (#19607) @arminmeh
+- [DataGridPremium] Disable aggregation on the grouping column by default (#19692) @arminmeh
+- [DataGridPremium] Do not rely on the group separation constant to retrieve the column name for the charts panel (#19677) @arminmeh
+- [DataGridPremium] Fix stale aggregation state (#19690) @arminmeh
+- [DataGridPremium] Fix pivot column being hidden on autosizing (#19699) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+- [pickers] Ensure reference value is not updated for invalid values (#19635) @michelengelen
+- [pickers] Fix `slotProps.textField.slotProps.htmlInput` resolution (#19713) @LukasTy
+- [pickers] Preserve time format when using single column layout on Time Range Picker (#19626) @sai6855
+- [pickers] Preserve time format when using single column layout on Date Time Picker and Date Time Range Picker (#19608) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.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@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.12.0`
+
+- [charts] Add batch renderer for scatter chart (#19075) @bernardobelchior
+- [charts] Add renderer suffix to performance benchmarks (#19620) @bernardobelchior
+- [charts] Document how plugins can be used (#19343) @alexfauquette
+- [charts] Export chart plugins per series type (#19337) @alexfauquette
+- [charts] Export plugins (#19335) @alexfauquette
+- [charts] Fix horizontal layout and toolbar (#19655) @alexfauquette
+- [charts] Fix performance issue with JS animations (#19606) @bernardobelchior
+- [charts] Fix piecewise scale causing wrong colors in axis with min/max (#19610) @bernardobelchior
+- [charts] Fix zoom discard inconsistency (#19535) @bernardobelchior
+- [charts] Introduce keyboard navigation (#19155) @alexfauquette
+- [charts] Refactor `getAxisExtremum` (#19627) @bernardobelchior
+- [charts] Remove unused code path from `getAxisScale` (#19673) @bernardobelchior
+- [charts] Make new hideLegend prop on ChartWrapper optional (#19694) @thomas-mcdonald
+- [charts] Fix chart crash in test environment (#19711) @JCQuintas
+
+#### `@mui/x-charts-pro@8.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@8.12.0`, plus:
+
+- [charts-pro] Add `valueFormatter` to sankey (#19636) @JCQuintas
+- [charts-pro] Allow `source/target` keywords in sankey link color (#19634) @JCQuintas
+- [charts-pro] Allow exporting `SankeyChart` (#19659) @JCQuintas
+- [charts-pro] Fix axis inversion when using axis `max` and `filterMode: 'discard'` (#19200) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.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@8.12.0`, plus:
+
+- [charts-premium] Grid-Charts integration (#18021) @arminmeh
+
+### Tree View
+
+#### `@mui/x-tree-view@8.12.0`
+
+- [tree view] Allow to pass `null` to the icon slots (#19569) @flaviendelangle
+- [tree view] Fix `apiRef.current.isItemExpanded()` method (#19619) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.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@8.12.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+- [codemod] Bump `engines.node` to `>=20.19` to align with `yargs` package (#18979) @LukasTy
+
+### Docs
+
+- [docs] Add missing label to Charts example (#19616) @prakhargupta1
+- [docs] Replace axis type and axis data with a table (#19618) @prakhargupta1
+- [docs] Add Charts example collection page (#18353) @prakhargupta1
+- [docs] Add a Charts demo showcasing bar and scatter composition (#19605) @prakhargupta1
+- [docs] Add composition Charts demo for legends and tooltip (#19602) @prakhargupta1
+- [docs] Add recipe about server-side data export (#19617) @siriwatknp
+- [docs] Clarify DataGrid layout requirements (#19413) @romgrk
+- [docs] Fix `ExportServerSideData` demo layout shift (#19669) @siriwatknp
+- [docs] Improve server-side `updateRow()` description (#19554) @deade1e
+- [docs] Show how to customize drawing area background (#19682) @alexfauquette
+- [docs] Add hook documentation pages (#19334) @Copilot
+
+### Core
+
+- [code-infra] Add copilot instructions specific to x repo (#19623) @JCQuintas
+- [code-infra] Load `tsx` files in visual regression (#19595) @JCQuintas
+- [code-infra] Remove renovate automerge (#19501) @Janpot
+- [code-infra] Update `DEFAULT_TIMESTAMP` format to ISO 8601 (#19624) @Janpot
+- [code-infra] Update `findLatestTaggedVersion` to filter tags based on major version (#19693) @michelengelen
+- [code-infra] Fix changelog generation for charts premium (#19701) @JCQuintas
+- [code-infra] Run prettier on `createReleasePR.mjs` (#19702) @bernardobelchior
+- [code-infra] Make `x-charts-premium` releasable (#18959) @JCQuintas
+- [docs-infra] Ensure `create-playground` script only runs if target file is absent (#19603) @michelengelen
+- [docs-infra] Add @prakhargupta1 as a codeowner of the docs (#19679) @alexfauquette
+
+### Miscellaneous
+
+- [test] Reduce time for wheel zoom test (#19571) @alexfauquette
+- Change `matchPackageNames` to `matchDepNames` for date-fns-v2 @Janpot
+- Remove groupName for date-fns-v2 in renovate.json @Janpot
+
+## 8.11.3
+
+_Sep 16, 2025_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.3`
+
+- [DataGrid] Fix numeric font size not being applied (#19552) @cherniavskii
+- [DataGrid] Improve `operator` types to display literal values (#19529) @siriwatknp
+
+#### `@mui/x-data-grid-pro@8.11.3` [![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.11.3`.
+
+#### `@mui/x-data-grid-premium@8.11.3` [![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.11.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.3`
+
+- [pickers] Refactor `slots` and `slotProps` propagation strategy (#18867) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.3` [![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.11.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.3`
+
+- [charts] Add `inline-` piecewise legend options (#19382) @JCQuintas
+- [charts] Add bar gradient example (#19174) @bernardobelchior
+- [charts] Ignore empty tick labels in label overlap computation (#19547) @alexfauquette
+- [charts] Rename `isBandScale` to `isDiscreteScale` (#19514) @bernardobelchior
+- [charts] Fix legend position affecting toolbar's position (#19257) @sai6855
+
+#### `@mui/x-charts-pro@8.11.3` [![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.11.3`, plus:
+
+- [charts-pro] Add chart title and caption to export demo (#19524) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.3`
+
+- [tree view] Stop looping through all items to publish the `removeItem` event (#19500) @flaviendelangle
+- [tree view] Support flat DOM structure (#19350) @flaviendelangle
+- [tree view] Update cursor styles for disabled TreeItem (#19548) @sai6855
+
+#### `@mui/x-tree-view-pro@8.11.3` [![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.11.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add styling row group recipe (#19349) @siriwatknp
+- [docs] Group demos data into the dataset folder (#19549) @alexfauquette
+- [docs] Add `shiny` bar chart example at the top (#19416) @JCQuintas
+
+### Core
+
+- [code-infra] Axios update (#19577) @Janpot
+- [code-infra] Remove usage of copy-files command from code-infra (#19518) @brijeshb42
+- [internal] Fix naming to match convention @oliviertassinari
+
 ## 8.11.2
 
 _Sep 10, 2025_

package/DataGrid/DataGrid.js

@@ -28,7 +28,9 @@ const configuration = {
     useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
     useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods,
-    useCellAggregationResult: () => null
+    useCellAggregationResult: () => null,
+    useSortValueGetter: apiRef => apiRef.current.getCellValue,
+    useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
 const DataGridRaw = function DataGrid(inProps, ref) {

package/DataGrid/useDataGridComponent.js

@@ -84,8 +84,8 @@ const useDataGridComponent = (apiRef, props, configuration) => {
   (0, _useGridEditing.useGridEditing)(apiRef, props);
   (0, _useGridFocus.useGridFocus)(apiRef, props);
   (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef, props);
-  (0, _useGridFilter.useGridFilter)(apiRef, props);
-  (0, _useGridSorting.useGridSorting)(apiRef, props);
+  (0, _useGridFilter.useGridFilter)(apiRef, props, configuration);
+  (0, _useGridSorting.useGridSorting)(apiRef, props, configuration);
   (0, _useGridDensity.useGridDensity)(apiRef, props);
   (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
   (0, _useGridPagination.useGridPagination)(apiRef, props);

package/colDef/gridActionsColDef.js

@@ -14,6 +14,7 @@ const GRID_ACTIONS_COL_DEF = exports.GRID_ACTIONS_COL_DEF = (0, _extends2.defaul
   filterable: false,
   // @ts-ignore
   aggregable: false,
+  chartable: false,
   width: 100,
   display: 'flex',
   align: 'center',

package/colDef/gridBooleanColDef.js

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

package/colDef/gridCheckboxSelectionColDef.js

@@ -23,6 +23,7 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF
   filterable: false,
   // @ts-ignore
   aggregable: false,
+  chartable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

package/colDef/gridStringColDef.js

@@ -22,6 +22,7 @@ const GRID_STRING_COL_DEF = exports.GRID_STRING_COL_DEF = {
   pinnable: true,
   // @ts-ignore
   aggregable: true,
+  chartable: true,
   editable: false,
   sortComparator: _gridSortingUtils.gridStringOrNumberComparator,
   type: 'string',

package/components/GridShadowScrollArea.js

@@ -86,8 +86,8 @@ const GridShadowScrollArea = exports.GridShadowScrollArea = (0, _forwardRef.forw
   const {
       children
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowScrollArea, (0, _extends2.default)({}, rest, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowScrollArea, (0, _extends2.default)({}, other, {
     ref: ref,
     children: children
   }));

package/components/GridSkeletonLoadingOverlay.js

@@ -70,7 +70,7 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
       visibleColumns,
       showFirstRowBorder
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);
   const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
   const pinnedColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisiblePinnedColumnDefinitionsSelector);
@@ -189,7 +189,7 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
   (0, _hooks.useGridEvent)(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonOverlay, (0, _extends2.default)({
     className: classes.root
-  }, rest, {
+  }, other, {
     ref: handleRef,
     children: children
   }));

package/components/cell/GridCell.js

@@ -102,6 +102,10 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const config = (0, _useGridConfiguration.useGridConfiguration)();
   const cellAggregationResult = config.hooks.useCellAggregationResult(rowId, field);
   const cellMode = editCellState ? _models.GridCellModes.Edit : _models.GridCellModes.View;
+  const {
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
+  } = cellAggregationResult || {};
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
     cellMode,
@@ -113,13 +117,11 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     hasFocus: (0, _useGridSelector.useGridSelector)(apiRef, () => {
       const focus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
       return focus?.id === rowId && focus.field === field;
-    })
+    }),
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
   });
   cellParams.api = apiRef.current;
-  if (cellAggregationResult) {
-    cellParams.value = cellAggregationResult.value;
-    cellParams.formattedValue = column.valueFormatter ? column.valueFormatter(cellParams.value, row, column, apiRef) : cellParams.value;
-  }
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -28,7 +28,7 @@ function GridFilterInputBoolean(props) {
       tabIndex,
       slotProps
     } = props,
-    others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const labelId = (0, _useId.default)();
@@ -63,7 +63,7 @@ function GridFilterInputBoolean(props) {
           tabIndex
         }, rootSlotProps?.htmlInput)
       }
-    }, baseSelectProps, others, slotProps?.root, {
+    }, baseSelectProps, other, slotProps?.root, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
         native: isSelectNative,
         value: "",

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -50,7 +50,7 @@ function GridFilterInputSingleSelect(props) {
       headerFilterMenu,
       slotProps
     } = props,
-    others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterValue = item.value ?? '';
   const id = (0, _useId.default)();
   const labelId = (0, _useId.default)();
@@ -92,7 +92,7 @@ function GridFilterInputSingleSelect(props) {
         }, slotProps?.root.slotProps?.htmlInput)
       },
       native: isSelectNative
-    }, rootProps.slotProps?.baseSelect, others, slotProps?.root, {
+    }, rootProps.slotProps?.baseSelect, other, slotProps?.root, {
       children: renderSingleSelectOptions({
         column: resolvedColumn,
         OptionComponent: rootProps.slots.baseSelectOption,

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -29,7 +29,7 @@ function GridFilterInputValue(props) {
       clearButton,
       headerFilterMenu
     } = props,
-    others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const textFieldProps = slotProps?.root;
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
@@ -76,7 +76,7 @@ function GridFilterInputValue(props) {
         }, textFieldProps?.slotProps?.htmlInput)
       }),
       inputRef: focusElementRef
-    }, rootProps.slotProps?.baseTextField, others, textFieldProps)), headerFilterMenu, clearButton]
+    }, rootProps.slotProps?.baseTextField, other, textFieldProps)), headerFilterMenu, clearButton]
   });
 }
 function sanitizeFilterItemValue(value) {

package/components/quickFilter/QuickFilterControl.js

@@ -126,6 +126,6 @@ process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
   slotProps: _propTypes.default.object,
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.number,
-  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), _propTypes.default.object]),
+  type: _propTypes.default.string,
   value: _propTypes.default.string
 } : void 0;

package/constants/localeTextConstants.js

@@ -38,6 +38,8 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarExportExcel: 'Download as Excel',
   // Toolbar pivot button
   toolbarPivot: 'Pivot',
+  // Toolbar charts button
+  toolbarCharts: 'Charts',
   // Toolbar AI Assistant button
   toolbarAssistant: 'AI Assistant',
   // Columns management text
@@ -117,6 +119,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   columnMenuSortAsc: 'Sort by ASC',
   columnMenuSortDesc: 'Sort by DESC',
   columnMenuManagePivot: 'Manage pivot',
+  columnMenuManageCharts: 'Manage charts',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   columnHeaderFiltersLabel: 'Show filters',
@@ -185,6 +188,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   rowReorderingHeaderName: 'Row reordering',
   // Aggregation
   aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: 'sum',
   aggregationFunctionLabelAvg: 'avg',
   aggregationFunctionLabelMin: 'min',
@@ -218,6 +222,31 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   pivotDragToValues: 'Drag here to create values',
   pivotYearColumnHeaderName: '(Year)',
   pivotQuarterColumnHeaderName: '(Quarter)',
+  // Charts configuration panel
+  chartsNoCharts: 'There are no charts available',
+  chartsChartNotSelected: 'Select a chart type to configure its options',
+  chartsTabChart: 'Chart',
+  chartsTabFields: 'Fields',
+  chartsTabCustomize: 'Customize',
+  chartsCloseButton: 'Close charts configuration',
+  chartsSyncButtonLabel: 'Sync chart',
+  chartsSearchPlaceholder: 'Search fields',
+  chartsSearchLabel: 'Search fields',
+  chartsSearchClear: 'Clear search',
+  chartsNoFields: 'No fields',
+  chartsFieldBlocked: 'This field cannot be added to any section',
+  chartsCategories: 'Categories',
+  chartsSeries: 'Series',
+  chartsMenuAddToDimensions: dimensionLabel => `Add to ${dimensionLabel}`,
+  chartsMenuAddToValues: valuesLabel => `Add to ${valuesLabel}`,
+  chartsMenuMoveUp: 'Move up',
+  chartsMenuMoveDown: 'Move down',
+  chartsMenuMoveToTop: 'Move to top',
+  chartsMenuMoveToBottom: 'Move to bottom',
+  chartsMenuOptions: 'Field options',
+  chartsMenuRemove: 'Remove',
+  chartsDragToDimensions: dimensionLabel => `Drag here to use column as ${dimensionLabel}`,
+  chartsDragToValues: valuesLabel => `Drag here to use column as ${valuesLabel}`,
   // AI Assistant panel
   aiAssistantPanelTitle: 'AI Assistant',
   aiAssistantPanelClose: 'Close AI Assistant',

package/esm/DataGrid/DataGrid.js

@@ -21,7 +21,9 @@ const configuration = {
     useGridAriaAttributes,
     useGridRowAriaAttributes,
     useGridRowsOverridableMethods,
-    useCellAggregationResult: () => null
+    useCellAggregationResult: () => null,
+    useSortValueGetter: apiRef => apiRef.current.getCellValue,
+    useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
 const DataGridRaw = function DataGrid(inProps, ref) {

package/esm/DataGrid/useDataGridComponent.js

@@ -78,8 +78,8 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);
-  useGridFilter(apiRef, props);
-  useGridSorting(apiRef, props);
+  useGridFilter(apiRef, props, configuration);
+  useGridSorting(apiRef, props, configuration);
   useGridDensity(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);

package/esm/colDef/gridActionsColDef.js

@@ -7,6 +7,7 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterable: false,
   // @ts-ignore
   aggregable: false,
+  chartable: false,
   width: 100,
   display: 'flex',
   align: 'center',

package/esm/colDef/gridBooleanColDef.js

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

package/esm/colDef/gridCheckboxSelectionColDef.js

@@ -15,6 +15,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   filterable: false,
   // @ts-ignore
   aggregable: false,
+  chartable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

package/esm/colDef/gridStringColDef.js

@@ -17,6 +17,7 @@ export const GRID_STRING_COL_DEF = {
   pinnable: true,
   // @ts-ignore
   aggregable: true,
+  chartable: true,
   editable: false,
   sortComparator: gridStringOrNumberComparator,
   type: 'string',

package/esm/components/GridShadowScrollArea.js

@@ -78,8 +78,8 @@ const GridShadowScrollArea = forwardRef(function GridShadowScrollArea(props, ref
   const {
       children
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(ShadowScrollArea, _extends({}, rest, {
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(ShadowScrollArea, _extends({}, other, {
     ref: ref,
     children: children
   }));

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -62,7 +62,7 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
       visibleColumns,
       showFirstRowBorder
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const allVisibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
@@ -181,7 +181,7 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
   useGridEvent(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
     className: classes.root
-  }, rest, {
+  }, other, {
     ref: handleRef,
     children: children
   }));

package/esm/components/cell/GridCell.js

@@ -95,6 +95,10 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   const config = useGridConfiguration();
   const cellAggregationResult = config.hooks.useCellAggregationResult(rowId, field);
   const cellMode = editCellState ? GridCellModes.Edit : GridCellModes.View;
+  const {
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
+  } = cellAggregationResult || {};
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
     cellMode,
@@ -106,13 +110,11 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     hasFocus: useGridSelector(apiRef, () => {
       const focus = gridFocusCellSelector(apiRef);
       return focus?.id === rowId && focus.field === field;
-    })
+    }),
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
   });
   cellParams.api = apiRef.current;
-  if (cellAggregationResult) {
-    cellParams.value = cellAggregationResult.value;
-    cellParams.formattedValue = column.valueFormatter ? column.valueFormatter(cellParams.value, row, column, apiRef) : cellParams.value;
-  }
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field

package/esm/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -20,7 +20,7 @@ function GridFilterInputBoolean(props) {
       tabIndex,
       slotProps
     } = props,
-    others = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = useGridRootProps();
   const labelId = useId();
@@ -55,7 +55,7 @@ function GridFilterInputBoolean(props) {
           tabIndex
         }, rootSlotProps?.htmlInput)
       }
-    }, baseSelectProps, others, slotProps?.root, {
+    }, baseSelectProps, other, slotProps?.root, {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
         native: isSelectNative,
         value: "",

package/esm/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -42,7 +42,7 @@ function GridFilterInputSingleSelect(props) {
       headerFilterMenu,
       slotProps
     } = props,
-    others = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const filterValue = item.value ?? '';
   const id = useId();
   const labelId = useId();
@@ -84,7 +84,7 @@ function GridFilterInputSingleSelect(props) {
         }, slotProps?.root.slotProps?.htmlInput)
       },
       native: isSelectNative
-    }, rootProps.slotProps?.baseSelect, others, slotProps?.root, {
+    }, rootProps.slotProps?.baseSelect, other, slotProps?.root, {
       children: renderSingleSelectOptions({
         column: resolvedColumn,
         OptionComponent: rootProps.slots.baseSelectOption,

package/esm/components/panel/filterPanel/GridFilterInputValue.js

@@ -22,7 +22,7 @@ function GridFilterInputValue(props) {
       clearButton,
       headerFilterMenu
     } = props,
-    others = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const textFieldProps = slotProps?.root;
   const filterTimeout = useTimeout();
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
@@ -69,7 +69,7 @@ function GridFilterInputValue(props) {
         }, textFieldProps?.slotProps?.htmlInput)
       }),
       inputRef: focusElementRef
-    }, rootProps.slotProps?.baseTextField, others, textFieldProps)), headerFilterMenu, clearButton]
+    }, rootProps.slotProps?.baseTextField, other, textFieldProps)), headerFilterMenu, clearButton]
   });
 }
 function sanitizeFilterItemValue(value) {