@mui/x-data-grid 6.9.1 → 6.10.0

package/hooks/features/rows/useGridParamsApi.js

@@ -101,8 +101,8 @@ export function useGridParamsApi(apiRef, props) {
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [apiRef, getBaseCellParams]);
   const getRowValue = React.useCallback((row, colDef) => {
-    var _ref;
-    const id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
+    var _getRowId;
+    const id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : (_getRowId = getRowId == null ? void 0 : getRowId(row)) != null ? _getRowId : row.id;
     const field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];
@@ -110,12 +110,12 @@ export function useGridParamsApi(apiRef, props) {
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [getBaseCellParams, getRowId]);
   const getRowFormattedValue = React.useCallback((row, colDef) => {
-    var _ref2;
+    var _ref;
     const value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    const id = (_ref2 = getRowId ? getRowId(row) : row.id) != null ? _ref2 : row[GRID_ID_AUTOGENERATED];
+    const id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
     const field = colDef.field;
     return colDef.valueFormatter({
       id,

package/hooks/utils/useGridApiMethod.js

@@ -1,27 +1,11 @@
 import * as React from 'react';
 export function useGridApiMethod(privateApiRef, apiMethods, visibility) {
-  const apiMethodsRef = React.useRef(apiMethods);
-  const [apiMethodsNames] = React.useState(Object.keys(apiMethods));
-  const installMethods = React.useCallback(() => {
-    if (!privateApiRef.current) {
-      return;
-    }
-    apiMethodsNames.forEach(methodName => {
-      if (!privateApiRef.current.hasOwnProperty(methodName)) {
-        privateApiRef.current.register(visibility, {
-          [methodName]: (...args) => {
-            const fn = apiMethodsRef.current[methodName];
-            return fn(...args);
-          }
-        });
-      }
-    });
-  }, [apiMethodsNames, privateApiRef, visibility]);
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
-    apiMethodsRef.current = apiMethods;
-  }, [apiMethods]);
-  React.useEffect(() => {
-    installMethods();
-  }, [installMethods]);
-  installMethods();
+    isFirstRender.current = false;
+    privateApiRef.current.register(visibility, apiMethods);
+  }, [privateApiRef, visibility, apiMethods]);
+  if (isFirstRender.current) {
+    privateApiRef.current.register(visibility, apiMethods);
+  }
 }

package/index.js

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

package/internals/index.d.ts

@@ -11,6 +11,7 @@ export type { GridPipeProcessor } from '../hooks/core/pipeProcessing';
 export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY, } from '../hooks/core/strategyProcessing';
 export type { GridStrategyProcessor } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
+export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';

package/internals/index.js

@@ -8,6 +8,7 @@ export { getGridFilter } from '../components/panel/filterPanel/GridFilterPanel';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
+export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';

package/joy/joySlots.js

@@ -291,7 +291,6 @@ const getLabelDisplayedRowsTo = ({
   return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
 };
 const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$pageSizeOp;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = gridPaginationModelSelector(apiRef);
@@ -306,7 +305,20 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef]);
   const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
   const pageSize = paginationModel.pageSize;
-  const pageSizeOptions = (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  const isPageSizeIncludedInPageSizeOptions = () => {
+    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;
+  };
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : [];
   const handleChangeRowsPerPage = (event, newValue) => {
     const newPageSize = Number(newValue);
     apiRef.current.setPageSize(newPageSize);
@@ -330,9 +342,9 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
         value: pageSize,
         children: pageSizeOptions.map(option => {
           return /*#__PURE__*/_jsx(Option, {
-            value: option,
-            children: option
-          }, option);
+            value: typeof option !== 'number' && option.value ? option.value : option,
+            children: typeof option !== 'number' && option.label ? option.label : `${option}`
+          }, typeof option !== 'number' && option.label ? option.label : `${option}`);
         })
       })]
     }), /*#__PURE__*/_jsx(JoyTypography, {

package/legacy/DataGrid/DataGrid.js

@@ -183,6 +183,7 @@ DataGridRaw.propTypes = {
       value: PropTypes.any
     })).isRequired,
     logicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterExcludeHiddenColumns: PropTypes.bool,
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
@@ -515,7 +516,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: function 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/legacy/components/GridPagination.js

