@mui/x-data-grid 8.11.3 → 8.12.0

package/CHANGELOG.md

@@ -5,6 +5,151 @@
 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_
@@ -27,11 +172,11 @@ The following are all team members who have contributed to this release:
 - [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")
+#### `@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")
+#### `@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`.
 
@@ -41,7 +186,7 @@ Same changes as in `@mui/x-data-grid-pro@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")
+#### `@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`.
 
@@ -55,7 +200,7 @@ Same changes as in `@mui/x-date-pickers@8.11.3`.
 - [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")
+#### `@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:
 
@@ -69,7 +214,7 @@ Same changes as in `@mui/x-charts@8.11.3`, plus:
 - [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")
+#### `@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`.
 
@@ -83,7 +228,7 @@ Internal changes.
 
 - [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
+- [docs] Add `shiny` bar chart example at the top (#19416) @JCQuintas
 
 ### Core
 

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/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/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/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/constants/localeTextConstants.js

@@ -32,6 +32,8 @@ export const 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
@@ -111,6 +113,7 @@ export const 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',
@@ -179,6 +182,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   rowReorderingHeaderName: 'Row reordering',
   // Aggregation
   aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: 'sum',
   aggregationFunctionLabelAvg: 'avg',
   aggregationFunctionLabelMin: 'min',
@@ -212,6 +216,31 @@ export const 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/hooks/features/columnResize/useGridColumnResize.js

@@ -41,7 +41,7 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeD
   } else {
     newWidth += columnBounds.right - clickX;
   }
-  return newWidth;
+  return Math.round(newWidth);
 }
 function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
   if (resizeDirection === 'Left') {
@@ -560,5 +560,5 @@ function updateProperty(element, property, delta) {
   if (!element) {
     return;
   }
-  element.style[property] = `${parseInt(element.style[property], 10) + delta}px`;
+  element.style[property] = `${Math.round(parseFloat(element.style[property])) + delta}px`;
 }

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

@@ -11,7 +11,7 @@ import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from "../../
 import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
 import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from "./gridColumnsUtils.js";
 import { GridPreferencePanelsValue } from "../preferencesPanel/index.js";
-import { gridPivotActiveSelector } from "../pivoting/index.js";
+import { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from "../pivoting/gridPivotingSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.columns = {
@@ -82,13 +82,30 @@ export function useGridColumns(apiRef, props) {
     }
   }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
+    let columnsToUpdate = columns;
     if (gridPivotActiveSelector(apiRef)) {
-      apiRef.current.updateNonPivotColumns(columns);
-      return;
+      const nonPivotColumns = [];
+      const pivotColumns = [];
+      const pivotInitialColumns = gridPivotInitialColumnsSelector(apiRef);
+      columns.forEach(column => {
+        const isNonPivotColumn = pivotInitialColumns.has(column.field);
+        if (isNonPivotColumn) {
+          nonPivotColumns.push(column);
+        } else {
+          pivotColumns.push(column);
+        }
+      });
+      if (nonPivotColumns.length > 0) {
+        apiRef.current.updateNonPivotColumns(nonPivotColumns);
+      }
+      if (pivotColumns.length === 0) {
+        return;
+      }
+      columnsToUpdate = pivotColumns;
     }
     const columnsState = createColumnsState({
       apiRef,
-      columnsToUpsert: columns,
+      columnsToUpsert: columnsToUpdate,
       initialState: undefined,
       keepOnlyColumnsToUpsert: false,
       updateInitialVisibilityModel: true

package/esm/hooks/features/filter/gridFilterSelector.d.ts

@@ -1,5 +1,5 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
-import { GridRowId } from "../../../models/gridRows.js";
+import { GridRowEntry, GridRowId, GridValidRowModel } from "../../../models/gridRows.js";
 import { GridFilterItem } from "../../../models/gridFilterItem.js";
 /**
  * Get the current filter model.
@@ -48,7 +48,7 @@ export declare const gridFilteredDescendantCountLookupSelector: (args_0: import(
  */
 export declare const gridExpandedSortedRowEntriesSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[];
+} | null>) => GridRowEntry<GridValidRowModel>[];
 /**
  * Get the id of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
@@ -64,7 +64,7 @@ export declare const gridExpandedSortedRowIdsSelector: (args_0: import("react").
  */
 export declare const gridFilteredSortedRowEntriesSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[];
+} | null>) => GridRowEntry<GridValidRowModel>[];
 /**
  * Get the id of the rows accessible after the filtering process.
  * Contains the collapsed children.
@@ -82,13 +82,21 @@ export declare const gridFilteredSortedRowIdsSelector: (args_0: import("react").
 export declare const gridExpandedSortedRowTreeLevelPositionLookupSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>) => Record<GridRowId, number>;
+/**
+ * Get the id and the model of the rows per depth level, accessible after the filtering process.
+ * Returns an array of arrays, where each array index contains the rows for the depth level equal to the index.
+ * @category Filtering
+ */
+export declare const gridFilteredSortedDepthRowEntriesSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridRowEntry<GridValidRowModel>[][];
 /**
  * Get the id and the model of the top level rows accessible after the filtering process.
  * @category Filtering
  */
 export declare const gridFilteredSortedTopLevelRowEntriesSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[];
+} | null>) => GridRowEntry<GridValidRowModel>[];
 /**
  * Get the amount of rows accessible after the filtering process.
  * @category Filtering

package/esm/hooks/features/filter/gridFilterSelector.js

@@ -107,16 +107,33 @@ export const gridExpandedSortedRowTreeLevelPositionLookupSelector = createSelect
 });
 
 /**
- * Get the id and the model of the top level rows accessible after the filtering process.
+ * Get the id and the model of the rows per depth level, accessible after the filtering process.
+ * Returns an array of arrays, where each array index contains the rows for the depth level equal to the index.
  * @category Filtering
  */
