[DataGrid] Fix autosizing with virtualized columns (@k-rajat19) (#15929)

Co-authored-by: Rajat <robertdoweny2301@gmail.com>
Co-authored-by: Andrew Cherniavskii <andrew@mui.com>

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

@@ -27,7 +27,7 @@
     "autosizeOptions": {
       "type": {
         "name": "shape",
-        "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }"
+        "description": "{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }"
       }
     },
     "cellModesModel": { "type": { "name": "object" } },

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

@@ -18,7 +18,7 @@
     "autosizeOptions": {
       "type": {
         "name": "shape",
-        "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }"
+        "description": "{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }"
       }
     },
     "cellModesModel": { "type": { "name": "object" } },

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

@@ -18,7 +18,7 @@
     "autosizeOptions": {
       "type": {
         "name": "shape",
-        "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }"
+        "description": "{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }"
       }
     },
     "cellModesModel": { "type": { "name": "object" } },

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

@@ -133,6 +133,7 @@ DataGridPremiumRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,

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

@@ -120,6 +120,7 @@ DataGridProRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,

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

@@ -130,6 +130,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,

packages/x-data-grid/src/components/GridRow.tsx

@@ -29,6 +29,7 @@ import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFille
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
 import { useGridConfiguration } from '../hooks/utils/useGridConfiguration';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { gridVirtualizationColumnEnabledSelector } from '../hooks';
 
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   row: GridRowModel;
@@ -133,7 +134,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit;
   const editable = rootProps.editMode === GridEditModes.Row;
-
+  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft =
     hasFocusCell &&
@@ -418,8 +419,17 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
       ),
     );
   }
+  let firstColumnIndex;
+  let lastColumnIndex;
+  if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+    firstColumnIndex = 0;
+    lastColumnIndex = visibleColumns.length;
+  } else {
+    firstColumnIndex = renderContext.firstColumnIndex;
+    lastColumnIndex = renderContext.lastColumnIndex;
+  }
 
-  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+  for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
 

packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -101,7 +101,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
+  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
@@ -162,8 +162,15 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
     const { renderContext: currentContext = renderContext, maxLastColumn = visibleColumns.length } =
       params || {};
 
-    const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    let firstColumnToRender;
+    let lastColumnToRender;
+    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+      firstColumnToRender = 0;
+      lastColumnToRender = maxLastColumn;
+    } else {
+      firstColumnToRender = currentContext.firstColumnIndex;
+      lastColumnToRender = currentContext.lastColumnIndex;
+    }
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
     return {

packages/x-data-grid/src/hooks/features/columnResize/gridColumnResizeApi.ts

@@ -5,6 +5,7 @@ export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeOutliers: false,
   outliersFactor: 1.5,
   expand: false,
+  disableColumnVirtualization: true,
 };
 
 export type GridAutosizeOptions = {
@@ -32,6 +33,11 @@ export type GridAutosizeOptions = {
    * @default false
    */
   expand?: boolean;
+  /**
+   * If false, column virtualization is not disabled while resizing.
+   * @default true
+   */
+  disableColumnVirtualization?: boolean;
 };
 
 /**

packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx

@@ -278,6 +278,7 @@ export const useGridColumnResize = (
     | 'disableAutosize'
     | 'onColumnResize'
     | 'onColumnWidthChange'
+    | 'disableVirtualization'
   >,
 ) => {
   const isRtl = useRtl();
@@ -685,6 +686,7 @@ export const useGridColumnResize = (
 
       apiRef.current.autosizeColumns({
         ...props.autosizeOptions,
+        disableColumnVirtualization: false,
         columns: [column.field],
       });
     });
@@ -717,8 +719,10 @@ export const useGridColumnResize = (
       const columns = options.columns.map((c) => apiRef.current.state.columns.lookup[c]);
 
       try {
-        apiRef.current.unstable_setColumnVirtualization(false);
-        await columnVirtualizationDisabled();
+        if (!props.disableVirtualization && options.disableColumnVirtualization) {
+          apiRef.current.unstable_setColumnVirtualization(false);
+          await columnVirtualizationDisabled();
+        }
 
         const widthByField = extractColumnWidths(apiRef, options, columns);
 
@@ -764,11 +768,14 @@ export const useGridColumnResize = (
           }
         });
       } finally {
-        apiRef.current.unstable_setColumnVirtualization(true);
+        if (!props.disableVirtualization) {
+          apiRef.current.unstable_setColumnVirtualization(true);
+        }
+
         isAutosizingRef.current = false;
       }
     },
-    [apiRef, columnVirtualizationDisabled],
+    [apiRef, columnVirtualizationDisabled, props.disableVirtualization],
   );
 
   /**