@@ -23,7 +23,6 @@ var GridPaginationRoot = styled(TablePagination)(function (_ref) {
   })), _ref2;
 });
 export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
-  var _rootProps$pageSizeOp;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -42,22 +41,36 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
   var handlePageChange = React.useCallback(function (_, page) {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  var isPageSizeIncludedInPageSizeOptions = function isPageSizeIncludedInPageSizeOptions(pageSize) {
+    for (var i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      var 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
     var warnedOnceMissingInPageSizeOptions = React.useRef(false);
     var 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 `".concat(paginationModel.pageSize, "` is not preset in the `pageSizeOptions`"), "Add it to show the pagination select."].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  var 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/legacy/components/cell/GridEditDateCell.js

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

package/legacy/components/cell/GridEditInputCell.js

@@ -100,12 +100,12 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [apiRef, debounceMs, field, id, onValueChange]);
-  var meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  var meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(function () {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   useEnhancedEffect(function () {
     if (hasFocus) {
       inputRef.current.focus();

package/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -68,23 +68,22 @@ function GridToolbarQuickFilter(props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     searchValue = _React$useState2[0],
     setSearchValue = _React$useState2[1];
-  var _React$useState3 = React.useState(quickFilterValues),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    prevQuickFilterValues = _React$useState4[0],
-    setPrevQuickFilterValues = _React$useState4[1];
+  var prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(function () {
-    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(function (prevSearchValue) {
         return isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []);
       });
     }
-  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
+  }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
   var updateSearchValue = React.useCallback(function (newSearchValue) {
-    apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
+    var newQuickFilterValues = quickFilterParser(newSearchValue);
+    prevQuickFilterValuesRef.current = newQuickFilterValues;
+    apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   var debouncedUpdateSearchValue = React.useMemo(function () {
     return debounce(updateSearchValue, debounceMs);
@@ -106,8 +105,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"
       }),
@@ -123,8 +123,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/legacy/hooks/core/pipeProcessing/useGridPipeProcessing.js

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

package/legacy/hooks/core/useGridApiInitialization.js

@@ -1,64 +1,84 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import { Store } from '../../utils/Store';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
+var SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 var isSyntheticEvent = function isSyntheticEvent(event) {
   return event.isPropagationStopped !== undefined;
 };
+export function unwrapPrivateAPI(publicApi) {
+  return publicApi[SYMBOL_API_PRIVATE];
+}
 var globalId = 0;
-var wrapPublicApi = function wrapPublicApi(publicApi) {
-  var privateOnlyApi = {};
-  privateOnlyApi.getPublicApi = function () {
-    return publicApi;
+function createPrivateAPI(publicApiRef) {
+  var _publicApiRef$current;
+  var existingPrivateApi = (_publicApiRef$current = publicApiRef.current) == null ? void 0 : _publicApiRef$current[SYMBOL_API_PRIVATE];
+  if (existingPrivateApi) {
+    return existingPrivateApi;
+  }
+  var state = {};
+  var privateApi = {
+    state: state,
+    store: Store.create(state),
+    instanceId: {
+      id: globalId
+    }
+  };
+  globalId += 1;
+  privateApi.getPublicApi = function () {
+    return publicApiRef.current;
   };
-  privateOnlyApi.register = function (visibility, methods) {
+  privateApi.register = function (visibility, methods) {
     Object.keys(methods).forEach(function (methodName) {
-      if (visibility === 'public') {
-        publicApi[methodName] = methods[methodName];
+      var method = methods[methodName];
+      var 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') {
+        var publicApi = publicApiRef.current;
+        var currentPublicMethod = publicApi[methodName];
+        if ((currentPublicMethod == null ? void 0 : currentPublicMethod.spying) === true) {
+          currentPublicMethod.target = method;
+        } else {
+          publicApi[methodName] = method;
+        }
       }
     });
   };
-  var handler = {
-    get: function 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) {
+  var publicApi = _defineProperty({
+    get state() {
+      return privateApiRef.current.state;
+    },
+    get store() {
+      return privateApiRef.current.store;
     },
-    set: function set(obj, prop, value) {
-      obj[prop] = value;
-      return true;
+    get instanceId() {
+      return privateApiRef.current.instanceId;
     }
-  };
-  return new Proxy(publicApi, handler);
-};
+  }, SYMBOL_API_PRIVATE, privateApiRef.current);
+  return publicApi;
+}
 export function useGridApiInitialization(inputApiRef, props) {
   var publicApiRef = React.useRef();
-  if (!publicApiRef.current) {
-    var state = {};
-    publicApiRef.current = {
-      state: state,
-      store: Store.create(state),
-      instanceId: {
-        id: globalId
-      }
-    };
-    globalId += 1;
-  }
   var 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, function () {
-    return publicApiRef.current;
-  }, [publicApiRef]);
   var publishEvent = React.useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -87,6 +107,9 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent: subscribeEvent,
     publishEvent: publishEvent
   }, 'public');
+  React.useImperativeHandle(inputApiRef, function () {
+    return publicApiRef.current;
+  }, [publicApiRef]);
   React.useEffect(function () {
     var api = privateApiRef.current;
     return function () {

package/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -17,6 +17,9 @@ export function computeFlexColumnsWidth(_ref) {
   var initialFreeSpace = _ref.initialFreeSpace,
     totalFlexUnits = _ref.totalFlexUnits,
     flexColumns = _ref.flexColumns;
+  var uniqueFlexColumns = new Set(flexColumns.map(function (col) {
+    return col.field;
+  }));
   var flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -32,7 +35,7 @@ export function computeFlexColumnsWidth(_ref) {
   // 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;
     }
     var violationsLookup = {

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -73,7 +73,7 @@ export function useGridDimensions(apiRef, props) {
     var 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) {
       };
       var 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: scrollBarSize

package/legacy/hooks/features/editing/useGridEditing.js

@@ -127,8 +127,9 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
     return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
   var getEditCellMeta = React.useCallback(function (id, field) {
+    var _editingState$id$fiel, _editingState$id;
     var 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]);
   var editingSharedApi = {
     isCellEditable: isCellEditable,

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

@@ -1,3 +1,5 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
 function sanitizeCellValue(value, delimiterCharacter) {
@@ -37,48 +39,119 @@ export var serializeCellValue = function serializeCellValue(cellParams, options)
   return sanitizeCellValue(value, delimiterCharacter);
 };
 var 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.']);
+var CSVRow = /*#__PURE__*/function () {
+  function CSVRow(options) {
+    _classCallCheck(this, CSVRow);
+    this.options = void 0;
+    this.rowString = '';
+    this.isEmpty = true;
+    this.options = options;
+  }
+  _createClass(CSVRow, [{
+    key: "addValue",
+    value: function 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;
+    }
+  }, {
+    key: "getRowString",
+    value: function getRowString() {
+      return this.rowString;
+    }
+  }]);
+  return CSVRow;
+}();
 var serializeRow = function serializeRow(_ref) {
   var id = _ref.id,
     columns = _ref.columns,
     getCellParams = _ref.getCellParams,
     delimiterCharacter = _ref.delimiterCharacter,
     ignoreValueFormatter = _ref.ignoreValueFormatter;
-  return columns.map(function (column) {
+  var row = new CSVRow({
+    delimiterCharacter: delimiterCharacter
+  });
+  columns.forEach(function (column) {
     var cellParams = getCellParams(id, column.field);
     if (process.env.NODE_ENV !== 'production') {
       if (String(cellParams.formattedValue) === '[object Object]') {
         objectFormattedValueWarning();
       }
     }
-    return serializeCellValue(cellParams, {
+    row.addValue(serializeCellValue(cellParams, {
       delimiterCharacter: delimiterCharacter,
       ignoreValueFormatter: ignoreValueFormatter
-    });
+    }));
   });
+  return row.getRowString();
 };
 export function buildCSV(options) {
   var columns = options.columns,
     rowIds = options.rowIds,
-    getCellParams = options.getCellParams,
     delimiterCharacter = options.delimiterCharacter,
     includeHeaders = options.includeHeaders,
-    ignoreValueFormatter = options.ignoreValueFormatter;
+    includeColumnGroupsHeaders = options.includeColumnGroupsHeaders,
+    ignoreValueFormatter = options.ignoreValueFormatter,
+    apiRef = options.apiRef;
   var CSVBody = rowIds.reduce(function (acc, id) {
     return "".concat(acc).concat(serializeRow({
       id: id,
       columns: columns,
-      getCellParams: getCellParams,
+      getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: delimiterCharacter,
       ignoreValueFormatter: ignoreValueFormatter
-    }).join(delimiterCharacter), "\r\n");
+    }), "\r\n");
   }, '').trim();
   if (!includeHeaders) {
     return CSVBody;
   }
-  var CSVHead = "".concat(columns.filter(function (column) {
+  var filteredColumns = columns.filter(function (column) {
     return column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field;
-  }).map(function (column) {
-    return sanitizeCellValue(column.headerName || column.field, delimiterCharacter);
-  }).join(delimiterCharacter), "\r\n");
+  });
+  var headerRows = [];
+  if (includeColumnGroupsHeaders) {
+    var columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
+    var maxColumnGroupsDepth = 0;
+    var columnGroupPathsLookup = filteredColumns.reduce(function (acc, column) {
+      var columnGroupPath = apiRef.current.unstable_getColumnGroupPath(column.field);
+      acc[column.field] = columnGroupPath;
+      maxColumnGroupsDepth = Math.max(maxColumnGroupsDepth, columnGroupPath.length);
+      return acc;
+    }, {});
+    var _loop = function _loop(i) {
+      var headerGroupRow = new CSVRow({
+        delimiterCharacter: delimiterCharacter,
+        sanitizeCellValue: sanitizeCellValue
+      });
+      headerRows.push(headerGroupRow);
+      filteredColumns.forEach(function (column) {
+        var columnGroupId = (columnGroupPathsLookup[column.field] || [])[i];
+        var columnGroup = columnGroupLookup[columnGroupId];
+        headerGroupRow.addValue(columnGroup ? columnGroup.headerName || columnGroup.groupId : '');
+      });
+    };
+    for (var i = 0; i < maxColumnGroupsDepth; i += 1) {
+      _loop(i);
+    }
+  }
+  var mainHeaderRow = new CSVRow({
+    delimiterCharacter: delimiterCharacter,
+    sanitizeCellValue: sanitizeCellValue
+  });
+  filteredColumns.forEach(function (column) {
+    mainHeaderRow.addValue(column.headerName || column.field);
+  });
+  headerRows.push(mainHeaderRow);
+  var CSVHead = "".concat(headerRows.map(function (row) {
+    return row.getRowString();
+  }).join('\r\n'), "\r\n");
   return "".concat(CSVHead).concat(CSVBody).trim();
 }

package/legacy/hooks/features/export/useGridCsvExport.js

@@ -21,7 +21,7 @@ export var useGridCsvExport = function useGridCsvExport(apiRef, props) {
   var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   var getDataAsCsv = React.useCallback(function () {
-    var _options$getRowsToExp, _options$includeHeade;
+    var _options$getRowsToExp, _options$includeHeade, _options$includeColum;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     logger.debug("Get data as CSV");
     var exportedColumns = getColumnsToExport({
@@ -35,10 +35,11 @@ export var useGridCsvExport = function 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: ignoreValueFormatter
+      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+      ignoreValueFormatter: ignoreValueFormatter,
+      apiRef: apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   var exportDataAsCsv = React.useCallback(function (options) {