-export const gridFilteredSortedTopLevelRowEntriesSelector = createSelectorMemoized(gridExpandedSortedRowEntriesSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
+export const gridFilteredSortedDepthRowEntriesSelector = createSelectorMemoized(gridFilteredSortedRowEntriesSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, (sortedRows, rowTree, rowTreeDepth) => {
   if (rowTreeDepth < 2) {
-    return visibleSortedRows;
+    return [sortedRows];
   }
-  return visibleSortedRows.filter(row => rowTree[row.id]?.depth === 0);
+  return sortedRows.reduce((acc, row) => {
+    const depth = rowTree[row.id]?.depth;
+    if (depth === undefined) {
+      return acc;
+    }
+    if (!acc[depth]) {
+      acc[depth] = [];
+    }
+    acc[depth].push(row);
+    return acc;
+  }, [[]]);
 });
 
+/**
+ * Get the id and the model of the top level rows accessible after the filtering process.
+ * @category Filtering
+ */
+export const gridFilteredSortedTopLevelRowEntriesSelector = createSelector(gridFilteredSortedDepthRowEntriesSelector, filteredSortedDepthRows => filteredSortedDepthRows[0] ?? []);
+
 /**
  * Get the amount of rows accessible after the filtering process.
  * @category Filtering

package/esm/hooks/features/filter/gridFilterState.d.ts

@@ -1,6 +1,7 @@
 import { GridFilterItem } from "../../../models/gridFilterItem.js";
 import { GridFilterModel } from "../../../models/gridFilterModel.js";
-import { GridRowId, GridValidRowModel } from "../../../models/gridRows.js";
+import { GridRowId, GridRowModel, GridValidRowModel } from "../../../models/gridRows.js";
+import { GridColDef } from "../../../models/colDef/index.js";
 export type GridFilterItemResult = {
   [key: Required<GridFilterItem>['id']]: boolean;
 };
@@ -52,6 +53,7 @@ export type GridAggregatedFilterItemApplier = (row: GridValidRowModel, shouldApp
 export interface GridFilteringMethodParams {
   isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
   filterModel: GridFilterModel;
+  filterValueGetter: (row: GridRowModel, column: GridColDef) => any;
 }
 export type GridFilteringMethodValue = Omit<GridFilterState, 'filterModel'>;
 /**