@mui/x-data-grid 8.11.2 → 8.12.0

package/esm/components/quickFilter/QuickFilterControl.js

@@ -118,7 +118,7 @@ process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
   slotProps: PropTypes.object,
   style: PropTypes.object,
   tabIndex: PropTypes.number,
-  type: PropTypes.oneOfType([PropTypes.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.object]),
+  type: PropTypes.string,
   value: PropTypes.string
 } : void 0;
 export { QuickFilterControl };

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'>;
 /**

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

@@ -1,5 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridFilterItem, GridFilterModel } from "../../../models/index.js";
+import { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "../../../models/index.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.js";
@@ -15,9 +15,9 @@ export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultip
 export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity["filter"]) => GridStateCommunity["filter"];
 export declare const removeDiacritics: (value: unknown) => unknown;
 export declare const shouldQuickFilterExcludeHiddenColumns: (filterModel: GridFilterModel) => boolean;
-export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: RefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
+export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, filterValueGetter: (row: GridRowModel, column: GridColDef) => any, apiRef: RefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
 type FilterCache = {
   cleanedFilterItems?: GridFilterItem[];
 };
-export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: RefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
+export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, filterValueGetter: (row: GridRowModel, column: GridColDef) => any, apiRef: RefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
 export {};

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

@@ -81,7 +81,7 @@ export const removeDiacritics = value => {
   }
   return value;
 };
-const getFilterCallbackFromItem = (filterItem, apiRef) => {
+const getFilterCallbackFromItem = (filterItem, filterValueGetter, apiRef) => {
   if (!filterItem.field || !filterItem.operator) {
     return null;
   }
@@ -121,7 +121,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   return {
     item: newFilterItem,
     fn: row => {
-      let value = apiRef.current.getRowValue(row, column);
+      let value = filterValueGetter(row, column);
       if (ignoreDiacritics) {
         value = removeDiacritics(value);
       }
@@ -132,16 +132,21 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
 let filterItemsApplierId = 1;
 
 /**
+ * @name filterValueGetter
+ * @param {GridRowModel} row The row to get the value from.
+ * @param {GridColDef} column The column that the filter is applied on.
+ *
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
+ * @param {FilterValueGetterFn} filterValueGetter The function to get the value to filter by.
  * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
+const buildAggregatedFilterItemsApplier = (filterModel, filterValueGetter, apiRef, disableEval) => {
   const {
     items
   } = filterModel;
-  const appliers = items.map(item => getFilterCallbackFromItem(item, apiRef)).filter(callback => !!callback);
+  const appliers = items.map(item => getFilterCallbackFromItem(item, filterValueGetter, apiRef)).filter(callback => !!callback);
   if (appliers.length === 0) {
     return null;
   }
@@ -181,12 +186,17 @@ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 };
 
 /**
+ * @name filterValueGetter
+ * @param {GridRowModel} row The row to get the value from.
+ * @param {GridColDef} column The column that the filter is applied on.
+ *
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
+ * @param {FilterValueGetterFn} filterValueGetter The function to get the value to filter by.
  * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
+const buildAggregatedQuickFilterApplier = (filterModel, filterValueGetter, apiRef) => {
   const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
@@ -239,7 +249,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
           continue;
         }
         const applier = appliers[v];
-        let value = apiRef.current.getRowValue(row, column);
+        let value = filterValueGetter(row, column);
         if (applier.fn === null) {
           continue;
         }
@@ -257,23 +267,23 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
     return result;
   };
 };
-export const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+export const buildAggregatedFilterApplier = (filterModel, filterValueGetter, apiRef, disableEval) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, filterValueGetter, apiRef, disableEval);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, filterValueGetter, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
     result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
     result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;
   };
 };
 const isNotNull = result => result != null;
-const filterModelItems = (cache, apiRef, items) => {
+const filterModelItems = (cache, filterValueGetter, apiRef, items) => {
   if (!cache.cleanedFilterItems) {
-    cache.cleanedFilterItems = items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
+    cache.cleanedFilterItems = items.filter(item => getFilterCallbackFromItem(item, filterValueGetter, apiRef) !== null);
   }
   return cache.cleanedFilterItems;
 };
-export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) => {
-  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, filterValueGetter, apiRef, cache) => {
+  const cleanedFilterItems = filterModelItems(cache, filterValueGetter, apiRef, filterModel.items);
   const cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
   const cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
 

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

@@ -2,10 +2,11 @@ import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
 export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'filterModel' | 'initialState' | 'disableMultipleColumnsFiltering'>>;
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">, configuration: GridConfiguration) => void;

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

@@ -45,7 +45,7 @@ function createMemoizedValues() {
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export const useGridFilter = (apiRef, props) => {
+export const useGridFilter = (apiRef, props, configuration) => {
   const logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.registerControlState({
     stateId: 'filter',
@@ -195,15 +195,17 @@ export const useGridFilter = (apiRef, props) => {
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
   const getFilterState = React.useCallback(inputFilterModel => {
     const filterModel = sanitizeFilterModel(inputFilterModel, props.disableMultipleColumnsFiltering, apiRef);
-    const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
+    const filterValueGetter = configuration.hooks.useFilterValueGetter(apiRef, props);
+    const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, filterValueGetter, apiRef, props.disableEval) : null;
     const filterResult = apiRef.current.applyStrategyProcessor('filtering', {
       isRowMatchingFilters,
-      filterModel: filterModel ?? getDefaultGridFilterModel()
+      filterModel: filterModel ?? getDefaultGridFilterModel(),
+      filterValueGetter
     });
     return _extends({}, filterResult, {
       filterModel
     });
-  }, [props.disableMultipleColumnsFiltering, props.filterMode, props.disableEval, apiRef]);
+  }, [apiRef, configuration.hooks, props]);
   const filterApi = {
     setFilterLogicOperator,
     unstable_applyFilters: updateFilteredRows,
@@ -287,7 +289,7 @@ export const useGridFilter = (apiRef, props) => {
       const row = rows[i];
       const id = getRowId ? getRowId(row) : row.id;
       isRowMatchingFilters(row, undefined, result);
-      const isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
+      const isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, params.filterValueGetter, apiRef, filterCache);
       if (!isRowPassing) {
         filteredRowsLookup[id] = isRowPassing;
       }

package/esm/hooks/features/rows/gridRowsSelector.d.ts

@@ -13,12 +13,18 @@ export declare const gridTopLevelRowCountSelector: (args_0: import("react").RefO
 export declare const gridRowsLookupSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>) => import("@mui/x-data-grid").GridRowIdToModelLookup<import("@mui/x-data-grid").GridValidRowModel>;
+/**
+ * @category Rows
+ */
 export declare const gridRowSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>, id: GridRowId) => import("@mui/x-data-grid").GridValidRowModel;
 export declare const gridRowTreeSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>) => import("@mui/x-data-grid").GridRowTreeConfig;
