@mui/x-data-grid 5.6.1 → 5.9.0

package/models/colDef/gridColDef.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridCellValue } from '../gridCell';
 import { GridCellClassNamePropType } from '../gridCellClass';
 import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass';
 import { GridFilterOperator } from '../gridFilterOperator';
@@ -10,8 +9,8 @@ import { GridColType, GridNativeColTypes } from './gridColType';
 import { GridRowParams } from '../params/gridRowParams';
 import { GridValueOptionsParams } from '../params/gridValueOptionsParams';
 import { GridActionsCellItemProps } from '../../components/cell/GridActionsCellItem';
-import { GridRowModel } from '../gridRows';
 import { GridEditCellProps } from '../gridEditRowModel';
+import type { GridValidRowModel } from '../gridRows';
 /**
  * Alignment used in position elements in Cells.
  */
@@ -27,7 +26,7 @@ export declare type GridKeyValue = string | number | boolean;
 /**
  * Column Definition interface.
  */
-export interface GridColDef {
+export interface GridColDef<R extends GridValidRowModel = any, V = any, F = V> {
     /**
      * The column identifier. It's used to map with [[GridRowModel]] values.
      */
@@ -103,7 +102,7 @@ export interface GridColDef {
     /**
      * A comparator function used to sort rows.
      */
-    sortComparator?: GridComparatorFn;
+    sortComparator?: GridComparatorFn<V>;
     /**
      * Type allows to merge this object with a default definition [[GridColDef]].
      * @default 'string'
@@ -112,53 +111,58 @@ export interface GridColDef {
     /**
      * To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels.
      */
-    valueOptions?: Array<ValueOptions> | ((params: GridValueOptionsParams) => Array<ValueOptions>);
+    valueOptions?: Array<ValueOptions> | ((params: GridValueOptionsParams<R>) => Array<ValueOptions>);
     /**
      * Allows to align the column values in cells.
      */
     align?: GridAlignment;
     /**
      * Function that allows to get a specific data instead of field to render in the cell.
-     * @param {GridValueGetterParams} params Object containing parameters for the getter.
-     * @returns {GridCellValue} The cell value.
+     * @template R, V
+     * @param {GridValueGetterParams<any, R>} params Object containing parameters for the getter.
+     * @returns {V} The cell value.
      */
-    valueGetter?: (params: GridValueGetterParams) => GridCellValue;
+    valueGetter?: (params: GridValueGetterParams<any, R>) => V;
     /**
      * Function that allows to customize how the entered value is stored in the row.
      * It only works with cell/row editing.
-     * @param {GridValueSetterParams} params Object containing parameters for the setter.
-     * @returns {GridRowModel} The row with the updated field.
+     * @template R, V
+     * @param {GridValueSetterParams<R, V>} params Object containing parameters for the setter.
+     * @returns {R} The row with the updated field.
      */
-    valueSetter?: (params: GridValueSetterParams) => GridRowModel;
+    valueSetter?: (params: GridValueSetterParams<R, V>) => R;
     /**
      * Function that allows to apply a formatter before rendering its value.
-     * @param {GridValueFormatterParams} params Object containing parameters for the formatter.
-     * @returns {GridCellValue} The formatted value.
+     * @template V, F
+     * @param {GridValueFormatterParams<V>} params Object containing parameters for the formatter.
+     * @returns {F} The formatted value.
      */
-    valueFormatter?: (params: GridValueFormatterParams) => GridCellValue;
+    valueFormatter?: (params: GridValueFormatterParams<V>) => F;
     /**
      * Function that takes the user-entered value and converts it to a value used internally.
-     * @param {GridCellValue} value The user-entered value.
-     * @param {GridCellParams} params The params when called before saving the value.
-     * @returns {GridCellValue} The converted value to use internally.
+     * @template R, V, F
+     * @param {F | undefined} value The user-entered value.
+     * @param {GridCellParams<V, R, F>} params The params when called before saving the value.
+     * @returns {V} The converted value to use internally.
      */
-    valueParser?: (value: GridCellValue, params?: GridCellParams) => GridCellValue;
+    valueParser?: (value: F | undefined, params?: GridCellParams<V, R, F>) => V;
     /**
      * Class name that will be added in cells for that column.
      */
     cellClassName?: GridCellClassNamePropType;
     /**
      * Allows to override the component rendered as cell for this column.
-     * @param {GridRenderCellParams} params Object containing parameters for the renderer.
+     * @template R, V, F
+     * @param {GridRenderCellParams<V, R, F>} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
-    renderCell?: (params: GridRenderCellParams) => React.ReactNode;
+    renderCell?: (params: GridRenderCellParams<V, R, F>) => React.ReactNode;
     /**
      * Allows to override the component rendered in edit cell mode for this column.
      * @param {GridRenderEditCellParams} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
-    renderEditCell?: (params: GridRenderEditCellParams) => React.ReactNode;
+    renderEditCell?: (params: GridRenderEditCellParams<V>) => React.ReactNode;
     /**
      * Callback fired when the edit props of the cell changes.
      * It allows to process the props that saved into the state.
@@ -172,10 +176,11 @@ export interface GridColDef {
     headerClassName?: GridColumnHeaderClassNamePropType;
     /**
      * Allows to render a component in the column header cell.
-     * @param {GridColumnHeaderParams} params Object containing parameters for the renderer.
+     * @template V, R, F
+     * @param {GridColumnHeaderParams<V, R, F>} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
-    renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode;
+    renderHeader?: (params: GridColumnHeaderParams<V, R, F>) => React.ReactNode;
     /**
      * Header cell element alignment.
      */
@@ -198,7 +203,7 @@ export interface GridColDef {
     /**
      * Allows setting the filter operators for this column.
      */
-    filterOperators?: GridFilterOperator[];
+    filterOperators?: GridFilterOperator<R, V, F>[];
     /**
      * If `true`, this column cannot be reordered.
      * @default false
@@ -209,6 +214,11 @@ export interface GridColDef {
      * @default false
      */
     disableExport?: boolean;
+    /**
+     * Number of columns a cell should span.
+     * @default 1
+     */
+    colSpan?: number | ((params: GridCellParams<V, R, F>) => number | undefined);
 }
 export interface GridActionsColDef extends GridColDef {
     /**
@@ -223,13 +233,17 @@ export interface GridActionsColDef extends GridColDef {
      */
     getActions: (params: GridRowParams) => React.ReactElement<GridActionsCellItemProps>[];
 }
-export declare type GridEnrichedColDef = GridColDef | GridActionsColDef;
-export declare type GridColumns = GridEnrichedColDef[];
-export declare type GridColTypeDef = Omit<GridColDef, 'field'> & {
+export declare type GridEnrichedColDef<R extends GridValidRowModel = any, V = any, F = V> = GridColDef<R, V, F> | GridActionsColDef;
+export declare type GridColumns<R extends GridValidRowModel = any> = GridEnrichedColDef<R>[];
+export declare type GridColTypeDef<V = any, F = V> = Omit<GridColDef<V, any, F>, 'field'> & {
     extendType?: GridNativeColTypes;
 };
-export declare type GridStateColDef = GridEnrichedColDef & {
+export declare type GridStateColDef<R extends GridValidRowModel = any, V = any, F = V> = GridEnrichedColDef<R, V, F> & {
     computedWidth: number;
+    /**
+     * If `true`, it means that at least one of the dimension's property of this column has been modified since the last time the column prop has changed.
+     */
+    hasBeenResized?: boolean;
 };
 /**
  * Meta Info about columns.

package/models/colDef/index.d.ts

@@ -1,4 +1,3 @@
 export * from './gridColDef';
 export * from './gridColType';
 export * from './gridColumnTypesRecord';
-export * from './gridDefaultColumnTypes';

package/models/colDef/index.js

@@ -2,5 +2,4 @@
 export * from './gridColDef'; // Other types
 
 export * from './gridColType';
-export * from './gridColumnTypesRecord';
-export * from './gridDefaultColumnTypes';
+export * from './gridColumnTypesRecord';

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
+import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
+import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
 import type { GridSortModel } from '../gridSortModel';
@@ -8,8 +9,9 @@ import type { GridSelectionModel } from '../gridSelectionModel';
 import type { ElementSize } from '../elementSize';
 import type { MuiBaseEvent } from '../muiEvent';
 import type { GridRowId, GridRowTreeNodeConfig } from '../gridRows';
-import type { GridPreProcessingGroup } from '../../hooks/core/preProcessing';
 import type { GridColumnVisibilityModel } from '../../hooks/features/columns';
+import type { GridStrategyProcessorName } from '../../hooks/core/strategyProcessing';
+import { GridRowEditStartParams, GridRowEditStopParams } from '../params/gridRowParams';
 export interface GridRowEventLookup {
     rowClick: {
         params: GridRowParams;
@@ -159,13 +161,10 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
     debouncedResize: {
         params: ElementSize;
     };
-    rowGroupsPreProcessingChange: {};
-    preProcessorRegister: {
-        params: GridPreProcessingGroup;
-    };
-    preProcessorUnregister: {
-        params: GridPreProcessingGroup;
+    activeStrategyProcessorChange: {
+        params: GridStrategyProcessorName;
     };
+    strategyAvailabilityChange: {};
     columnsChange: {
         params: string[];
     };
@@ -194,7 +193,8 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridColumnOrderChangeParams;
     };
     rowsSet: {};
-    visibleRowsSet: {};
+    filteredRowsSet: {};
+    sortedRowsSet: {};
     rowExpansionChange: {
         params: GridRowTreeNodeConfig;
     };
@@ -202,11 +202,11 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridCellParams;
     };
     cellEditStart: {
-        params: GridCellParams;
+        params: GridCellEditStartParams;
         event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     };
     cellEditStop: {
-        params: GridCellParams;
+        params: GridCellEditStopParams;
         event: MuiBaseEvent;
     };
     cellEditCommit: {
@@ -218,11 +218,11 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         event: React.SyntheticEvent<HTMLElement> | {};
     };
     rowEditStart: {
-        params: GridRowParams;
+        params: GridRowEditStartParams;
         event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     };
     rowEditStop: {
-        params: GridRowParams;
+        params: GridRowEditStopParams;
         event: MuiBaseEvent;
     };
     rowEditCommit: {
@@ -246,6 +246,7 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
     };
     rowsScroll: {
         params: GridScrollParams;
+        event: React.UIEvent | MuiBaseEvent;
     };
     virtualScrollerContentSizeChange: {};
     headerSelectionCheckboxChange: {
@@ -255,4 +256,10 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridRowSelectionCheckboxParams;
         event: React.ChangeEvent<HTMLElement>;
     };
+    preferencePanelClose: {
+        params: GridPreferencePanelParams;
+    };
+    preferencePanelOpen: {
+        params: GridPreferencePanelParams;
+    };
 }

package/models/events/gridEvents.d.ts

@@ -93,7 +93,7 @@ declare enum GridEvents {
      */
     rowEditCommit = "rowEditCommit",
     /**
-     * Fired when a [navigation key](/components/data-grid/accessibility#keyboard-navigation) is pressed in a cell.
+     * Fired when a [navigation key](/x/react-data-grid/accessibility#keyboard-navigation) is pressed in a cell.
      * @ignore - do not document.
      */
     cellNavigationKeyDown = "cellNavigationKeyDown",
@@ -129,7 +129,7 @@ declare enum GridEvents {
      */
     columnHeaderFocus = "columnHeaderFocus",
     /**
-     * Fired when a [navigation key](/components/data-grid/accessibility#keyboard-navigation) is pressed in a column header.
+     * Fired when a [navigation key](/x/react-data-grid/accessibility#keyboard-navigation) is pressed in a column header.
      * @ignore - do not document.
      */
     columnHeaderNavigationKeyDown = "columnHeaderNavigationKeyDown",
@@ -255,10 +255,15 @@ declare enum GridEvents {
      */
     rowExpansionChange = "rowExpansionChange",
     /**
-     * Fired when the visible rows are updated
+     * Fired when the sorted rows are updated
+     * @ignore - do not document
+     */
+    sortedRowsSet = "sortedRowsSet",
+    /**
+     * Fired when the filtered rows are updated
      * @ignore - do not document.
      */
-    visibleRowsSet = "visibleRowsSet",
+    filteredRowsSet = "filteredRowsSet",
     /**
      * Fired when the columns state is changed.
      */
@@ -274,20 +279,15 @@ declare enum GridEvents {
      */
     pinnedColumnsChange = "pinnedColumnsChange",
     /**
-     * Fired when a pre-processor is registered.
-     * @ignore - do not document.
-     */
-    preProcessorRegister = "preProcessorRegister",
-    /**
-     * Fired when a pre-processor is unregistered.
+     * Fired when a processor of the active strategy changes.
      * @ignore - do not document.
      */
-    preProcessorUnregister = "preProcessorUnregister",
+    activeStrategyProcessorChange = "activeStrategyProcessorChange",
     /**
-     * Fired when the row grouping function is changed
+     * Fired when the callback to decide if a strategy is available or not changes.
      * @ignore - do not document.
      */
-    rowGroupsPreProcessingChange = "rowGroupsPreProcessingChange",
+    strategyAvailabilityChange = "strategyAvailabilityChange",
     /**
      * Fired when the sort model changes.
      */
@@ -315,7 +315,15 @@ declare enum GridEvents {
      * Fired when the content size used by the `GridVirtualScroller` changes.
      * @ignore - do not document.
      */
-    virtualScrollerContentSizeChange = "virtualScrollerContentSizeChange"
+    virtualScrollerContentSizeChange = "virtualScrollerContentSizeChange",
+    /**
+     * Fired when the preferences panel is closed.
+     */
+    preferencePanelClose = "preferencePanelClose",
+    /**
+     * Fired when the preferences panel is opened.
+     */
+    preferencePanelOpen = "preferencePanelOpen"
 }
 export declare type GridEventsStr = keyof GridEventLookup;
 export { GridEvents };

package/models/events/gridEvents.js

@@ -59,19 +59,21 @@ var GridEvents;
   GridEvents["columnOrderChange"] = "columnOrderChange";
   GridEvents["rowsSet"] = "rowsSet";
   GridEvents["rowExpansionChange"] = "rowExpansionChange";
-  GridEvents["visibleRowsSet"] = "visibleRowsSet";
+  GridEvents["sortedRowsSet"] = "sortedRowsSet";
+  GridEvents["filteredRowsSet"] = "filteredRowsSet";
   GridEvents["columnsChange"] = "columnsChange";
   GridEvents["detailPanelsExpandedRowIdsChange"] = "detailPanelsExpandedRowIdsChange";
   GridEvents["pinnedColumnsChange"] = "pinnedColumnsChange";
-  GridEvents["preProcessorRegister"] = "preProcessorRegister";
-  GridEvents["preProcessorUnregister"] = "preProcessorUnregister";
-  GridEvents["rowGroupsPreProcessingChange"] = "rowGroupsPreProcessingChange";
+  GridEvents["activeStrategyProcessorChange"] = "activeStrategyProcessorChange";
+  GridEvents["strategyAvailabilityChange"] = "strategyAvailabilityChange";
   GridEvents["sortModelChange"] = "sortModelChange";
   GridEvents["filterModelChange"] = "filterModelChange";
   GridEvents["columnVisibilityModelChange"] = "columnVisibilityModelChange";
   GridEvents["stateChange"] = "stateChange";
   GridEvents["columnVisibilityChange"] = "columnVisibilityChange";
   GridEvents["virtualScrollerContentSizeChange"] = "virtualScrollerContentSizeChange";
+  GridEvents["preferencePanelClose"] = "preferencePanelClose";
+  GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/models/gridCell.d.ts

@@ -8,6 +8,7 @@ export declare type GridCellMode = 'edit' | 'view';
 export declare type GridRowMode = 'edit' | 'view';
 /**
  * The cell value type.
+ * @deprecated Use `any` or the V generic passed to most interfaces.
  */
 export declare type GridCellValue = string | number | boolean | Date | null | undefined | object;
 /**

package/models/gridColumnSpanning.d.ts

@@ -0,0 +1,12 @@
+export declare type GridColumnIndex = number;
+export declare type GridCellColSpanInfo = {
+    spannedByColSpan: true;
+    rightVisibleCellIndex: GridColumnIndex;
+    leftVisibleCellIndex: GridColumnIndex;
+} | {
+    spannedByColSpan: false;
+    cellProps: {
+        colSpan: number;
+        width: number;
+    };
+};

package/models/gridColumnSpanning.js

@@ -0,0 +1 @@
+export {};

package/models/gridEditRowModel.d.ts

@@ -1,7 +1,7 @@
-import { GridCellValue } from './gridCell';
-export interface GridEditCellProps {
-    value: GridCellValue;
+export interface GridEditCellProps<V = any> {
+    value?: V | undefined;
     isValidating?: boolean;
+    isProcessingProps?: boolean;
     [prop: string]: any;
 }
 export declare type GridEditRowProps = {
@@ -10,6 +10,7 @@ export declare type GridEditRowProps = {
 export declare type GridEditRowsModel = {
     [rowId: string]: GridEditRowProps;
 };
+export declare type GridEditingState = GridEditRowsModel;
 export declare type GridEditMode = 'cell' | 'row';
 declare enum GridEditModes {
     Cell = "cell",

package/models/gridEditRowModel.js

@@ -1,3 +1,4 @@
+// TODO v6: rename to GridEditingState
 var GridEditModes;
 
 (function (GridEditModes) {

package/models/gridFilterOperator.d.ts

@@ -5,10 +5,11 @@ import { GridFilterInputMultipleSingleSelectProps } from '../components/panel/fi
 import { GridFilterItem } from './gridFilterItem';
 import { GridCellParams } from './params/gridCellParams';
 import type { GridStateColDef } from './colDef/gridColDef';
+import type { GridValidRowModel } from './gridRows';
 /**
  * Filter operator definition interface.
  */
-export interface GridFilterOperator {
+export interface GridFilterOperator<R extends GridValidRowModel = any, V = any, F = V> {
     /**
      * The label of the filter operator.
      */
@@ -25,7 +26,7 @@ export interface GridFilterOperator {
      * @param {GridStateColDef} column The column from which we want to filter the rows.
      * @returns {null | ((params: GridCellParams) => boolean)} The function to call to check if a row poss this filter item or not.
      */
-    getApplyFilterFn: (filterItem: GridFilterItem, column: GridStateColDef) => null | ((params: GridCellParams) => boolean);
+    getApplyFilterFn: (filterItem: GridFilterItem, column: GridStateColDef<R, V, F>) => null | ((params: GridCellParams<V, R, F>) => boolean);
     /**
      * The input component to render in the filter panel for this filter operator.
      */

package/models/gridRows.d.ts

@@ -1,17 +1,16 @@
 import type { GridKeyValue } from './colDef/gridColDef';
-export declare type GridRowsProp = Readonly<GridRowModel[]>;
+export declare type GridValidRowModel = {
+    [key: string]: any;
+};
+export declare type GridRowsProp<R = any> = Readonly<GridRowModel<R>[]>;
 /**
  * @deprecated prefer GridRowModel.
  */
-export declare type GridRowData<T = {
-    [key: string]: any;
-}> = T;
+export declare type GridRowData = GridValidRowModel;
 /**
  * The key value object representing the data of a row.
  */
-export declare type GridRowModel<T = {
-    [key: string]: any;
-}> = T;
+export declare type GridRowModel<R extends GridValidRowModel = any> = R;
 export declare type GridUpdateAction = 'delete';
 export interface GridRowModelUpdate extends GridRowModel {
     _action?: GridUpdateAction;
@@ -68,12 +67,12 @@ export interface GridRowsMeta {
     positions: number[];
 }
 export declare type GridRowTreeConfig = Record<GridRowId, GridRowTreeNodeConfig>;
-export declare type GridRowsLookup = Record<GridRowId, GridRowModel>;
+export declare type GridRowsLookup<R extends GridValidRowModel = any> = Record<GridRowId, R>;
 /**
  * The type of Id supported by the grid.
  */
 export declare type GridRowId = string | number;
-export interface GridRowEntry {
+export interface GridRowEntry<R extends GridValidRowModel = any> {
     /**
      * The row id.
      */
@@ -81,16 +80,9 @@ export interface GridRowEntry {
     /**
      * The row model.
      */
-    model: GridRowModel;
+    model: R;
 }
 /**
  * The function to retrieve the id of a [[GridRowModel]].
  */
-export declare type GridRowIdGetter = (row: GridRowModel) => GridRowId;
-/**
- * An helper function to check if the id provided is valid.
- * @param {GridRowId} id Id as [[GridRowId]].
- * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
- * @param {string} detailErrorMessage A custom error message to display for invalid IDs
- */
-export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
+export declare type GridRowIdGetter<R extends GridValidRowModel = any> = (row: R) => GridRowId;

package/models/gridRows.js

@@ -1,31 +1 @@
-/**
- * @deprecated prefer GridRowModel.
- */
-
-/**
- * The key value object representing the data of a row.
- */
-
-/**
- * The grid rows total height and row positions.
- */
-
-/**
- * The type of Id supported by the grid.
- */
-
-/**
- * The function to retrieve the id of a [[GridRowModel]].
- */
-
-/**
- * An helper function to check if the id provided is valid.
- * @param {GridRowId} id Id as [[GridRowId]].
- * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
- * @param {string} detailErrorMessage A custom error message to display for invalid IDs
- */
-export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
-  if (id == null) {
-    throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
-  }
-}
+export {};

package/models/gridSlotsComponent.d.ts

@@ -50,6 +50,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default GridCell
      */
     Cell: React.JSXElementConstructor<any>;
+    /**
+     * Filter icon component rendered in each column header.
+     * @default GridColumnHeaderFilterIconButton
+     */
+    ColumnHeaderFilterIconButton: React.JSXElementConstructor<any>;
     /**
      * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
      * @default GridColumnMenu

package/models/gridSlotsComponentsProps.d.ts

@@ -11,6 +11,7 @@ export interface GridSlotsComponentsProps {
     basePopper?: any;
     baseTooltip?: any;
     cell?: any;
+    columnHeaderFilterIconButton?: any;
     columnMenu?: any;
     columnsPanel?: any;
     errorOverlay?: any;

package/models/gridSortModel.d.ts

@@ -1,10 +1,9 @@
-import { GridCellValue } from './gridCell';
 import { GridRowId, GridRowTreeNodeConfig } from './gridRows';
 export declare type GridSortDirection = 'asc' | 'desc' | null | undefined;
-export interface GridSortCellParams {
+export interface GridSortCellParams<V = any> {
     id: GridRowId;
     field: string;
-    value: GridCellValue;
+    value: V;
     rowNode: GridRowTreeNodeConfig;
     /**
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
@@ -14,7 +13,7 @@ export interface GridSortCellParams {
 /**
  * The type of the sort comparison function.
  */
-export declare type GridComparatorFn = (v1: GridCellValue, v2: GridCellValue, cellParams1: GridSortCellParams, cellParams2: GridSortCellParams) => number;
+export declare type GridComparatorFn<V = any> = (v1: V, v2: V, cellParams1: GridSortCellParams<V>, cellParams2: GridSortCellParams<V>) => number;
 /**
  * Object that represents the column sorted data, part of the [[GridSortModel]].
  */

package/models/index.d.ts

@@ -5,7 +5,6 @@ export * from './gridEditRowModel';
 export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
-export * from './gridFilterOperator';
 export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
@@ -24,3 +23,4 @@ export * from './logger';
 export * from './muiEvent';
 export * from './events';
 export * from './gridSortModel';
+export * from './gridFilterOperator';

package/models/index.js

@@ -5,7 +5,6 @@ export * from './gridEditRowModel';
 export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
-export * from './gridFilterOperator';
 export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
@@ -23,4 +22,5 @@ export * from './gridExport';
 export * from './logger';
 export * from './muiEvent';
 export * from './events';
-export * from './gridSortModel';
+export * from './gridSortModel';
+export * from './gridFilterOperator';