@mui/x-data-grid 6.19.10 → 6.20.0

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -66,7 +66,6 @@ var MEMOIZE_OPTIONS = {
   maxSize: 3
 };
 export var useGridVirtualScroller = function useGridVirtualScroller(props) {
-  var _currentPage$range3, _currentPage$range4;
   var apiRef = useGridPrivateApiContext();
   var rootProps = useGridRootProps();
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
@@ -148,27 +147,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  var getNearestIndexToRender = React.useCallback(function (offset) {
-    var _currentPage$range, _currentPage$range2;
-    var lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
-    var allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
-    if ((_currentPage$range = currentPage.range) != null && _currentPage$range.lastRowIndex && !allRowsMeasured) {
-      // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
-    }
-    var lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (((_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.firstRowIndex) || 0), 0, rowsMeta.positions.length);
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
-      // If all rows were measured (when no row has "auto" as height) or all rows before the offset
-      // were measured, then use a binary search because it's faster.
-      return binarySearch(offset, rowsMeta.positions);
-    }
-
-    // Otherwise, use an exponential search.
-    // If rows have "auto" as height, their positions will be based on estimated heights.
-    // In this case, we can skip several steps until we find a position higher than the offset.
-    // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
-  }, [apiRef, (_currentPage$range3 = currentPage.range) == null ? void 0 : _currentPage$range3.firstRowIndex, (_currentPage$range4 = currentPage.range) == null ? void 0 : _currentPage$range4.lastRowIndex, rowsMeta.positions]);
   var computeRenderContext = React.useCallback(function () {
     if (!enabled) {
       return {
@@ -184,8 +162,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
 
     // Clamp the value because the search may return an index out of bounds.
     // In the last index, this is not needed because Array.slice doesn't include it.
-    var firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
+    var firstRowIndex = Math.min(getNearestIndexToRender(apiRef, currentPage, rowsMeta, top), rowsMeta.positions.length - 1);
+    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(apiRef, currentPage, rowsMeta, top + containerDimensions.height);
     var firstColumnIndex = 0;
     var lastColumnIndex = columnPositions.length;
     if (enabledForColumns) {
@@ -215,7 +193,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       firstColumnIndex: firstColumnIndex,
       lastColumnIndex: lastColumnIndex
     };
-  }, [enabled, enabledForColumns, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
+  }, [enabled, enabledForColumns, rowsMeta, rootProps.autoHeight, rootProps.rowBuffer, currentPage, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   useEnhancedEffect(function () {
     if (enabled) {
       // TODO a scroll reset should not be necessary
@@ -503,7 +481,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var rows = [];
     var isRowWithFocusedCellRendered = false;
     for (var _i = 0; _i < renderedRows.length; _i += 1) {
-      var _currentPage$range5;
+      var _currentPage$range;
       var _renderedRows$_i = renderedRows[_i],
         _id = _renderedRows$_i.id,
         _model = _renderedRows$_i.model;
@@ -534,7 +512,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         var style = _extends({}, rowStyle, rootRowStyle);
         rowStyleCache.current[_id] = style;
       }
-      var index = rowIndexOffset + ((currentPage == null || (_currentPage$range5 = currentPage.range) == null ? void 0 : _currentPage$range5.firstRowIndex) || 0) + firstRowToRender + _i;
+      var index = rowIndexOffset + ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + _i;
       if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === _id) {
         index = indexOfRowWithFocusedCell;
         isRowWithFocusedCellRendered = true;
@@ -634,4 +612,25 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       };
     }
   };
-};
+};
+function getNearestIndexToRender(apiRef, currentPage, rowsMeta, offset) {
+  var _currentPage$range2, _currentPage$range3;
+  var lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
+  var allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
+  if ((_currentPage$range2 = currentPage.range) != null && _currentPage$range2.lastRowIndex && !allRowsMeasured) {
+    // Check if all rows in this page are already measured
+    allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
+  }
+  var lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (((_currentPage$range3 = currentPage.range) == null ? void 0 : _currentPage$range3.firstRowIndex) || 0), 0, rowsMeta.positions.length);
+  if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
+    // If all rows were measured (when no row has "auto" as height) or all rows before the offset
+    // were measured, then use a binary search because it's faster.
+    return binarySearch(offset, rowsMeta.positions);
+  }
+
+  // Otherwise, use an exponential search.
+  // If rows have "auto" as height, their positions will be based on estimated heights.
+  // In this case, we can skip several steps until we find a position higher than the offset.
+  // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+  return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
+}