+/**
+ * @category Rows
+ */
 export declare const gridRowNodeSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>, rowId: GridRowId) => import("@mui/x-data-grid").GridTreeNode;
@@ -34,6 +40,9 @@ export declare const gridRowTreeDepthsSelector: (args_0: import("react").RefObje
 export declare const gridRowMaximumTreeDepthSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>) => number;
+/**
+ * @category Rows
+ */
 export declare const gridDataRowIdsSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>) => GridRowId[];

package/esm/hooks/features/rows/gridRowsSelector.js

@@ -6,8 +6,16 @@ export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector
 
 // TODO rows v6: Rename
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
+
+/**
+ * @category Rows
+ */
 export const gridRowSelector = createSelector(gridRowsLookupSelector, (rows, id) => rows[id]);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
+
+/**
+ * @category Rows
+ */
 export const gridRowNodeSelector = createSelector(gridRowTreeSelector, (rowTree, rowId) => rowTree[rowId]);
 export const gridRowGroupsToFetchSelector = createSelector(gridRowsStateSelector, rows => rows.groupsToFetch);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
@@ -19,6 +27,10 @@ export const gridRowMaximumTreeDepthSelector = createSelectorMemoized(gridRowsSt
   }
   return (entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] ?? 0) + 1;
 });
+
+/**
+ * @category Rows
+ */
 export const gridDataRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIds);
 export const gridDataRowsSelector = createSelectorMemoized(gridDataRowIdsSelector, gridRowsLookupSelector, (dataRowIds, rowsLookup) => dataRowIds.reduce((acc, id) => {
   if (!rowsLookup[id]) {

package/esm/hooks/features/rows/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./gridRowsMetaSelector.js";
 export * from "./gridRowsMetaState.js";
-export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
+export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, gridRowNodeSelector, gridRowSelector } from "./gridRowsSelector.js";
 export type { GridRowsState, GridRowIdToModelLookup } from "./gridRowsInterfaces.js";
 export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from "./gridRowsUtils.js";

package/esm/hooks/features/rows/index.js

@@ -1,4 +1,4 @@
 export * from "./gridRowsMetaSelector.js";
 export * from "./gridRowsMetaState.js";
-export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
+export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, gridRowNodeSelector, gridRowSelector } from "./gridRowsSelector.js";
 export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from "./gridRowsUtils.js";

package/esm/hooks/features/rows/useGridParamsApi.js

@@ -37,10 +37,22 @@ export function useGridParamsApi(apiRef, props) {
     colDef,
     hasFocus,
     rowNode,
-    tabIndex
+    tabIndex,
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
   }) => {
-    const rawValue = row[field];
-    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
+    let value = row[field];
+    if (forcedValue !== undefined) {
+      value = forcedValue;
+    } else if (colDef?.valueGetter) {
+      value = colDef.valueGetter(value, row, colDef, apiRef);
+    }
+    let formattedValue = value;
+    if (forcedFormattedValue !== undefined) {
+      formattedValue = forcedFormattedValue;
+    } else if (colDef?.valueFormatter) {
+      formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
+    }
     const params = {
       id,
       field,
@@ -51,13 +63,10 @@ export function useGridParamsApi(apiRef, props) {
       hasFocus,
       tabIndex,
       value,
-      formattedValue: value,
+      formattedValue,
       isEditable: false,
       api: apiRef.current
     };
-    if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
-    }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
   }, [apiRef]);

package/esm/hooks/features/sorting/gridSortingUtils.d.ts

@@ -1,5 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridSortingModelApplier } from "./gridSortingState.js";
+import type { GridRowId } from "../../../models/index.js";
 import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import { GridComparatorFn, GridSortDirection, GridSortModel } from "../../../models/gridSortModel.js";
@@ -8,10 +9,11 @@ export declare const mergeStateWithSortModel: (sortModel: GridSortModel, disable
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
+ * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
-export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, apiRef: RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
+export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, sortValueGetter: (id: GridRowId, field: string) => any, apiRef: RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
 export declare const getNextGridSortDirection: (sortingOrder: readonly GridSortDirection[], current?: GridSortDirection) => GridSortDirection;
 export declare const gridStringOrNumberComparator: GridComparatorFn;
 export declare const gridNumberComparator: GridComparatorFn;

package/esm/hooks/features/sorting/gridSortingUtils.js

@@ -18,12 +18,17 @@ export const mergeStateWithSortModel = (sortModel, disableMultipleColumnsSorting
 const isDesc = direction => direction === 'desc';
 
 /**
+ * @name sortValueGetter
+ * @param {GridRowId} id The id of the row.
+ * @param {string} field The field to sort by.
+ *
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
+ * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
-const parseSortItem = (sortItem, apiRef) => {
+const parseSortItem = (sortItem, sortValueGetter, apiRef) => {
   const column = apiRef.current.getColumn(sortItem.field);
   if (!column || sortItem.sort === null) {
     return null;
@@ -41,7 +46,7 @@ const parseSortItem = (sortItem, apiRef) => {
     id,
     field: column.field,
     rowNode: gridRowNodeSelector(apiRef, id),
-    value: apiRef.current.getCellValue(id, column.field),
+    value: sortValueGetter(id, column.field),
     api: apiRef.current
   });
   return {
@@ -73,11 +78,12 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
+ * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
-export const buildAggregatedSortingApplier = (sortModel, apiRef) => {
-  const comparatorList = sortModel.map(item => parseSortItem(item, apiRef)).filter(comparator => !!comparator);
+export const buildAggregatedSortingApplier = (sortModel, sortValueGetter, apiRef) => {
+  const comparatorList = sortModel.map(item => parseSortItem(item, sortValueGetter, apiRef)).filter(comparator => !!comparator);
   if (comparatorList.length === 0) {
     return null;
   }

package/esm/hooks/features/sorting/useGridSorting.d.ts

@@ -2,9 +2,10 @@ import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
 export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'sortModel' | 'initialState' | 'disableMultipleColumnsSorting'>>;
 /**
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">) => void;
+export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">, configuration: GridConfiguration) => void;

package/esm/hooks/features/sorting/useGridSorting.js

@@ -26,7 +26,7 @@ export const sortingStateInitializer = (state, props) => {
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export const useGridSorting = (apiRef, props) => {
+export const useGridSorting = (apiRef, props, configuration) => {
   const logger = useGridLogger(apiRef, 'useGridSorting');
   apiRef.current.registerControlState({
     stateId: 'sortModel',
@@ -79,6 +79,7 @@ export const useGridSorting = (apiRef, props) => {
    * API METHODS
    */
   const applySorting = React.useCallback(() => {
+    const sortValueGetter = configuration.hooks.useSortValueGetter(apiRef);
     apiRef.current.setState(state => {
       if (props.sortingMode === 'server') {
         logger.debug('Skipping sorting rows as sortingMode = server');
@@ -89,7 +90,7 @@ export const useGridSorting = (apiRef, props) => {
         });
       }
       const sortModel = gridSortModelSelector(apiRef);
-      const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
+      const sortRowList = buildAggregatedSortingApplier(sortModel, sortValueGetter, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList
       });
@@ -100,7 +101,7 @@ export const useGridSorting = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('sortedRowsSet');
-  }, [apiRef, logger, props.sortingMode]);
+  }, [apiRef, logger, configuration, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
     const currentModel = gridSortModelSelector(apiRef);
     if (currentModel !== model) {