@mui/x-data-grid 6.9.1 → 6.10.0

package/DataGrid/DataGrid.js

@@ -181,6 +181,7 @@ DataGridRaw.propTypes = {
       value: PropTypes.any
     })).isRequired,
     logicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterExcludeHiddenColumns: PropTypes.bool,
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
@@ -513,7 +514,10 @@ DataGridRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   pagination: props => {
     if (props.pagination === false) {
       return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));

package/README.md

@@ -7,7 +7,7 @@ It's part of MUI X, an open core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 // with npm
 npm install @mui/x-data-grid
 

package/components/GridPagination.js

@@ -25,7 +25,6 @@ const GridPaginationRoot = styled(TablePagination)(({
   }
 }));
 export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
-  var _rootProps$pageSizeOp;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -42,22 +41,36 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   const handlePageChange = React.useCallback((_, page) => {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      const option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
   if (process.env.NODE_ENV !== 'production') {
     var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/components/cell/GridEditDateCell.js

@@ -112,7 +112,7 @@ function GridEditDateCell(props) {
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   const handleInputRef = el => {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta != null && meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       const inputValue = inputRef.current.value;
       const parsedDate = parseValueToDate(inputValue);
       setValueState({

package/components/cell/GridEditInputCell.js

@@ -68,12 +68,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       unstable_skipValueParser: true
     }, event);
   }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   useEnhancedEffect(() => {
     if (hasFocus) {
       inputRef.current.focus();

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -13,7 +13,7 @@ export type GridToolbarQuickFilterProps = TextFieldProps & {
      * @param {any[]} values The new values passed to the quick filter model
      * @returns {string} The string to display in the text field
      */
-    quickFilterFormatter?: (values: GridFilterModel['quickFilterValues']) => string;
+    quickFilterFormatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
     /**
      * The debounce time in milliseconds.
      * @default 500

package/components/toolbar/GridToolbarQuickFilter.js

@@ -56,18 +56,20 @@ function GridToolbarQuickFilter(props) {
   const rootProps = useGridRootProps();
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
-  const [prevQuickFilterValues, setPrevQuickFilterValues] = React.useState(quickFilterValues);
+  const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
-    if (!isDeepEqual(prevQuickFilterValues, quickFilterValues)) {
+    if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
       // The model of quick filter value has been updated
-      setPrevQuickFilterValues(quickFilterValues);
+      prevQuickFilterValuesRef.current = quickFilterValues;
 
       // Update the input value if needed to match the new model
       setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
     }
-  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
+  }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
-    apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
+    const newQuickFilterValues = quickFilterParser(newSearchValue);
+    prevQuickFilterValuesRef.current = newQuickFilterValues;
+    apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   const debouncedUpdateSearchValue = React.useMemo(() => debounce(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
   const handleSearchValueChange = React.useCallback(event => {
@@ -87,8 +89,9 @@ function GridToolbarQuickFilter(props) {
     onChange: handleSearchValueChange,
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
-    type: "search",
-    InputProps: {
+    type: "search"
+  }, other, {
+    InputProps: _extends({
       startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
         fontSize: "small"
       }),
@@ -104,8 +107,8 @@ function GridToolbarQuickFilter(props) {
           fontSize: "small"
         })
       }))
-    }
-  }, other, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTextField));
+    }, other.InputProps)
+  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------- Warning --------------------------------

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -33,13 +33,16 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
  */
 export const useGridPipeProcessing = apiRef => {
   const processorsCache = React.useRef({});
+  const isRunning = React.useRef(false);
   const runAppliers = React.useCallback(groupCache => {
-    if (!groupCache) {
+    if (isRunning.current || !groupCache) {
       return;
     }
+    isRunning.current = true;
     Object.values(groupCache.appliers).forEach(callback => {
       callback();
     });
+    isRunning.current = false;
   }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
     if (!processorsCache.current[group]) {

package/hooks/core/useGridApiInitialization.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+export declare function unwrapPrivateAPI<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(publicApi: Api): PrivateApi;
 export declare function useGridApiInitialization<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.MutableRefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): React.MutableRefObject<PrivateApi>;

package/hooks/core/useGridApiInitialization.js

@@ -3,58 +3,80 @@ import { Store } from '../../utils/Store';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
+const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
 };
+export function unwrapPrivateAPI(publicApi) {
+  return publicApi[SYMBOL_API_PRIVATE];
+}
 let globalId = 0;
-const wrapPublicApi = publicApi => {
-  const privateOnlyApi = {};
-  privateOnlyApi.getPublicApi = () => publicApi;
-  privateOnlyApi.register = (visibility, methods) => {
+function createPrivateAPI(publicApiRef) {
+  var _publicApiRef$current;
+  const existingPrivateApi = (_publicApiRef$current = publicApiRef.current) == null ? void 0 : _publicApiRef$current[SYMBOL_API_PRIVATE];
+  if (existingPrivateApi) {
+    return existingPrivateApi;
+  }
+  const state = {};
+  const privateApi = {
+    state,
+    store: Store.create(state),
+    instanceId: {
+      id: globalId
+    }
+  };
+  globalId += 1;
+  privateApi.getPublicApi = () => publicApiRef.current;
+  privateApi.register = (visibility, methods) => {
     Object.keys(methods).forEach(methodName => {
-      if (visibility === 'public') {
-        publicApi[methodName] = methods[methodName];
+      const method = methods[methodName];
+      const currentPrivateMethod = privateApi[methodName];
+      if ((currentPrivateMethod == null ? void 0 : currentPrivateMethod.spying) === true) {
+        currentPrivateMethod.target = method;
       } else {
-        privateOnlyApi[methodName] = methods[methodName];
+        privateApi[methodName] = method;
+      }
+      if (visibility === 'public') {
+        const publicApi = publicApiRef.current;
+        const currentPublicMethod = publicApi[methodName];
+        if ((currentPublicMethod == null ? void 0 : currentPublicMethod.spying) === true) {
+          currentPublicMethod.target = method;
+        } else {
+          publicApi[methodName] = method;
+        }
       }
     });
   };
-  const handler = {
-    get: (obj, prop) => {
-      if (prop in obj) {
-        return obj[prop];
-      }
-      return privateOnlyApi[prop];
+  privateApi.register('private', {
+    caches: {},
+    eventManager: new EventManager()
+  });
+  return privateApi;
+}
+function createPublicAPI(privateApiRef) {
+  const publicApi = {
+    get state() {
+      return privateApiRef.current.state;
     },
-    set: (obj, prop, value) => {
-      obj[prop] = value;
-      return true;
-    }
+    get store() {
+      return privateApiRef.current.store;
+    },
+    get instanceId() {
+      return privateApiRef.current.instanceId;
+    },
+    [SYMBOL_API_PRIVATE]: privateApiRef.current
   };
-  return new Proxy(publicApi, handler);
-};
+  return publicApi;
+}
 export function useGridApiInitialization(inputApiRef, props) {
   const publicApiRef = React.useRef();
-  if (!publicApiRef.current) {
-    const state = {};
-    publicApiRef.current = {
-      state,
-      store: Store.create(state),
-      instanceId: {
-        id: globalId
-      }
-    };
-    globalId += 1;
-  }
   const privateApiRef = React.useRef();
   if (!privateApiRef.current) {
-    privateApiRef.current = wrapPublicApi(publicApiRef.current);
-    privateApiRef.current.register('private', {
-      caches: {},
-      eventManager: new EventManager()
-    });
+    privateApiRef.current = createPrivateAPI(publicApiRef);
+  }
+  if (!publicApiRef.current) {
+    publicApiRef.current = createPublicAPI(privateApiRef);
   }
-  React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   const publishEvent = React.useCallback((...args) => {
     const [name, params, event = {}] = args;
     event.defaultMuiPrevented = false;
@@ -77,6 +99,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
+  React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   React.useEffect(() => {
     const api = privateApiRef.current;
     return () => {

package/hooks/features/columns/gridColumnsUtils.js

@@ -15,6 +15,7 @@ export function computeFlexColumnsWidth({
   totalFlexUnits,
   flexColumns
 }) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
   const flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -30,7 +31,7 @@ export function computeFlexColumnsWidth({
   // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
   function loopOverFlexItems() {
     // 5a: If all the flex items on the line are frozen, free space has been distributed.
-    if (flexColumnsLookup.frozenFields.length === flexColumns.length) {
+    if (flexColumnsLookup.frozenFields.length === uniqueFlexColumns.size) {
       return;
     }
     const violationsLookup = {

package/hooks/features/dimensions/useGridDimensions.js

@@ -73,7 +73,7 @@ export function useGridDimensions(apiRef, props) {
     let hasScrollY;
     if (props.autoHeight) {
       hasScrollY = false;
-      hasScrollX = columnsTotalWidth > rootDimensionsRef.current.width;
+      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
         height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
@@ -85,11 +85,11 @@ export function useGridDimensions(apiRef, props) {
       };
       const scrollInformation = hasScroll({
         content: {
-          width: columnsTotalWidth,
+          width: Math.round(columnsTotalWidth),
           height: rowsMeta.currentPageTotalHeight
         },
         container: {
-          width: viewportOuterSize.width,
+          width: Math.round(viewportOuterSize.width),
           height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
         },
         scrollBarSize

package/hooks/features/editing/useGridEditing.js

@@ -106,8 +106,9 @@ export const useGridEditing = (apiRef, props) => {
     return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
+    var _editingState$id$fiel, _editingState$id;
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return editingState[id][field];
+    return (_editingState$id$fiel = (_editingState$id = editingState[id]) == null ? void 0 : _editingState$id[field]) != null ? _editingState$id$fiel : null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/hooks/features/export/serializers/csvSerializer.d.ts

@@ -1,6 +1,8 @@
-import { GridRowId } from '../../../../models';
-import { GridCellParams } from '../../../../models/params/gridCellParams';
-import { GridStateColDef } from '../../../../models/colDef/gridColDef';
+/// <reference types="react" />
+import type { GridCsvExportOptions, GridRowId } from '../../../../models';
+import type { GridCellParams } from '../../../../models/params/gridCellParams';
+import type { GridStateColDef } from '../../../../models/colDef/gridColDef';
+import type { GridApiCommunity } from '../../../../models/api/gridApiCommunity';
 export declare const serializeCellValue: (cellParams: GridCellParams, options: {
     delimiterCharacter: string;
     ignoreValueFormatter: boolean;
@@ -8,10 +10,11 @@ export declare const serializeCellValue: (cellParams: GridCellParams, options: {
 interface BuildCSVOptions {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
-    getCellParams: (id: GridRowId, field: string) => GridCellParams;
-    delimiterCharacter: string;
-    includeHeaders: boolean;
+    delimiterCharacter: NonNullable<GridCsvExportOptions['delimiter']>;
+    includeHeaders: NonNullable<GridCsvExportOptions['includeHeaders']>;
+    includeColumnGroupsHeaders: NonNullable<GridCsvExportOptions['includeColumnGroupsHeaders']>;
     ignoreValueFormatter: boolean;
+    apiRef: React.MutableRefObject<GridApiCommunity>;
 }
 export declare function buildCSV(options: BuildCSVOptions): string;
 export {};

package/hooks/features/export/serializers/csvSerializer.js

@@ -37,43 +37,106 @@ export const serializeCellValue = (cellParams, options) => {
   return sanitizeCellValue(value, delimiterCharacter);
 };
 const objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
+class CSVRow {
+  constructor(options) {
+    this.options = void 0;
+    this.rowString = '';
+    this.isEmpty = true;
+    this.options = options;
+  }
+  addValue(value) {
+    if (!this.isEmpty) {
+      this.rowString += this.options.delimiterCharacter;
+    }
+    if (value === null || value === undefined) {
+      this.rowString += '';
+    } else if (typeof this.options.sanitizeCellValue === 'function') {
+      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter);
+    } else {
+      this.rowString += value;
+    }
+    this.isEmpty = false;
+  }
+  getRowString() {
+    return this.rowString;
+  }
+}
 const serializeRow = ({
   id,
   columns,
   getCellParams,
   delimiterCharacter,
   ignoreValueFormatter
-}) => columns.map(column => {
-  const cellParams = getCellParams(id, column.field);
-  if (process.env.NODE_ENV !== 'production') {
-    if (String(cellParams.formattedValue) === '[object Object]') {
-      objectFormattedValueWarning();
+}) => {
+  const row = new CSVRow({
+    delimiterCharacter
+  });
+  columns.forEach(column => {
+    const cellParams = getCellParams(id, column.field);
+    if (process.env.NODE_ENV !== 'production') {
+      if (String(cellParams.formattedValue) === '[object Object]') {
+        objectFormattedValueWarning();
+      }
     }
-  }
-  return serializeCellValue(cellParams, {
-    delimiterCharacter,
-    ignoreValueFormatter
+    row.addValue(serializeCellValue(cellParams, {
+      delimiterCharacter,
+      ignoreValueFormatter
+    }));
   });
-});
+  return row.getRowString();
+};
 export function buildCSV(options) {
   const {
     columns,
     rowIds,
-    getCellParams,
     delimiterCharacter,
     includeHeaders,
-    ignoreValueFormatter
+    includeColumnGroupsHeaders,
+    ignoreValueFormatter,
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
-    getCellParams,
+    getCellParams: apiRef.current.getCellParams,
     delimiterCharacter,
     ignoreValueFormatter
-  }).join(delimiterCharacter)}\r\n`, '').trim();
+  })}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
   }
-  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => sanitizeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  const filteredColumns = columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field);
+  const headerRows = [];
+  if (includeColumnGroupsHeaders) {
+    const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
+    let maxColumnGroupsDepth = 0;
+    const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
+      const columnGroupPath = apiRef.current.unstable_getColumnGroupPath(column.field);
+      acc[column.field] = columnGroupPath;
+      maxColumnGroupsDepth = Math.max(maxColumnGroupsDepth, columnGroupPath.length);
+      return acc;
+    }, {});
+    for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
+      const headerGroupRow = new CSVRow({
+        delimiterCharacter,
+        sanitizeCellValue
+      });
+      headerRows.push(headerGroupRow);
+      filteredColumns.forEach(column => {
+        const columnGroupId = (columnGroupPathsLookup[column.field] || [])[i];
+        const columnGroup = columnGroupLookup[columnGroupId];
+        headerGroupRow.addValue(columnGroup ? columnGroup.headerName || columnGroup.groupId : '');
+      });
+    }
+  }
+  const mainHeaderRow = new CSVRow({
+    delimiterCharacter,
+    sanitizeCellValue
+  });
+  filteredColumns.forEach(column => {
+    mainHeaderRow.addValue(column.headerName || column.field);
+  });
+  headerRows.push(mainHeaderRow);
+  const CSVHead = `${headerRows.map(row => row.getRowString()).join('\r\n')}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

package/hooks/features/export/useGridCsvExport.js

@@ -19,7 +19,7 @@ export const useGridCsvExport = (apiRef, props) => {
   const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
-    var _options$getRowsToExp, _options$includeHeade;
+    var _options$getRowsToExp, _options$includeHeade, _options$includeColum;
     logger.debug(`Get data as CSV`);
     const exportedColumns = getColumnsToExport({
       apiRef,
@@ -32,10 +32,11 @@ export const useGridCsvExport = (apiRef, props) => {
     return buildCSV({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: options.delimiter || ',',
       includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
-      ignoreValueFormatter
+      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+      ignoreValueFormatter,
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/hooks/features/filter/gridFilterUtils.js

@@ -3,7 +3,7 @@ import { GridLogicOperator } from '../../../models';
 import { GLOBAL_API_REF, isInternalFilter } from '../../../colDef/utils';
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
-import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
+import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from '../columns';
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -154,12 +154,13 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef)
  * @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.
  */
 export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
-  var _filterModel$quickFil, _filterModel$quickFil2;
+  var _filterModel$quickFil, _filterModel$quickFil2, _filterModel$quickFil3;
   const quickFilterValues = (_filterModel$quickFil = (_filterModel$quickFil2 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil2.filter(Boolean)) != null ? _filterModel$quickFil : [];
   if (quickFilterValues.length === 0) {
     return null;
   }
-  const columnFields = gridColumnFieldsSelector(apiRef);
+  const quickFilterExcludeHiddenColumns = (_filterModel$quickFil3 = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil3 : false;
+  const columnFields = quickFilterExcludeHiddenColumns ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
   const appliersPerField = [];
   columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
@@ -276,12 +277,12 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
 
   // get result for quick filter model
   if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
-    var _filterModel$quickFil3;
+    var _filterModel$quickFil4;
     // Return true if the item pass with one of the rows
     const quickFilterValuePredicate = value => {
       return cleanedQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
     };
-    const quickFilterLogicOperator = (_filterModel$quickFil3 = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil3 : getDefaultGridFilterModel().quickFilterLogicOperator;
+    const quickFilterLogicOperator = (_filterModel$quickFil4 = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil4 : getDefaultGridFilterModel().quickFilterLogicOperator;
     if (quickFilterLogicOperator === GridLogicOperator.And) {
       const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
       if (!passesAllQuickFilterValues) {

package/hooks/features/filter/useGridFilter.js

@@ -21,6 +21,7 @@ export const filterStateInitializer = (state, props, apiRef) => {
   return _extends({}, state, {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
+      filteredRowsLookup: {},
       filteredDescendantCountLookup: {}
     },
     visibleRowsLookup: {}
@@ -258,6 +259,9 @@ export const useGridFilter = (apiRef, props) => {
   }, [props.slots.filterPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.filterPanel]);
   const dataRowIdToIdLookup = apiRef.current.state.rows.dataRowIdToModelLookup;
   const rows = React.useMemo(() => Object.values(dataRowIdToIdLookup), [dataRowIdToIdLookup]);
+  const {
+    getRowId
+  } = props;
   const flatFilteringMethod = React.useCallback(params => {
     if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
@@ -277,9 +281,10 @@ export const useGridFilter = (apiRef, props) => {
     };
     for (let i = 0; i < rows.length; i += 1) {
       const row = rows[i];
+      const id = getRowId ? getRowId(row) : row.id;
       isRowMatchingFilters(row, undefined, result);
       const isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
-      filteredRowsLookup[row.id] = isRowPassing;
+      filteredRowsLookup[id] = isRowPassing;
     }
     const footerId = 'auto-generated-group-footer-root';
     const footer = dataRowIdToModelLookup[footerId];
@@ -290,7 +295,7 @@ export const useGridFilter = (apiRef, props) => {
       filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, props.filterMode, rows]);
+  }, [apiRef, rows, props.filterMode, getRowId]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
@@ -332,6 +337,13 @@ export const useGridFilter = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
   useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   useGridApiEventHandler(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
+    const filterModel = gridFilterModelSelector(apiRef);
+    if (filterModel.quickFilterValues && filterModel.quickFilterExcludeHiddenColumns) {
+      // re-apply filters because the quick filter results may have changed
+      apiRef.current.unstable_applyFilters();
+    }
+  });
 
   /**
    * 1ST RENDER

package/hooks/features/rows/gridRowsUtils.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
 import { gridDensityFactorSelector } from '../density/densitySelector';
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
-export const GRID_ID_AUTOGENERATED = Symbol('mui-autogenerated-id');
+export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export const buildRootGroup = () => ({
   type: 'group',
   id: GRID_ROOT_GROUP_ID,