package/legacy/index.js

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

package/models/gridExport.d.ts

@@ -37,6 +37,13 @@ export interface GridFileExportOptions<Api extends GridApiCommon = GridApiCommun
      * @returns {GridRowId[]} The list of row ids to export.
      */
     getRowsToExport?: (params: GridGetRowsToExportParams<Api>) => GridRowId[];
+    /**
+     * If `false`, the formulas in the cells will not be escaped.
+     * It is not recommended to disable this option as it exposes the user to potential CSV injection attacks.
+     * See https://owasp.org/www-community/attacks/CSV_Injection for more information.
+     * @default true
+     */
+    escapeFormulas?: boolean;
 }
 export interface GridGetRowsToExportParams<Api extends GridApiCommon = GridApiCommunity> {
     /**

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -66,18 +66,21 @@ export const useGridClipboard = (apiRef, props) => {
     if (selectedRows.size > 0) {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
-        // TODO: make it configurable
         delimiter: clipboardCopyCellDelimiter,
-        shouldAppendQuotes: false
+        shouldAppendQuotes: false,
+        escapeFormulas: false
       });
     } else {
       const focusedCell = gridFocusCellSelector(apiRef);
       if (focusedCell) {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
-          delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter,
-          shouldAppendQuotes: false
+          csvOptions: {
+            delimiter: clipboardCopyCellDelimiter,
+            shouldAppendQuotes: false,
+            escapeFormulas: false
+          },
+          ignoreValueFormatter
         });
       }
     }

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

@@ -1,13 +1,19 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
+function sanitizeCellValue(value, csvOptions) {
   if (typeof value === 'string') {
-    if (shouldAppendQuotes) {
+    if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
       const escapedValue = value.replace(/"/g, '""');
-      // Make sure value containing delimiter or line break won't be split into multiple rows
-      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+      // Make sure value containing delimiter or line break won't be split into multiple cells
+      if ([csvOptions.delimiter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
         return `"${escapedValue}"`;
       }
+      if (csvOptions.escapeFormulas) {
+        // See https://owasp.org/www-community/attacks/CSV_Injection
+        if (['=', '+', '-', '@', '\t', '\r'].includes(escapedValue[0])) {
+          return `'${escapedValue}`;
+        }
+      }
       return escapedValue;
     }
     return value;
@@ -16,9 +22,8 @@ function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
 }
 export const serializeCellValue = (cellParams, options) => {
   const {
-    delimiterCharacter,
-    ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions,
+    ignoreValueFormatter
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -35,7 +40,7 @@ export const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
+  return sanitizeCellValue(value, csvOptions);
 };
 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 {
@@ -47,12 +52,12 @@ class CSVRow {
   }
   addValue(value) {
     if (!this.isEmpty) {
-      this.rowString += this.options.delimiterCharacter;
+      this.rowString += this.options.csvOptions.delimiter;
     }
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;
     }
@@ -66,13 +71,11 @@ const serializeRow = ({
   id,
   columns,
   getCellParams,
-  delimiterCharacter,
-  ignoreValueFormatter,
-  shouldAppendQuotes
+  csvOptions,
+  ignoreValueFormatter
 }) => {
   const row = new CSVRow({
-    delimiterCharacter,
-    shouldAppendQuotes
+    csvOptions
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -82,9 +85,8 @@ const serializeRow = ({
       }
     }
     row.addValue(serializeCellValue(cellParams, {
-      delimiterCharacter,
       ignoreValueFormatter,
-      shouldAppendQuotes
+      csvOptions
     }));
   });
   return row.getRowString();
@@ -93,27 +95,23 @@ export function buildCSV(options) {
   const {
     columns,
     rowIds,
-    delimiterCharacter,
-    includeHeaders,
-    includeColumnGroupsHeaders,
+    csvOptions,
     ignoreValueFormatter,
-    apiRef,
-    shouldAppendQuotes
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
-    delimiterCharacter,
     ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions
   })}\r\n`, '').trim();
-  if (!includeHeaders) {
+  if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
   const filteredColumns = columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field);
   const headerRows = [];
-  if (includeColumnGroupsHeaders) {
+  if (csvOptions.includeColumnGroupsHeaders) {
     const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
     let maxColumnGroupsDepth = 0;
     const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
@@ -124,9 +122,8 @@ export function buildCSV(options) {
     }, {});
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
-        delimiterCharacter,
-        sanitizeCellValue,
-        shouldAppendQuotes
+        csvOptions,
+        sanitizeCellValue
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -137,9 +134,8 @@ export function buildCSV(options) {
     }
   }
   const mainHeaderRow = new CSVRow({
-    delimiterCharacter,
-    sanitizeCellValue,
-    shouldAppendQuotes
+    csvOptions,
+    sanitizeCellValue
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

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

@@ -31,12 +31,15 @@ export const useGridCsvExport = (apiRef, props) => {
     return buildCSV({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      delimiterCharacter: options.delimiter || ',',
-      includeHeaders: options.includeHeaders ?? true,
-      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+      csvOptions: {
+        delimiter: options.delimiter || ',',
+        shouldAppendQuotes: options.shouldAppendQuotes ?? true,
+        includeHeaders: options.includeHeaders ?? true,
+        includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+        escapeFormulas: options.escapeFormulas ?? true
+      },
       ignoreValueFormatter,
-      apiRef,
-      shouldAppendQuotes: options.shouldAppendQuotes ?? true
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -133,26 +133,6 @@ export const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  const getNearestIndexToRender = React.useCallback(offset => {
-    const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
-    let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
-    if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
-      // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
-    }
-    const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0), 0, rowsMeta.positions.length);
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
-      // If all rows were measured (when no row has "auto" as height) or all rows before the offset
-      // were measured, then use a binary search because it's faster.
-      return binarySearch(offset, rowsMeta.positions);
-    }
-
-    // Otherwise, use an exponential search.
-    // If rows have "auto" as height, their positions will be based on estimated heights.
-    // In this case, we can skip several steps until we find a position higher than the offset.
-    // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
-  }, [apiRef, currentPage.range?.firstRowIndex, currentPage.range?.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (!enabled) {
       return {
@@ -169,8 +149,8 @@ export const useGridVirtualScroller = props => {
 
     // Clamp the value because the search may return an index out of bounds.
     // In the last index, this is not needed because Array.slice doesn't include it.
-    const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
+    const firstRowIndex = Math.min(getNearestIndexToRender(apiRef, currentPage, rowsMeta, top), rowsMeta.positions.length - 1);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(apiRef, currentPage, rowsMeta, top + containerDimensions.height);
     let firstColumnIndex = 0;
     let lastColumnIndex = columnPositions.length;
     if (enabledForColumns) {
@@ -197,7 +177,7 @@ export const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [enabled, enabledForColumns, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
+  }, [enabled, enabledForColumns, rowsMeta, rootProps.autoHeight, rootProps.rowBuffer, currentPage, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   useEnhancedEffect(() => {
     if (enabled) {
       // TODO a scroll reset should not be necessary
@@ -592,4 +572,24 @@ export const useGridVirtualScroller = props => {
       role: 'rowgroup'
     })
   };
-};
+};
+function getNearestIndexToRender(apiRef, currentPage, rowsMeta, offset) {
+  const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
+  let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
+  if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
+    // Check if all rows in this page are already measured
+    allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
+  }
+  const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0), 0, rowsMeta.positions.length);
+  if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
+    // If all rows were measured (when no row has "auto" as height) or all rows before the offset
+    // were measured, then use a binary search because it's faster.
+    return binarySearch(offset, rowsMeta.positions);
+  }
+
+  // Otherwise, use an exponential search.
+  // If rows have "auto" as height, their positions will be based on estimated heights.
+  // In this case, we can skip several steps until we find a position higher than the offset.
+  // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+  return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
+}

package/modern/index.js

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

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -74,18 +74,21 @@ const useGridClipboard = (apiRef, props) => {
     if (selectedRows.size > 0) {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
-        // TODO: make it configurable
         delimiter: clipboardCopyCellDelimiter,
-        shouldAppendQuotes: false
+        shouldAppendQuotes: false,
+        escapeFormulas: false
       });
     } else {
       const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
       if (focusedCell) {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = (0, _csvSerializer.serializeCellValue)(cellParams, {
-          delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter,
-          shouldAppendQuotes: false
+          csvOptions: {
+            delimiter: clipboardCopyCellDelimiter,
+            shouldAppendQuotes: false,
+            escapeFormulas: false
+          },
+          ignoreValueFormatter
         });
       }
     }

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

@@ -7,14 +7,20 @@ exports.buildCSV = buildCSV;
 exports.serializeCellValue = void 0;
 var _colDef = require("../../../../colDef");
 var _warning = require("../../../../utils/warning");
-function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
+function sanitizeCellValue(value, csvOptions) {
   if (typeof value === 'string') {
-    if (shouldAppendQuotes) {
+    if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
       const escapedValue = value.replace(/"/g, '""');
-      // Make sure value containing delimiter or line break won't be split into multiple rows
-      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+      // Make sure value containing delimiter or line break won't be split into multiple cells
+      if ([csvOptions.delimiter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
         return `"${escapedValue}"`;
       }
+      if (csvOptions.escapeFormulas) {
+        // See https://owasp.org/www-community/attacks/CSV_Injection
+        if (['=', '+', '-', '@', '\t', '\r'].includes(escapedValue[0])) {
+          return `'${escapedValue}`;
+        }
+      }
       return escapedValue;
     }
     return value;
@@ -23,9 +29,8 @@ function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
 }
 const serializeCellValue = (cellParams, options) => {
   const {
-    delimiterCharacter,
-    ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions,
+    ignoreValueFormatter
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -42,7 +47,7 @@ const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
+  return sanitizeCellValue(value, csvOptions);
 };
 exports.serializeCellValue = serializeCellValue;
 const objectFormattedValueWarning = (0, _warning.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.']);
@@ -55,12 +60,12 @@ class CSVRow {
   }
   addValue(value) {
     if (!this.isEmpty) {
-      this.rowString += this.options.delimiterCharacter;
+      this.rowString += this.options.csvOptions.delimiter;
     }
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;
     }
@@ -74,13 +79,11 @@ const serializeRow = ({
   id,
   columns,
   getCellParams,
-  delimiterCharacter,
-  ignoreValueFormatter,
-  shouldAppendQuotes
+  csvOptions,
+  ignoreValueFormatter
 }) => {
   const row = new CSVRow({
-    delimiterCharacter,
-    shouldAppendQuotes
+    csvOptions
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -90,9 +93,8 @@ const serializeRow = ({
       }
     }
     row.addValue(serializeCellValue(cellParams, {
-      delimiterCharacter,
       ignoreValueFormatter,
-      shouldAppendQuotes
+      csvOptions
     }));
   });
   return row.getRowString();
@@ -101,27 +103,23 @@ function buildCSV(options) {
   const {
     columns,
     rowIds,
-    delimiterCharacter,
-    includeHeaders,
-    includeColumnGroupsHeaders,
+    csvOptions,
     ignoreValueFormatter,
-    apiRef,
-    shouldAppendQuotes
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
-    delimiterCharacter,
     ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions
   })}\r\n`, '').trim();
-  if (!includeHeaders) {
+  if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
   const filteredColumns = columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field);
   const headerRows = [];
-  if (includeColumnGroupsHeaders) {
+  if (csvOptions.includeColumnGroupsHeaders) {
     const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
     let maxColumnGroupsDepth = 0;
     const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
@@ -132,9 +130,8 @@ function buildCSV(options) {
     }, {});
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
-        delimiterCharacter,
-        sanitizeCellValue,
-        shouldAppendQuotes
+        csvOptions,
+        sanitizeCellValue
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -145,9 +142,8 @@ function buildCSV(options) {
     }
   }
   const mainHeaderRow = new CSVRow({
-    delimiterCharacter,
-    sanitizeCellValue,
-    shouldAppendQuotes
+    csvOptions,
+    sanitizeCellValue
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

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

@@ -39,12 +39,15 @@ const useGridCsvExport = (apiRef, props) => {
     return (0, _csvSerializer.buildCSV)({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      delimiterCharacter: options.delimiter || ',',
-      includeHeaders: options.includeHeaders ?? true,
-      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+      csvOptions: {
+        delimiter: options.delimiter || ',',
+        shouldAppendQuotes: options.shouldAppendQuotes ?? true,
+        includeHeaders: options.includeHeaders ?? true,
+        includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+        escapeFormulas: options.escapeFormulas ?? true
+      },
       ignoreValueFormatter,
-      apiRef,
-      shouldAppendQuotes: options.shouldAppendQuotes ?? true
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -144,26 +144,6 @@ const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  const getNearestIndexToRender = React.useCallback(offset => {
-    const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
-    let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
-    if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
-      // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
-    }
-    const lastMeasuredIndexRelativeToCurrentPage = (0, _utils2.clamp)(lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0), 0, rowsMeta.positions.length);
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
-      // If all rows were measured (when no row has "auto" as height) or all rows before the offset
-      // were measured, then use a binary search because it's faster.
-      return binarySearch(offset, rowsMeta.positions);
-    }
-
-    // Otherwise, use an exponential search.
-    // If rows have "auto" as height, their positions will be based on estimated heights.
-    // In this case, we can skip several steps until we find a position higher than the offset.
-    // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
-  }, [apiRef, currentPage.range?.firstRowIndex, currentPage.range?.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (!enabled) {
       return {
@@ -180,8 +160,8 @@ const useGridVirtualScroller = props => {
 
     // Clamp the value because the search may return an index out of bounds.
     // In the last index, this is not needed because Array.slice doesn't include it.
-    const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
+    const firstRowIndex = Math.min(getNearestIndexToRender(apiRef, currentPage, rowsMeta, top), rowsMeta.positions.length - 1);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(apiRef, currentPage, rowsMeta, top + containerDimensions.height);
     let firstColumnIndex = 0;
     let lastColumnIndex = columnPositions.length;
     if (enabledForColumns) {
@@ -208,7 +188,7 @@ const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [enabled, enabledForColumns, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
+  }, [enabled, enabledForColumns, rowsMeta, rootProps.autoHeight, rootProps.rowBuffer, currentPage, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (enabled) {
       // TODO a scroll reset should not be necessary
@@ -604,4 +584,24 @@ const useGridVirtualScroller = props => {
     })
   };
 };
-exports.useGridVirtualScroller = useGridVirtualScroller;
+exports.useGridVirtualScroller = useGridVirtualScroller;
+function getNearestIndexToRender(apiRef, currentPage, rowsMeta, offset) {
+  const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
+  let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
+  if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
+    // Check if all rows in this page are already measured
+    allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
+  }
+  const lastMeasuredIndexRelativeToCurrentPage = (0, _utils2.clamp)(lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0), 0, rowsMeta.positions.length);
+  if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
+    // If all rows were measured (when no row has "auto" as height) or all rows before the offset
+    // were measured, then use a binary search because it's faster.
+    return binarySearch(offset, rowsMeta.positions);
+  }
+
+  // Otherwise, use an exponential search.
+  // If rows have "auto" as height, their positions will be based on estimated heights.
+  // In this case, we can skip several steps until we find a position higher than the offset.
+  // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+  return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
+}