@mui/x-data-grid 5.8.0 → 5.11.0

package/models/props/DataGridProps.d.ts

@@ -9,7 +9,7 @@ import { Logger } from '../logger';
 import { GridSortDirection, GridSortModel } from '../gridSortModel';
 import { GridSlotsComponent } from '../gridSlotsComponent';
 import { GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
-import { GridEventListener, GridEvents } from '../events';
+import { GridEventListener } from '../events';
 import { GridCallbackDetails, GridLocaleText } from '../api';
 import { GridApiCommunity } from '../api/gridApiCommunity';
 import type { GridColumnTypesRecord } from '../colDef';
@@ -22,6 +22,7 @@ import { GridInputSelectionModel, GridSelectionModel } from '../gridSelectionMod
 import { GridInitialStateCommunity } from '../gridStateCommunity';
 import { GridSlotsComponentsProps } from '../gridSlotsComponentsProps';
 import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces';
+import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 export interface GridExperimentalFeatures {
     /**
      * Will be part of the premium-plan when fully ready.
@@ -158,7 +159,7 @@ export interface DataGridPropsWithDefaultValues {
      */
     disableMultipleColumnsFiltering: boolean;
     /**
-     * If `true`, multiple selection using the CTRL or CMD key is disabled.
+     * If `true`, multiple selection using the Ctrl or CMD key is disabled.
      * @default false
      */
     disableMultipleSelection: boolean;
@@ -214,6 +215,13 @@ export interface DataGridPropsWithDefaultValues {
      * @default false
      */
     hideFooterSelectedRowCount: boolean;
+    /**
+     * If `true`, the selection model will retain selected rows that do not exist.
+     * Useful when using server side pagination and row selections need to be retained
+     * when changing pages.
+     * @default false
+     */
+    keepNonExistentRowsSelected: boolean;
     /**
      * Pass a custom logger in the components that implements the [[Logger]] interface.
      * @default console
@@ -370,130 +378,130 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
      * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
      * @param {GridCallbackDetails} details Additional details for this callback.
-     * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+     * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
      */
-    onEditCellPropsChange?: GridEventListener<GridEvents.editCellPropsChange>;
+    onEditCellPropsChange?: GridEventListener<'editCellPropsChange'>;
     /**
      * Callback fired when the cell changes are committed.
      * @param {GridCellEditCommitParams} params With all properties from [[GridCellEditCommitParams]].
      * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onCellEditCommit?: GridEventListener<GridEvents.cellEditCommit>;
+    onCellEditCommit?: GridEventListener<'cellEditCommit'>;
     /**
      * Callback fired when the cell turns to edit mode.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event The event that caused this prop to be called.
      */
-    onCellEditStart?: GridEventListener<GridEvents.cellEditStart>;
+    onCellEditStart?: GridEventListener<'cellEditStart'>;
     /**
      * Callback fired when the cell turns to view mode.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
      */
-    onCellEditStop?: GridEventListener<GridEvents.cellEditStop>;
+    onCellEditStop?: GridEventListener<'cellEditStop'>;
     /**
      * Callback fired when the row changes are committed.
      * @param {GridRowId} id The row id.
      * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
      */
-    onRowEditCommit?: GridEventListener<GridEvents.rowEditCommit>;
+    onRowEditCommit?: GridEventListener<'rowEditCommit'>;
     /**
      * Callback fired when the row turns to edit mode.
      * @param {GridRowParams} params With all properties from [[GridRowParams]].
      * @param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event The event that caused this prop to be called.
      */
-    onRowEditStart?: GridEventListener<GridEvents.rowEditStart>;
+    onRowEditStart?: GridEventListener<'rowEditStart'>;
     /**
      * Callback fired when the row turns to view mode.
      * @param {GridRowParams} params With all properties from [[GridRowParams]].
      * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
      */
-    onRowEditStop?: GridEventListener<GridEvents.rowEditStop>;
+    onRowEditStop?: GridEventListener<'rowEditStop'>;
     /**
      * Callback fired when an exception is thrown in the grid.
      * @param {any} args The arguments passed to the `showError` call.
      * @param {MuiEvent<{}>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onError?: GridEventListener<GridEvents.componentError>;
+    onError?: GridEventListener<'componentError'>;
     /**
      * Callback fired when any cell is clicked.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onCellClick?: GridEventListener<GridEvents.cellClick>;
+    onCellClick?: GridEventListener<'cellClick'>;
     /**
      * Callback fired when a double click event comes from a cell element.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onCellDoubleClick?: GridEventListener<GridEvents.cellDoubleClick>;
+    onCellDoubleClick?: GridEventListener<'cellDoubleClick'>;
     /**
      * Callback fired when a cell loses focus.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @param {MuiEvent<MuiBaseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onCellFocusOut?: GridEventListener<GridEvents.cellFocusOut>;
+    onCellFocusOut?: GridEventListener<'cellFocusOut'>;
     /**
      * Callback fired when a keydown event comes from a cell element.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @param {MuiEvent<React.KeyboardEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onCellKeyDown?: GridEventListener<GridEvents.cellKeyDown>;
+    onCellKeyDown?: GridEventListener<'cellKeyDown'>;
     /**
      * Callback fired when a click event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onColumnHeaderClick?: GridEventListener<GridEvents.columnHeaderClick>;
+    onColumnHeaderClick?: GridEventListener<'columnHeaderClick'>;
     /**
      * Callback fired when a double click event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onColumnHeaderDoubleClick?: GridEventListener<GridEvents.columnHeaderDoubleClick>;
+    onColumnHeaderDoubleClick?: GridEventListener<'columnHeaderDoubleClick'>;
     /**
      * Callback fired when a mouseover event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onColumnHeaderOver?: GridEventListener<GridEvents.columnHeaderOver>;
+    onColumnHeaderOver?: GridEventListener<'columnHeaderOver'>;
     /**
      * Callback fired when a mouseout event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onColumnHeaderOut?: GridEventListener<GridEvents.columnHeaderOut>;
+    onColumnHeaderOut?: GridEventListener<'columnHeaderOut'>;
     /**
      * Callback fired when a mouse enter event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onColumnHeaderEnter?: GridEventListener<GridEvents.columnHeaderEnter>;
+    onColumnHeaderEnter?: GridEventListener<'columnHeaderEnter'>;
     /**
      * Callback fired when a mouse leave event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onColumnHeaderLeave?: GridEventListener<GridEvents.columnHeaderLeave>;
+    onColumnHeaderLeave?: GridEventListener<'columnHeaderLeave'>;
     /**
      * Callback fired when a column is reordered.
      * @param {GridColumnOrderChangeParams} params With all properties from [[GridColumnOrderChangeParams]].
      * @param {MuiEvent<{}>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onColumnOrderChange?: GridEventListener<GridEvents.columnOrderChange>;
+    onColumnOrderChange?: GridEventListener<'columnOrderChange'>;
     /**
      * Callback fired when a column visibility changes.
      * Only works when no `columnVisibilityModel` is provided and if we change the visibility of a single column at a time.
@@ -502,7 +510,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      * @deprecated Use `onColumnVisibilityModelChange` instead.
      */
-    onColumnVisibilityChange?: GridEventListener<GridEvents.columnVisibilityChange>;
+    onColumnVisibilityChange?: GridEventListener<'columnVisibilityChange'>;
     /**
      * Callback fired when a row is clicked.
      * Not called if the target clicked is an interactive element added by the built-in columns.
@@ -510,21 +518,21 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onRowClick?: GridEventListener<GridEvents.rowClick>;
+    onRowClick?: GridEventListener<'rowClick'>;
     /**
      * Callback fired when a double click event comes from a row container element.
      * @param {GridRowParams} params With all properties from [[RowParams]].
      * @param {MuiEvent<React.MouseEvent>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onRowDoubleClick?: GridEventListener<GridEvents.rowDoubleClick>;
+    onRowDoubleClick?: GridEventListener<'rowDoubleClick'>;
     /**
      * Callback fired when the grid is resized.
      * @param {ElementSize} containerSize With all properties from [[ElementSize]].
      * @param {MuiEvent<{}>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onResize?: GridEventListener<GridEvents.debouncedResize>;
+    onResize?: GridEventListener<'debouncedResize'>;
     /**
      * Callback fired when the state of the grid is updated.
      * @param {GridState} state The new state.
@@ -532,7 +540,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      * @internal
      */
-    onStateChange?: GridEventListener<GridEvents.stateChange>;
+    onStateChange?: GridEventListener<'stateChange'>;
     /**
      * The zero-based index of the current page.
      * @default 0
@@ -562,14 +570,14 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {MuiEvent<{}>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onPreferencePanelClose?: GridEventListener<GridEvents.preferencePanelClose>;
+    onPreferencePanelClose?: GridEventListener<'preferencePanelClose'>;
     /**
      * Callback fired when the preferences panel is opened.
      * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
      * @param {MuiEvent<{}>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onPreferencePanelOpen?: GridEventListener<GridEvents.preferencePanelOpen>;
+    onPreferencePanelOpen?: GridEventListener<'preferencePanelOpen'>;
     /**
      * Set the edit rows model of the grid.
      */
@@ -580,6 +588,26 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onEditRowsModelChange?: (editRowsModel: GridEditRowsModel, details: GridCallbackDetails) => void;
+    /**
+     * Controls the modes of the cells.
+     */
+    cellModesModel?: GridCellModesModel;
+    /**
+     * Callback fired when the `cellModesModel` prop changes.
+     * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onCellModesModelChange?: (cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void;
+    /**
+     * Controls the modes of the rows.
+     */
+    rowModesModel?: GridRowModesModel;
+    /**
+     * Callback fired when the `rowModesModel` prop changes.
+     * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onRowModesModelChange?: (rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void;
     /**
      * Set the filter model of the grid.
      */

package/modern/DataGrid/DataGrid.js

@@ -58,6 +58,11 @@ DataGridRaw.propTypes = {
    */
   autoPageSize: PropTypes.bool,
 
+  /**
+   * Controls the modes of the cells.
+   */
+  cellModesModel: PropTypes.object,
+
   /**
    * If `true`, the grid get a first column with a checkbox that allows to select rows.
    * @default false
@@ -205,7 +210,9 @@ DataGridRaw.propTypes = {
       operatorValue: PropTypes.string,
       value: PropTypes.any
     })).isRequired,
-    linkOperator: PropTypes.oneOf(['and', 'or'])
+    linkOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterValues: PropTypes.array
   }),
 
   /**
@@ -293,6 +300,14 @@ DataGridRaw.propTypes = {
    */
   isRowSelectable: PropTypes.func,
 
+  /**
+   * If `true`, the selection model will retain selected rows that do not exist.
+   * Useful when using server side pagination and row selections need to be retained
+   * when changing pages.
+   * @default false
+   */
+  keepNonExistentRowsSelected: PropTypes.bool,
+
   /**
    * If `true`, a  loading overlay is displayed.
    */
@@ -380,6 +395,13 @@ DataGridRaw.propTypes = {
    */
   onCellKeyDown: PropTypes.func,
 
+  /**
+   * Callback fired when the `cellModesModel` prop changes.
+   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -458,7 +480,7 @@ DataGridRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: PropTypes.func,
 
@@ -566,6 +588,13 @@ DataGridRaw.propTypes = {
    */
   onRowEditStop: PropTypes.func,
 
+  /**
+   * Callback fired when the `rowModesModel` prop changes.
+   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when the selection state of one or multiple rows changes.
    * @param {GridSelectionModel} selectionModel With all the row ids [[GridSelectionModel]].
@@ -651,6 +680,11 @@ DataGridRaw.propTypes = {
    */
   rowHeight: PropTypes.number,
 
+  /**
+   * Controls the modes of the rows.
+   */
+  rowModesModel: PropTypes.object,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */

package/modern/DataGrid/useDataGridComponent.js

@@ -24,6 +24,7 @@ import { useGridEvents } from '../hooks/features/events/useGridEvents';
 import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
+import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export const useDataGridComponent = props => {
   const apiRef = useGridInitialization(undefined, props);
   /**
@@ -53,12 +54,13 @@ export const useDataGridComponent = props => {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridSorting(apiRef, props);
   useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -61,7 +61,8 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: GridFeatureModeConstant.client,
   throttleRowsMs: 0,
   disableColumnReorder: false,
-  disableColumnResize: false
+  disableColumnResize: false,
+  keepNonExistentRowsSelected: false
 };
 export const useDataGridProps = inProps => {
   if (inProps.pageSize > MAX_PAGE_SIZE) {

package/modern/colDef/gridActionsColDef.js

@@ -11,5 +11,6 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   headerName: '',
   disableColumnMenu: true,
   disableExport: true,
-  renderCell: renderActionsCell
+  renderCell: renderActionsCell,
+  getApplyQuickFilterFn: undefined
 });

package/modern/colDef/gridBooleanColDef.js

@@ -20,5 +20,6 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditBooleanCell,
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
-  filterOperators: getGridBooleanOperators()
+  filterOperators: getGridBooleanOperators(),
+  getApplyQuickFilterFn: undefined
 });

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -15,6 +15,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,
+  getApplyQuickFilterFn: undefined,
   valueGetter: params => {
     const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
     return selectionLookup[params.id] !== undefined;

package/modern/colDef/gridDateColDef.js

@@ -26,12 +26,14 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridDateComparator,
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
-  renderEditCell: renderEditDateCell
+  renderEditCell: renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });
 export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'dateTime',
   sortComparator: gridDateComparator,
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
-  renderEditCell: renderEditDateCell
+  renderEditCell: renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });

package/modern/colDef/gridNumericColDef.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { isNumber } from '../utils/utils';
-import { getGridNumericOperators } from './gridNumericOperators';
+import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
@@ -12,5 +12,6 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: ({
     value
   }) => value && isNumber(value) && value.toLocaleString() || value,
-  filterOperators: getGridNumericOperators()
+  filterOperators: getGridNumericOperators(),
+  getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/modern/colDef/gridNumericOperators.js

@@ -10,6 +10,17 @@ const parseNumericValue = value => {
   return Number(value);
 };
 
+export const getGridNumericQuickFilterFn = value => {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+
+  return ({
+    value: columnValue
+  }) => {
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+};
 export const getGridNumericOperators = () => [{
   label: '=',
   value: '=',

package/modern/colDef/gridSingleSelectColDef.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
-import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
+import { getGridSingleSelectOperators, getGridSingleSelectQuickFilterFn } from './gridSingleSelectOperators';
 export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  getApplyQuickFilterFn: getGridSingleSelectQuickFilterFn
 });

package/modern/colDef/gridSingleSelectOperators.js

@@ -9,6 +9,58 @@ const parseObjectValue = value => {
   return value.value;
 };
 
+export const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
+  if (!value) {
+    return null;
+  }
+
+  const {
+    valueOptions,
+    valueFormatter,
+    field
+  } = column;
+  const potentialValues = [parseObjectValue(value).toString()];
+  const iterableColumnValues = typeof valueOptions === 'function' ? valueOptions({
+    field
+  }) : valueOptions || [];
+
+  if (iterableColumnValues) {
+    iterableColumnValues.forEach(option => {
+      // for each valueOption, check if the formatted value
+      let optionValue;
+      let optionLabel;
+
+      if (typeof option === 'object') {
+        optionValue = option.value;
+        optionLabel = option.label;
+      } else {
+        optionValue = option;
+
+        if (valueFormatter) {
+          optionLabel = valueFormatter({
+            value: option,
+            field,
+            api: apiRef.current
+          });
+        } else {
+          optionLabel = option;
+        }
+      }
+
+      if (optionLabel.slice(0, value.length).toLowerCase() === value.toLowerCase()) {
+        if (!potentialValues.includes(optionValue)) {
+          potentialValues.push(optionValue.toString());
+        }
+      }
+    });
+  }
+
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue).toString()) : false;
+  };
+};
 export const getGridSingleSelectOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {

package/modern/colDef/gridStringColDef.js

@@ -1,6 +1,6 @@
 import { renderEditInputCell } from '../components/cell/GridEditInputCell';
 import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridStringOperators } from './gridStringOperators';
+import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
 export const GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
@@ -17,5 +17,6 @@ export const GRID_STRING_COL_DEF = {
   type: 'string',
   align: 'left',
   filterOperators: getGridStringOperators(),
-  renderEditCell: renderEditInputCell
+  renderEditCell: renderEditInputCell,
+  getApplyQuickFilterFn: getGridStringQuickFilterFn
 };

package/modern/colDef/gridStringOperators.js

@@ -1,6 +1,18 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+export const getGridStringQuickFilterFn = value => {
+  if (!value) {
+    return null;
+  }
+
+  const filterRegex = new RegExp(escapeRegExp(value), 'i');
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+};
 export const getGridStringOperators = () => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {

package/modern/components/GridFooter.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
 import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
@@ -11,7 +12,7 @@ import { GridFooterContainer } from './containers/GridFooterContainer';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
@@ -32,4 +33,12 @@ export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(prop
   }, props, {
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridFooter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridFooter };