[DataGrid] Add resizeThrottleMs prop (#12556)

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -548,6 +548,7 @@
         "returned": "Promise<R> | R"
       }
     },
+    "resizeThrottleMs": { "type": { "name": "number" }, "default": "60" },
     "rowBufferPx": { "type": { "name": "number" }, "default": "150" },
     "rowCount": { "type": { "name": "number" } },
     "rowGroupingColumnMode": {

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -491,6 +491,7 @@
         "returned": "Promise<R> | R"
       }
     },
+    "resizeThrottleMs": { "type": { "name": "number" }, "default": "60" },
     "rowBufferPx": { "type": { "name": "number" }, "default": "150" },
     "rowCount": { "type": { "name": "number" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },

docs/pages/x/api/data-grid/data-grid.json

@@ -408,6 +408,7 @@
         "returned": "Promise<R> | R"
       }
     },
+    "resizeThrottleMs": { "type": { "name": "number" }, "default": "60" },
     "rowBufferPx": { "type": { "name": "number" }, "default": "150" },
     "rowCount": { "type": { "name": "number" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -575,6 +575,7 @@
         "Promise<R> | R": "The final values to update the row."
       }
     },
+    "resizeThrottleMs": { "description": "The milliseconds throttle delay for resizing the grid." },
     "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" },
     "rowCount": {
       "description": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows."

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -521,6 +521,7 @@
         "Promise<R> | R": "The final values to update the row."
       }
     },
+    "resizeThrottleMs": { "description": "The milliseconds throttle delay for resizing the grid." },
     "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" },
     "rowCount": {
       "description": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows."

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -424,6 +424,7 @@
         "Promise<R> | R": "The final values to update the row."
       }
     },
+    "resizeThrottleMs": { "description": "The milliseconds throttle delay for resizing the grid." },
     "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" },
     "rowCount": {
       "description": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows."

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -883,6 +883,11 @@ DataGridPremiumRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
+   */
+  resizeThrottleMs: PropTypes.number,
   /**
    * Row region in pixels to render before/after the viewport
    * @default 150

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -785,6 +785,11 @@ DataGridProRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
+   */
+  resizeThrottleMs: PropTypes.number,
   /**
    * Row region in pixels to render before/after the viewport
    * @default 150

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -652,6 +652,11 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
+   */
+  resizeThrottleMs: PropTypes.number,
   /**
    * Row region in pixels to render before/after the viewport
    * @default 150

packages/x-data-grid/src/DataGrid/useDataGridProps.ts

@@ -60,6 +60,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
   pagination: false,
   paginationMode: 'client',
   rowHeight: 52,
+  resizeThrottleMs: 60,
   pageSizeOptions: [25, 50, 100],
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,

packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  unstable_debounce as debounce,
   unstable_ownerDocument as ownerDocument,
   unstable_useEnhancedEffect as useEnhancedEffect,
   unstable_useEventCallback as useEventCallback,
@@ -14,6 +13,7 @@ import {
   useGridApiOptionHandler,
 } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { throttle } from '../../../utils/throttle';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridDimensions, GridDimensionsApi, GridDimensionsPrivateApi } from './gridDimensionsApi';
@@ -40,6 +40,7 @@ type RootProps = Pick<
   | 'autoHeight'
   | 'getRowHeight'
   | 'rowHeight'
+  | 'resizeThrottleMs'
   | 'columnHeaderHeight'
 >;
 
@@ -95,7 +96,10 @@ export function useGridDimensions(
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
 
   const [savedSize, setSavedSize] = React.useState<ElementSize>();
-  const debouncedSetSavedSize = React.useMemo(() => debounce(setSavedSize, 60), []);
+  const debouncedSetSavedSize = React.useMemo(
+    () => throttle(setSavedSize, props.resizeThrottleMs),
+    [props.resizeThrottleMs],
+  );
   const previousSize = React.useRef<ElementSize>();
 
   const getRootDimensions = () => apiRef.current.state.dimensions;

packages/x-data-grid/src/models/props/DataGridProps.ts

@@ -142,6 +142,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default true
    */
   rowSelection: boolean;
+  /**
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
+   */
+  resizeThrottleMs: number;
   /**
    * If `true`, column filters are disabled.
    * @default false

packages/x-data-grid/src/utils/throttle.ts

@@ -0,0 +1,27 @@
+export interface Cancelable {
+  clear(): void;
+}
+
+export function throttle<T extends (...args: any[]) => any>(func: T, wait = 166) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  let lastArgs: Parameters<T>;
+
+  const later = () => {
+    timeout = undefined;
+    func(...lastArgs);
+  };
+
+  function throttled(...args: Parameters<T>) {
+    lastArgs = args;
+    if (timeout === undefined) {
+      timeout = setTimeout(later, wait);
+    }
+  }
+
+  throttled.clear = () => {
+    clearTimeout(timeout);
+    timeout = undefined;
+  };
+
+  return throttled as T & Cancelable;
+}