@mui/x-data-grid 8.11.2 → 8.12.0

package/hooks/features/columnResize/useGridColumnResize.js

@@ -48,7 +48,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') {
@@ -569,5 +569,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/hooks/features/columns/useGridColumns.js

@@ -19,7 +19,7 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridColumnsUtils = require("./gridColumnsUtils");
 var _preferencesPanel = require("../preferencesPanel");
-var _pivoting = require("../pivoting");
+var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const columnsStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.columns = {
@@ -91,13 +91,30 @@ function useGridColumns(apiRef, props) {
     }
   }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
-    if ((0, _pivoting.gridPivotActiveSelector)(apiRef)) {
-      apiRef.current.updateNonPivotColumns(columns);
-      return;
+    let columnsToUpdate = columns;
+    if ((0, _gridPivotingSelectors.gridPivotActiveSelector)(apiRef)) {
+      const nonPivotColumns = [];
+      const pivotColumns = [];
+      const pivotInitialColumns = (0, _gridPivotingSelectors.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 = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnsToUpsert: columns,
+      columnsToUpsert: columnsToUpdate,
       initialState: undefined,
       keepOnlyColumnsToUpsert: false,
       updateInitialVisibilityModel: true
@@ -262,7 +279,7 @@ function useGridColumns(apiRef, props) {
     return initialValue;
   }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
-    const isPivotActive = (0, _pivoting.gridPivotActiveSelector)(apiRef);
+    const isPivotActive = (0, _gridPivotingSelectors.gridPivotActiveSelector)(apiRef);
     if (props.disableColumnSelector || isPivotActive) {
       return columnMenuItems;
     }

package/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/hooks/features/filter/gridFilterSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisibleRowsLookupSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredTopLevelRowCountSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredRowCountSelector = exports.gridFilteredDescendantRowCountSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilteredChildrenCountLookupSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = exports.gridExpandedSortedRowTreeLevelPositionLookupSelector = exports.gridExpandedSortedRowIndexLookupSelector = exports.gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowEntriesSelector = exports.gridExpandedRowCountSelector = void 0;
+exports.gridVisibleRowsLookupSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredTopLevelRowCountSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredSortedDepthRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredRowCountSelector = exports.gridFilteredDescendantRowCountSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilteredChildrenCountLookupSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = exports.gridExpandedSortedRowTreeLevelPositionLookupSelector = exports.gridExpandedSortedRowIndexLookupSelector = exports.gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowEntriesSelector = exports.gridExpandedRowCountSelector = void 0;
 var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
 var _createSelector = require("../../../utils/createSelector");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
@@ -112,16 +112,33 @@ const gridExpandedSortedRowTreeLevelPositionLookupSelector = exports.gridExpande
 });
 
 /**
- * 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
  */
-const gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridExpandedSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
+const gridFilteredSortedDepthRowEntriesSelector = exports.gridFilteredSortedDepthRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridFilteredSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.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
+ */
+const gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelector)(gridFilteredSortedDepthRowEntriesSelector, filteredSortedDepthRows => filteredSortedDepthRows[0] ?? []);
+
 /**
  * Get the amount of rows accessible after the filtering process.
  * @category Filtering

package/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/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/hooks/features/filter/gridFilterUtils.js

@@ -92,7 +92,7 @@ const removeDiacritics = value => {
   return value;
 };
 exports.removeDiacritics = removeDiacritics;
-const getFilterCallbackFromItem = (filterItem, apiRef) => {
+const getFilterCallbackFromItem = (filterItem, filterValueGetter, apiRef) => {
   if (!filterItem.field || !filterItem.operator) {
     return null;
   }
@@ -132,7 +132,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);
       }
@@ -143,16 +143,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;
   }
@@ -192,13 +197,18 @@ 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.
  */
 exports.shouldQuickFilterExcludeHiddenColumns = shouldQuickFilterExcludeHiddenColumns;
-const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
+const buildAggregatedQuickFilterApplier = (filterModel, filterValueGetter, apiRef) => {
   const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
@@ -251,7 +261,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;
         }
@@ -269,9 +279,9 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
     return result;
   };
 };
-const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+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;
@@ -279,14 +289,14 @@ const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) => {
 };
 exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;
 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;
 };
-const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) => {
-  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+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/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/hooks/features/filter/useGridFilter.js

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

package/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/hooks/features/rows/gridRowsSelector.js

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

package/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/hooks/features/rows/index.js

@@ -14,6 +14,7 @@ var _exportNames = {
   gridRowMaximumTreeDepthSelector: true,
   gridDataRowIdsSelector: true,
   gridRowNodeSelector: true,
+  gridRowSelector: true,
   GRID_ROOT_GROUP_ID: true,
   checkGridRowIdIsValid: true,
   isAutogeneratedRow: true
@@ -60,6 +61,12 @@ Object.defineProperty(exports, "gridRowNodeSelector", {
     return _gridRowsSelector.gridRowNodeSelector;
   }
 });
+Object.defineProperty(exports, "gridRowSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowSelector;
+  }
+});
 Object.defineProperty(exports, "gridRowTreeDepthsSelector", {
   enumerable: true,
   get: function () {

package/hooks/features/rows/useGridParamsApi.js

@@ -46,10 +46,22 @@ 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,
@@ -60,13 +72,10 @@ 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/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/hooks/features/sorting/gridSortingUtils.js

@@ -27,12 +27,17 @@ exports.mergeStateWithSortModel = mergeStateWithSortModel;
 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;
@@ -50,7 +55,7 @@ const parseSortItem = (sortItem, apiRef) => {
     id,
     field: column.field,
     rowNode: (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, id),
-    value: apiRef.current.getCellValue(id, column.field),
+    value: sortValueGetter(id, column.field),
     api: apiRef.current
   });
   return {
@@ -82,11 +87,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.
  */
-const buildAggregatedSortingApplier = (sortModel, apiRef) => {
-  const comparatorList = sortModel.map(item => parseSortItem(item, apiRef)).filter(comparator => !!comparator);
+const buildAggregatedSortingApplier = (sortModel, sortValueGetter, apiRef) => {
+  const comparatorList = sortModel.map(item => parseSortItem(item, sortValueGetter, apiRef)).filter(comparator => !!comparator);
   if (comparatorList.length === 0) {
     return null;
   }

package/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/hooks/features/sorting/useGridSorting.js

@@ -35,7 +35,7 @@ const sortingStateInitializer = (state, props) => {
  * @requires useGridColumns (event)
  */
 exports.sortingStateInitializer = sortingStateInitializer;
-const useGridSorting = (apiRef, props) => {
+const useGridSorting = (apiRef, props, configuration) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridSorting');
   apiRef.current.registerControlState({
     stateId: 'sortModel',
@@ -88,6 +88,7 @@ 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');
@@ -98,7 +99,7 @@ const useGridSorting = (apiRef, props) => {
         });
       }
       const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
-      const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, apiRef);
+      const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, sortValueGetter, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList
       });
@@ -109,7 +110,7 @@ const useGridSorting = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('sortedRowsSet');
-  }, [apiRef, logger, props.sortingMode]);
+  }, [apiRef, logger, configuration, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
     const currentModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
     if (currentModel !== model) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.11.2
+ * @mui/x-data-grid v8.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -41,7 +41,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 export type { GridAggregatedFilterItemApplier, GridAggregatedFilterItemApplierResult } from "../hooks/features/filter/gridFilterState.js";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";