@mui/x-data-grid 5.8.0 → 5.9.0

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { GridCellIndexCoordinates, GridScrollParams } from '../../../models';
+import { GridCellIndexCoordinates, GridScrollParams, GridColDef } from '../../../models';
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
-import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
 import { GridRowEntry } from '../../../models/gridRows';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
 export declare type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
-    hydrateColumns: {
-        value: GridHydrateColumnsValue;
-    };
-    scrollToIndexes: {
-        value: Partial<GridScrollParams>;
-        context: Partial<GridCellIndexCoordinates>;
-    };
     columnMenu: {
         value: React.ReactNode[];
         context: GridColDef;
@@ -22,6 +14,13 @@ export interface GridPipeProcessingLookup {
     exportState: {
         value: GridInitialStateCommunity;
     };
+    hydrateColumns: {
+        value: GridHydrateColumnsValue;
+    };
+    preferencePanel: {
+        value: React.ReactNode;
+        context: GridPreferencePanelsValue;
+    };
     restoreState: {
         value: GridRestoreStatePreProcessingValue;
         context: GridRestoreStatePreProcessingContext<GridInitialStateCommunity>;
@@ -30,9 +29,9 @@ export interface GridPipeProcessingLookup {
         value: Record<string, number>;
         context: GridRowEntry;
     };
-    preferencePanel: {
-        value: React.ReactNode;
-        context: GridPreferencePanelsValue;
+    scrollToIndexes: {
+        value: Partial<GridScrollParams>;
+        context: Partial<GridCellIndexCoordinates>;
     };
 }
 export declare type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
@@ -46,14 +45,14 @@ declare type GridPipeProcessorsApplierArgs<P extends GridPipeProcessorGroup, T e
 declare type GridPipeProcessorsApplier = <P extends GridPipeProcessorGroup>(...params: GridPipeProcessorsApplierArgs<P, GridPipeProcessingLookup[P]>) => GridPipeProcessingLookup[P]['value'];
 export interface GridPipeProcessingApi {
     /**
-     * Register a pre-processor and emit an event to notify the agents to re-apply the pre-processors.
+     * Register a processor and run all the appliers of the group.
      * @param {GridPipeProcessorGroup} group The group on which this processor should be applied.
-     * @param {number} id An unique and static identifier of the processor.
+     * @param {string} id An unique and static identifier of the processor.
      * @param {GridPipeProcessor} processor The processor to register.
      * @returns {() => void} A function to unregister the processor.
      * @ignore - do not document.
      */
-    unstable_registerPipeProcessor: <G extends GridPipeProcessorGroup>(processorName: GridPipeProcessorGroup, id: string, callback: GridPipeProcessor<G>) => () => void;
+    unstable_registerPipeProcessor: <G extends GridPipeProcessorGroup>(group: GridPipeProcessorGroup, id: string, callback: GridPipeProcessor<G>) => () => void;
     /**
      * Run all the processors registered for the given group.
      * @template T
@@ -64,5 +63,23 @@ export interface GridPipeProcessingApi {
      * @ignore - do not document.
      */
     unstable_applyPipeProcessors: GridPipeProcessorsApplier;
+    /**
+     * Register an applier.
+     * @param {GridPipeProcessorGroup} group The group of this applier
+     * @param {string} id An unique and static identifier of the applier.
+     * @param {() => void} applier The applier to register.
+     * @returns {() => void} A function to unregister the applier.
+     * @ignore - do not document.
+     */
+    unstable_registerPipeApplier: (group: GridPipeProcessorGroup, id: string, applier: () => void) => () => void;
+    /**
+     * Imperatively run all the appliers of a group.
+     * Most of the time, the applier should run because a processor is re-registered,
+     * but sometimes we want to re-apply the processing even if the processor deps have not changed.
+     * This may occur when the change requires a `isDeepEqual` check.
+     * @param {GridPipeProcessorGroup} group The group to apply.
+     * @ignore - do not document.
+     */
+    unstable_requestPipeProcessorsApplication: (group: GridPipeProcessorGroup) => void;
 }
 export {};

package/hooks/core/pipeProcessing/index.d.ts

@@ -1,3 +1,4 @@
 export * from './gridPipeProcessingApi';
 export * from './useGridPipeProcessing';
 export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeApplier';

package/hooks/core/pipeProcessing/index.js

@@ -1,3 +1,4 @@
 export * from './gridPipeProcessingApi';
 export * from './useGridPipeProcessing';
-export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeApplier';

package/hooks/core/pipeProcessing/useGridPipeProcessing.d.ts

@@ -13,7 +13,10 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterPipeProcessor` to register their processor.
- *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
  *
  * =====================================================================================================================
  *
@@ -21,7 +24,9 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
  *
  * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
  *
- * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
- *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
  */
 export declare const useGridPipeProcessing: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -1,9 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
+
 /**
  * Implement the Pipeline Pattern
  *
@@ -17,7 +16,10 @@ import { GridEvents } from '../../../models/events';
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterPipeProcessor` to register their processor.
- *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
  *
  * =====================================================================================================================
  *
@@ -25,35 +27,65 @@ import { GridEvents } from '../../../models/events';
  *
  * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
  *
- * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
- *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
  */
-
 export const useGridPipeProcessing = apiRef => {
   const processorsCache = React.useRef({});
+  const runAppliers = React.useCallback(groupCache => {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(callback => {
+      callback();
+    });
+  }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
     if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {};
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
     }
 
-    const groupProcessors = processorsCache.current[group];
-    const oldProcessor = groupProcessors[id];
+    const groupCache = processorsCache.current[group];
+    const oldProcessor = groupCache.processors[id];
 
     if (oldProcessor !== processor) {
-      processorsCache.current[group] = _extends({}, groupProcessors, {
-        [id]: processor
-      });
-      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
     }
 
     return () => {
-      const _ref = processorsCache.current[group],
-            otherProcessors = _objectWithoutPropertiesLoose(_ref, [id].map(_toPropertyKey));
+      const _processors = processorsCache.current[group].processors,
+            otherProcessors = _objectWithoutPropertiesLoose(_processors, [id].map(_toPropertyKey));
 
-      processorsCache.current[group] = otherProcessors;
-      apiRef.current.publishEvent(GridEvents.pipeProcessorUnregister, group);
+      processorsCache.current[group].processors = otherProcessors;
     };
-  }, [apiRef]);
+  }, [runAppliers]);
+  const registerPipeApplier = React.useCallback((group, id, applier) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return () => {
+      const _appliers = processorsCache.current[group].appliers,
+            otherAppliers = _objectWithoutPropertiesLoose(_appliers, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  const requestPipeProcessorsApplication = React.useCallback(group => {
+    const groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
 
@@ -61,13 +93,15 @@ export const useGridPipeProcessing = apiRef => {
       return value;
     }
 
-    const preProcessors = Object.values(processorsCache.current[group]);
+    const preProcessors = Object.values(processorsCache.current[group].processors);
     return preProcessors.reduce((acc, preProcessor) => {
       return preProcessor(acc, context);
     }, value);
   }, []);
   const preProcessingApi = {
     unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
     unstable_applyPipeProcessors: applyPipeProcessors
   };
   useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../../models/api/gridApiCommon';
+export declare const useGridRegisterPipeApplier: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: () => void) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
+  const cleanup = React.useRef();
+  const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
+  const registerPreProcessor = React.useCallback(() => {
+    cleanup.current = apiRef.current.unstable_registerPipeApplier(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  useFirstRender(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return () => {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [registerPreProcessor]);
+};

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,7 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessor } from './gridPipeProcessingApi';
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
 export declare const useGridRegisterPipeProcessor: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: GridPipeProcessor<G>) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -12,7 +12,6 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         maxLastColumn?: number | undefined;
     } | undefined, other?: {}) => JSX.Element[] | null;
     isDragging: boolean;
-    updateInnerPosition: (nextRenderContext: GridRenderContext) => void;
     getRootProps: (other?: {}) => {
         style: {
             minHeight: number;

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
+import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
@@ -13,7 +15,15 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+function isUIEvent(event) {
+  return !!event.target;
+}
+
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -37,18 +47,43 @@ export const useGridColumnHeaders = props => {
   const [renderContext, setRenderContext] = React.useState(null);
   const prevRenderContext = React.useRef(renderContext);
   const prevScrollLeft = React.useRef(0);
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-  }, [apiRef]);
+  }, [apiRef]); // memoize `getFirstColumnIndexToRender`, since it's called on scroll
+
+  const getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
+    equalityCheck: (a, b) => ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(key => a[key] === b[key])
+  }));
   const updateInnerPosition = React.useCallback(nextRenderContext => {
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex,
+      columnBuffer: rootProps.columnBuffer,
+      firstRowToRender,
+      lastRowToRender,
+      apiRef,
+      visibleRows: currentPage.rows
+    });
     const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  React.useLayoutEffect(() => {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
   const handleScroll = React.useCallback(({
     left,
     renderContext: nextRenderContext = null
-  }) => {
+  }, event) => {
     var _prevRenderContext$cu, _prevRenderContext$cu2;
 
     if (!innerRef.current) {
@@ -61,15 +96,32 @@ export const useGridColumnHeaders = props => {
       return;
     }
 
-    prevScrollLeft.current = left;
+    prevScrollLeft.current = left; // We can only update the position when we guarantee that the render context has been
+    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
+
+    let canUpdateInnerPosition = false;
 
     if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      setRenderContext(nextRenderContext);
+      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
+      if (isUIEvent(event)) {
+        // To prevent flickering, the inner position can only be updated after the new context has
+        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
+        // updating the position.
+        ReactDOM.flushSync(() => {
+          setRenderContext(nextRenderContext);
+        });
+        canUpdateInnerPosition = true;
+      } else {
+        setRenderContext(nextRenderContext);
+      }
+
       prevRenderContext.current = nextRenderContext;
+    } else {
+      canUpdateInnerPosition = true;
     } // Pass directly the render context to avoid waiting for the next render
 
 
-    if (nextRenderContext) {
+    if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
   }, [updateInnerPosition]);
@@ -95,7 +147,22 @@ export const useGridColumnHeaders = props => {
     }
 
     const columns = [];
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minFirstColumn,
+      columnBuffer: rootProps.columnBuffer,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
@@ -119,7 +186,7 @@ export const useGridColumnHeaders = props => {
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -134,7 +201,6 @@ export const useGridColumnHeaders = props => {
     renderContext,
     getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition,
     getRootProps: (other = {}) => _extends({
       style: rootStyle
     }, other),

package/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -15,7 +15,9 @@ export interface GridColumnsState {
     lookup: GridColumnLookup;
     columnVisibilityModel: GridColumnVisibilityModel;
 }
-export declare type GridColumnDimensions = Pick<GridStateColDef, GridColumnDimensionProperties>;
+export declare type GridColumnDimensions = {
+    [key in GridColumnDimensionProperties]?: number;
+};
 export interface GridColumnsInitialState {
     columnVisibilityModel?: GridColumnVisibilityModel;
     orderedFields?: string[];

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -4,6 +4,8 @@ import { GridColType, GridColumnTypesRecord } from '../../../models';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridColDef } from '../../../models/colDef/gridColDef';
+import { GridApiCommon } from '../../../models/api/gridApiCommon';
+import { GridRowEntry } from '../../../models/gridRows';
 export declare const COLUMNS_DIMENSION_PROPERTIES: readonly ["maxWidth", "minWidth", "width", "flex"];
 export declare type GridColumnDimensionProperties = typeof COLUMNS_DIMENSION_PROPERTIES[number];
 export declare const computeColumnTypes: (customColumnTypes?: GridColumnTypesRecord) => GridColumnTypesRecord;
@@ -17,7 +19,7 @@ export declare function computeFlexColumnsWidth({ initialFreeSpace, totalFlexUni
     totalFlexUnits: number;
     flexColumns: {
         field: GridColDef['field'];
-        flex?: number;
+        flex?: number | null;
         minWidth?: number;
         maxWidth?: number;
     }[];
@@ -52,3 +54,19 @@ export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialStat
     apiRef: React.MutableRefObject<GridApiCommunity>;
 }) => GridColumnsState;
 export declare const mergeColumnsState: (columnsState: GridColumnsState) => (state: GridStateCommunity) => GridStateCommunity;
+export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender, apiRef, firstRowToRender, lastRowToRender, visibleRows, }: {
+    firstColumnToRender: number;
+    apiRef: React.MutableRefObject<GridApiCommon>;
+    firstRowToRender: number;
+    lastRowToRender: number;
+    visibleRows: GridRowEntry[];
+}): number;
+export declare function getFirstColumnIndexToRender({ firstColumnIndex, minColumnIndex, columnBuffer, firstRowToRender, lastRowToRender, apiRef, visibleRows, }: {
+    firstColumnIndex: number;
+    minColumnIndex: number;
+    columnBuffer: number;
+    apiRef: React.MutableRefObject<GridApiCommon>;
+    firstRowToRender: number;
+    lastRowToRender: number;
+    visibleRows: GridRowEntry[];
+}): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -206,9 +206,15 @@ export const applyInitialState = (columnsState, initialState) => {
 
   for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
     const field = columnsWithUpdatedDimensions[i];
-    newColumnLookup[field] = _extends({}, newColumnLookup[field], dimensions[field], {
+
+    const newColDef = _extends({}, newColumnLookup[field], {
       hasBeenResized: true
     });
+
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
   }
 
   const newColumnsState = {
@@ -296,16 +302,20 @@ export const createColumnsState = ({
       columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
 
-    let hasValidDimension = false;
-
-    if (!existingState.hasBeenResized) {
-      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(key => newColumn[key] !== undefined);
-    }
+    let hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
 
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
     columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
       hide: newColumn.hide == null ? false : newColumn.hide
     }, newColumn, {
-      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+      hasBeenResized
     });
   });
 
@@ -394,4 +404,47 @@ export const createColumnsState = ({
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState
-});
+});
+export function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}) {
+  let firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+    const row = visibleRows[i];
+
+    if (row) {
+      const rowId = visibleRows[i].id;
+      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+export function getFirstColumnIndexToRender({
+  firstColumnIndex,
+  minColumnIndex,
+  columnBuffer,
+  firstRowToRender,
+  lastRowToRender,
+  apiRef,
+  visibleRows
+}) {
+  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef,
+    firstRowToRender,
+    lastRowToRender,
+    visibleRows
+  });
+  return firstColumnToRender;
+}

package/hooks/features/columns/useGridColumnSpanning.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridColumnSpanning: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;