@mui/x-virtualizer 0.1.0 → 0.1.2

package/esm/features/virtualization.js

@@ -11,6 +11,7 @@ import * as platform from '@mui/x-internals/platform';
 import { useRunOnce } from '@mui/x-internals/useRunOnce';
 import { useFirstRender } from '@mui/x-internals/useFirstRender';
 import { createSelector, useStore, useStoreEffect } from '@mui/x-internals/store';
+import { PinnedRows, PinnedColumns } from "../models/core.js";
 import { Dimensions } from "./dimensions.js";
 import { ScrollDirection } from "../models/index.js";
 
@@ -57,28 +58,29 @@ function initializeState(params) {
 
 function useVirtualization(store, params, api) {
   const {
-    initialState,
-    isRtl,
-    rows,
-    range,
-    columns,
-    pinnedRows,
-    pinnedColumns,
     refs,
-    hasColSpan,
     dimensions: {
       rowHeight,
       columnsTotalWidth
     },
-    contentHeight,
+    virtualization: {
+      isRtl = false,
+      rowBufferPx = 150,
+      columnBufferPx = 150
+    },
+    colspan,
+    initialState,
+    rows,
+    range,
+    columns,
+    pinnedRows = PinnedRows.EMPTY,
+    pinnedColumns = PinnedColumns.EMPTY,
     minimalContentHeight,
     autoHeight,
     onWheel,
     onTouchMove,
     onRenderContextChange,
     onScrollChange,
-    rowBufferPx,
-    columnBufferPx,
     scrollReset,
     renderRow,
     renderInfiniteLoadingTrigger
@@ -86,10 +88,12 @@ function useVirtualization(store, params, api) {
   const needsHorizontalScrollbar = useStore(store, Dimensions.selectors.needsHorizontalScrollbar);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
+  const [, setRefTick] = React.useState(0);
   const isRenderContextReady = React.useRef(false);
   const renderContext = useStore(store, selectors.renderContext);
   const enabledForRows = useStore(store, selectors.enabledForRows);
   const enabledForColumns = useStore(store, selectors.enabledForColumns);
+  const contentHeight = useStore(store, Dimensions.selectors.contentHeight);
 
   /*
    * Scroll context logic
@@ -114,18 +118,17 @@ function useVirtualization(store, params, api) {
   const frozenContext = React.useRef(undefined);
   const scrollCache = useLazyRef(() => createScrollCache(isRtl, rowBufferPx, columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const updateRenderContext = React.useCallback(nextRenderContext => {
-    if (areRenderContextsEqual(nextRenderContext, store.state.virtualization.renderContext)) {
-      return;
+    if (!areRenderContextsEqual(nextRenderContext, store.state.virtualization.renderContext)) {
+      store.set('virtualization', _extends({}, store.state.virtualization, {
+        renderContext: nextRenderContext
+      }));
     }
-    const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
-    store.set('virtualization', _extends({}, store.state.virtualization, {
-      renderContext: nextRenderContext
-    }));
 
     // The lazy-loading hook is listening to `renderedRowsIntervalChange`,
     // but only does something if we already have a render context, because
     // otherwise we would call an update directly on mount
     const isReady = Dimensions.selectors.dimensions(store.state).isReady;
+    const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
     if (isReady && didRowsIntervalChange) {
       previousRowContext.current = nextRenderContext;
       onRenderContextChange?.(nextRenderContext);
@@ -150,7 +153,7 @@ function useVirtualization(store, params, api) {
     const dy = newScroll.top - scrollPosition.current.top;
     const isScrolling = dx !== 0 || dy !== 0;
     scrollPosition.current = newScroll;
-    const direction = isScrolling ? directionForDelta(dx, dy) : ScrollDirection.NONE;
+    const direction = isScrolling ? ScrollDirection.forDelta(dx, dy) : ScrollDirection.NONE;
 
     // Since previous render, we have scrolled...
     const rowScroll = Math.abs(scrollPosition.current.top - previousContextScrollPosition.current.top);
@@ -218,9 +221,7 @@ function useVirtualization(store, params, api) {
    * section of code to the DataGrid's rowTree model. The `unstable_rowTree` param is a temporary
    * solution to decouple the code.
    */
-  const getRows = (
-  // eslint-disable-next-line @typescript-eslint/default-param-last
-  rowParams = {}, unstable_rowTree) => {
+  const getRows = (rowParams = {}, unstable_rowTree) => {
     if (!rowParams.rows && !range) {
       return [];
     }
@@ -250,7 +251,7 @@ function useVirtualization(store, params, api) {
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
     const rowIndexes = rowParams.rows ? createRange(0, rowParams.rows.length) : createRange(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
-    const focusedVirtualCell = params.focusedVirtualCell();
+    const focusedVirtualCell = params.focusedVirtualCell?.();
     if (!isPinnedSection && focusedVirtualCell) {
       if (focusedVirtualCell.rowIndex < firstRowToRender) {
         rowIndexes.unshift(focusedVirtualCell.rowIndex);
@@ -275,13 +276,13 @@ function useVirtualization(store, params, api) {
       // See:
       // - https://github.com/mui/mui-x/issues/16638
       // - https://github.com/mui/mui-x/issues/17022
-      if (!unstable_rowTree[id]) {
+      if (unstable_rowTree && !unstable_rowTree[id]) {
         return;
       }
       const rowIndex = (range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.
-      if (hasColSpan) {
+      if (colspan?.enabled) {
         const minFirstColumn = pinnedColumns.left.length;
         const maxLastColumn = columns.length - pinnedColumns.right.length;
         api.calculateColSpan(id, minFirstColumn, maxLastColumn, columns);
@@ -327,7 +328,6 @@ function useVirtualization(store, params, api) {
         offsetLeft,
         columnsTotalWidth,
         baseRowHeight,
-        columns,
         firstColumnIndex,
         lastColumnIndex,
         focusedColumnIndex: isVirtualFocusColumn ? focusedVirtualCell.columnIndex : undefined,
@@ -364,12 +364,12 @@ function useVirtualization(store, params, api) {
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar, minimalContentHeight]);
-  const verticalScrollRestoreCallback = React.useRef(null);
-  const onContentSizeApplied = React.useCallback(node => {
+  const scrollRestoreCallback = React.useRef(null);
+  const contentNodeRef = React.useCallback(node => {
     if (!node) {
       return;
     }
-    verticalScrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
+    scrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
   }, [columnsTotalWidth, contentHeight]);
   useEnhancedEffect(() => {
     if (!isRenderContextReady.current) {
@@ -391,54 +391,58 @@ function useVirtualization(store, params, api) {
         top,
         left
       } = initialState.scroll;
-
-      // On initial mount, if we have columns available, we can restore the horizontal scroll immediately, but we need to skip the resulting scroll event, otherwise we would recalculate the render context at position top=0, left=restoredValue, but the initial render context is already calculated based on the initial value of scrollPosition ref.
       const isScrollRestored = {
         top: !(top > 0),
         left: !(left > 0)
       };
       if (!isScrollRestored.left && columnsTotalWidth) {
         scroller.scrollLeft = left;
-        ignoreNextScrollEvent.current = true;
         isScrollRestored.left = true;
+        ignoreNextScrollEvent.current = true;
       }
 
-      // For the sake of completeness, but I'm not sure if contentHeight is ever available at this point. Maybe when virtualisation is disabled?
+      // To restore the vertical scroll, we need to wait until the rows are available in the DOM (otherwise
+      // there's nowhere to scroll). We still set the scrollTop to the initial value at this point in case
+      // there already are rows rendered in the DOM, but we only confirm `isScrollRestored.top = true` in the
+      // asynchronous callback below.
       if (!isScrollRestored.top && contentHeight) {
         scroller.scrollTop = top;
         ignoreNextScrollEvent.current = true;
-        isScrollRestored.top = true;
       }
-
-      // To restore the vertical scroll, we need to wait until the rows are available in the DOM (otherwise there's nowhere to scroll), but before paint to avoid reflows
       if (!isScrollRestored.top || !isScrollRestored.left) {
-        verticalScrollRestoreCallback.current = (columnsTotalWidthCurrent, contentHeightCurrent) => {
+        scrollRestoreCallback.current = (columnsTotalWidthCurrent, contentHeightCurrent) => {
           if (!isScrollRestored.left && columnsTotalWidthCurrent) {
             scroller.scrollLeft = left;
-            ignoreNextScrollEvent.current = true;
             isScrollRestored.left = true;
+            ignoreNextScrollEvent.current = true;
           }
           if (!isScrollRestored.top && contentHeightCurrent) {
             scroller.scrollTop = top;
-            ignoreNextScrollEvent.current = true;
             isScrollRestored.top = true;
+            ignoreNextScrollEvent.current = true;
           }
           if (isScrollRestored.left && isScrollRestored.top) {
-            verticalScrollRestoreCallback.current = null;
+            scrollRestoreCallback.current = null;
           }
         };
       }
     }
   });
   useStoreEffect(store, Dimensions.selectors.dimensions, forceUpdateRenderContext);
+  const refSetter = name => node => {
+    if (node && refs[name].current !== node) {
+      refs[name].current = node;
+      setRefTick(tick => tick + 1);
+    }
+  };
   const getters = {
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: params.refs.container
+      ref: refSetter('container')
     }),
     getScrollerProps: () => ({
-      ref: refs.scroller,
+      ref: refSetter('scroller'),
       onScroll: handleScroll,
       onWheel,
       onTouchMove,
@@ -449,19 +453,16 @@ function useVirtualization(store, params, api) {
       tabIndex: platform.isFirefox ? -1 : undefined
     }),
     getContentProps: () => ({
+      ref: contentNodeRef,
       style: contentSize,
-      role: 'presentation',
-      ref: onContentSizeApplied
-    }),
-    getRenderZoneProps: () => ({
-      role: 'rowgroup'
+      role: 'presentation'
     }),
     getScrollbarVerticalProps: () => ({
-      ref: refs.scrollbarVertical,
+      ref: refSetter('scrollbarVertical'),
       scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
-      ref: refs.scrollbarHorizontal,
+      ref: refSetter('scrollbarHorizontal'),
       scrollPosition
     }),
     getScrollAreaProps: () => ({
@@ -474,9 +475,9 @@ function useVirtualization(store, params, api) {
     });
   });
   React.useEffect(() => {
-    store.update(_extends({}, store.state, {
+    store.update({
       getters
-    }));
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, Object.values(getters));
 
@@ -514,8 +515,8 @@ function inputsSelector(store, params, api, enabledForRows, enabledForColumns) {
     enabledForRows,
     enabledForColumns,
     autoHeight: params.autoHeight,
-    rowBufferPx: params.rowBufferPx,
-    columnBufferPx: params.columnBufferPx,
+    rowBufferPx: params.virtualization.rowBufferPx,
+    columnBufferPx: params.virtualization.columnBufferPx,
     leftPinnedWidth: dimensions.leftPinnedWidth,
     columnsTotalWidth: dimensions.columnsTotalWidth,
     viewportInnerWidth: dimensions.viewportInnerSize.width,
@@ -645,8 +646,8 @@ function deriveRenderContext(inputs, nextRenderContext, scrollCache) {
   const [initialFirstColumnToRender, lastColumnToRender] = getIndexesToRender({
     firstIndex: nextRenderContext.firstColumnIndex,
     lastIndex: nextRenderContext.lastColumnIndex,
-    minFirstIndex: inputs.pinnedColumns.left.length,
-    maxLastIndex: inputs.columns.length - inputs.pinnedColumns.right.length,
+    minFirstIndex: inputs.pinnedColumns?.left.length ?? 0,
+    maxLastIndex: inputs.columns.length - (inputs.pinnedColumns?.right.length ?? 0),
     bufferBefore: scrollCache.buffer.columnBefore,
     bufferAfter: scrollCache.buffer.columnAfter,
     positions: inputs.columnPositions,
@@ -727,26 +728,6 @@ export function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLeng
   const left = (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return Math.abs(left);
 }
-function directionForDelta(dx, dy) {
-  if (dx === 0 && dy === 0) {
-    return ScrollDirection.NONE;
-  }
-  /* eslint-disable */
-  if (Math.abs(dy) >= Math.abs(dx)) {
-    if (dy > 0) {
-      return ScrollDirection.DOWN;
-    } else {
-      return ScrollDirection.UP;
-    }
-  } else {
-    if (dx > 0) {
-      return ScrollDirection.RIGHT;
-    } else {
-      return ScrollDirection.LEFT;
-    }
-  }
-  /* eslint-enable */
-}
 function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
   if (isRtl) {
     switch (direction) {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-virtualizer v0.1.0
+ * @mui/x-virtualizer v0.1.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/models/core.d.ts

@@ -2,13 +2,13 @@ export type Size = {
   width: number;
   height: number;
 };
-export declare namespace Size {
-  const EMPTY: {
+export declare const Size: {
+  EMPTY: {
     width: number;
     height: number;
   };
-  function equals(a: Size, b: Size): boolean;
-}
+  equals: (a: Size, b: Size) => boolean;
+};
 export type Row = {
   [key: string | symbol]: any;
 };
@@ -27,10 +27,16 @@ export type PinnedRows = {
   top: RowEntry[];
   bottom: RowEntry[];
 };
+export declare const PinnedRows: {
+  EMPTY: PinnedRows;
+};
 export type PinnedColumns = {
   left: Column[];
   right: Column[];
 };
+export declare const PinnedColumns: {
+  EMPTY: PinnedColumns;
+};
 export type FocusedCell = {
   rowIndex: number;
   columnIndex: number;

package/esm/models/core.js

@@ -1,15 +1,27 @@
 /* eslint-disable @typescript-eslint/no-redeclare */
-export let Size;
-(function (_Size) {
-  const EMPTY = _Size.EMPTY = {
+
+export const Size = {
+  EMPTY: {
     width: 0,
     height: 0
-  };
-  function equals(a, b) {
-    return a.width === b.width && a.height === b.height;
+  },
+  equals: (a, b) => a.width === b.width && a.height === b.height
+};
+
+// TODO
+
+export const PinnedRows = {
+  EMPTY: {
+    top: [],
+    bottom: []
   }
-  _Size.equals = equals;
-})(Size || (Size = {})); // TODO
+};
+export const PinnedColumns = {
+  EMPTY: {
+    left: [],
+    right: []
+  }
+};
 export let ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
   ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
   ScrollDirection[ScrollDirection["UP"] = 1] = "UP";

package/esm/models/dimensions.d.ts

@@ -38,7 +38,7 @@ export interface DimensionsState {
    */
   scrollbarSize: number;
   /**
-   * Width of a row.
+   * Width of a row. At least as wide as `viewportOuterSize.width`.
    */
   rowWidth: number;
   /**
@@ -46,7 +46,7 @@ export interface DimensionsState {
    */
   rowHeight: number;
   /**
-   * Size of all the visible columns.
+   * Size of all the columns.
    */
   columnsTotalWidth: number;
   /**
@@ -57,22 +57,6 @@ export interface DimensionsState {
    * Size of right pinned columns.
    */
   rightPinnedWidth: number;
-  /**
-   * Height of one column header.
-   */
-  headerHeight: number;
-  /**
-   * Height of one column group header.
-   */
-  groupHeaderHeight: number;
-  /**
-   * Height of header filters.
-   */
-  headerFilterHeight: number;
-  /**
-   * Height of all the column headers.
-   */
-  headersTotalHeight: number;
   /**
    * Size of the top container.
    */
@@ -103,21 +87,6 @@ export interface RowsMetaState {
    */
   pinnedBottomRowsTotalHeight: number;
 }
-export interface RowVisibilityParams {
-  /**
-   * Whether this row is the first visible or not.
-   */
-  isFirstVisible: boolean;
-  /**
-   * Whether this row is the last visible or not.
-   */
-  isLastVisible: boolean;
-  /**
-   * Index of the row in the current page.
-   * If the pagination is disabled, it will be the index relative to all filtered rows.
-   */
-  indexRelativeToCurrentPage: number;
-}
 export interface RowSpacing {
   top?: number;
   bottom?: number;

package/esm/useVirtualizer.d.ts

@@ -5,34 +5,32 @@ import { Colspan } from "./features/colspan.js";
 import { Dimensions } from "./features/dimensions.js";
 import { Rowspan } from "./features/rowspan.js";
 import { Virtualization } from "./features/virtualization.js";
-import type { RowId } from "./models/core.js";
-import type { HeightEntry, RowSpacing, RowVisibilityParams } from "./models/dimensions.js";
+import type { HeightEntry, RowSpacing } from "./models/dimensions.js";
+import type { ColspanParams } from "./features/colspan.js";
+import type { DimensionsParams } from "./features/dimensions.js";
+import type { VirtualizationParams } from "./features/virtualization.js";
 import { ColumnWithWidth, FocusedCell, Size, PinnedRows, PinnedColumns, RenderContext, Row, RowEntry } from "./models/index.js";
 export type Virtualizer = ReturnType<typeof useVirtualizer>;
 export type VirtualScrollerCompat = Virtualization.State['getters'];
 export type BaseState = Virtualization.State & Dimensions.State;
 export type VirtualizerParams = {
-  scrollbarSize?: number;
-  dimensions: {
-    rowHeight: number;
-    headerHeight: number;
-    groupHeaderHeight: number;
-    headerFilterHeight: number;
-    columnsTotalWidth: number;
-    headersTotalHeight: number;
-    leftPinnedWidth: number;
-    rightPinnedWidth: number;
+  refs: {
+    container: RefObject<HTMLDivElement | null>;
+    scroller: RefObject<HTMLDivElement | null>;
+    scrollbarVertical: RefObject<HTMLDivElement | null>;
+    scrollbarHorizontal: RefObject<HTMLDivElement | null>;
   };
+  dimensions: DimensionsParams;
+  virtualization: VirtualizationParams;
+  colspan?: ColspanParams;
   initialState?: {
     scroll?: {
       top: number;
       left: number;
     };
-    dimensions?: Partial<Dimensions.State['dimensions']>;
     rowSpanning?: Rowspan.State['rowSpanning'];
     virtualization?: Partial<Virtualization.State['virtualization']>;
   };
-  isRtl: boolean;
   /** current page rows */
   rows: RowEntry[];
   /** current page range */
@@ -40,21 +38,12 @@ export type VirtualizerParams = {
     firstRowIndex: integer;
     lastRowIndex: integer;
   } | null;
-  rowIdToIndexMap: Map<RowId, number>;
   rowCount: integer;
   columns: ColumnWithWidth[];
-  pinnedRows: PinnedRows;
-  pinnedColumns: PinnedColumns;
-  refs: {
-    container: RefObject<HTMLDivElement | null>;
-    scroller: RefObject<HTMLDivElement | null>;
-    scrollbarVertical: RefObject<HTMLDivElement | null>;
-    scrollbarHorizontal: RefObject<HTMLDivElement | null>;
-  };
-  hasColSpan: boolean;
-  contentHeight: number;
-  minimalContentHeight: number | string;
+  pinnedRows?: PinnedRows;
+  pinnedColumns?: PinnedColumns;
   autoHeight: boolean;
+  minimalContentHeight?: number | string;
   getRowHeight?: (row: RowEntry) => number | null | undefined | 'auto';
   /**
    * Function that returns the estimated height for a row.
@@ -67,10 +56,9 @@ export type VirtualizerParams = {
   /**
    * Function that allows to specify the spacing between rows.
    * @param rowEntry
-   * @param visibility With all properties from [[RowVisibilityParams]].
    * @returns The row spacing values.
    */
-  getRowSpacing?: (rowEntry: RowEntry, visibility: RowVisibilityParams) => RowSpacing;
+  getRowSpacing?: (rowEntry: RowEntry) => RowSpacing;
   /** Update the row height values before they're used.
    * Used to add detail panel heights.
    * @param entry
@@ -87,11 +75,8 @@ export type VirtualizerParams = {
     top: number;
     left: number;
   }, nextRenderContext: RenderContext) => void;
-  focusedVirtualCell: () => FocusedCell | null;
-  rowBufferPx: number;
-  columnBufferPx: number;
+  focusedVirtualCell?: () => FocusedCell | null;
   scrollReset?: any;
-  getColspan: (rowId: RowId, column: ColumnWithWidth, columnIndex: integer) => number;
   renderRow: (params: {
     id: any;
     model: Row;
@@ -99,7 +84,6 @@ export type VirtualizerParams = {
     offsetLeft: number;
     columnsTotalWidth: number;
     baseRowHeight: number | 'auto';
-    columns: ColumnWithWidth[];
     firstColumnIndex: number;
     lastColumnIndex: number;
     focusedColumnIndex: number | undefined;
@@ -116,29 +100,29 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
     updateDimensions: () => void;
     debouncedUpdateDimensions: ((() => void) & import("@mui/x-internals/throttle/throttle").Cancelable) | undefined;
     rowsMeta: {
-      getRowHeight: (rowId: RowId) => any;
+      getRowHeight: (rowId: import("./models/index.js").RowId) => any;
       setLastMeasuredRowIndex: (index: number) => void;
-      storeRowHeightMeasurement: (id: RowId, height: number) => void;
+      storeRowHeightMeasurement: (id: import("./models/index.js").RowId, height: number) => void;
       hydrateRowsMeta: () => void;
-      observeRowHeight: (element: Element, rowId: RowId) => () => void | undefined;
-      rowHasAutoHeight: (id: RowId) => any;
-      getRowHeightEntry: (rowId: RowId) => any;
+      observeRowHeight: (element: Element, rowId: import("./models/index.js").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("./models/index.js").RowId) => any;
+      getRowHeightEntry: (rowId: import("./models/index.js").RowId) => any;
       getLastMeasuredRowIndex: () => number;
       resetRowHeights: () => void;
     };
   } & {
     getters: {
       setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-      getRows: (rowParams: {
+      getRows: (rowParams?: {
         rows?: RowEntry[];
         position?: import("./models/index.js").PinnedRowPosition;
         renderContext?: RenderContext;
-      } | undefined, unstable_rowTree: Record<RowId, any>) => React.ReactNode[];
+      }, unstable_rowTree?: Record<import("./models/index.js").RowId, any>) => React.ReactNode[];
       getContainerProps: () => {
-        ref: React.RefObject<HTMLDivElement | null>;
+        ref: (node: HTMLDivElement | null) => void;
       };
       getScrollerProps: () => {
-        ref: React.RefObject<HTMLDivElement | null>;
+        ref: (node: HTMLDivElement | null) => void;
         onScroll: () => void;
         onWheel: ((event: React.WheelEvent) => void) | undefined;
         onTouchMove: ((event: React.TouchEvent) => void) | undefined;
@@ -147,22 +131,19 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
         tabIndex: number | undefined;
       };
       getContentProps: () => {
-        style: React.CSSProperties;
-        role: string;
         ref: (node: HTMLDivElement | null) => void;
-      };
-      getRenderZoneProps: () => {
+        style: React.CSSProperties;
         role: string;
       };
       getScrollbarVerticalProps: () => {
-        ref: React.RefObject<HTMLDivElement | null>;
+        ref: (node: HTMLDivElement | null) => void;
         scrollPosition: React.RefObject<{
           top: number;
           left: number;
         }>;
       };
       getScrollbarHorizontalProps: () => {
-        ref: React.RefObject<HTMLDivElement | null>;
+        ref: (node: HTMLDivElement | null) => void;
         scrollPosition: React.RefObject<{
           top: number;
           left: number;
@@ -178,13 +159,13 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
     useVirtualization: () => BaseState;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
     forceUpdateRenderContext: () => void;
-    getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo;
-    calculateColSpan: (rowId: RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
-    getHiddenCellsOrigin: () => Record<RowId, Record<number, number>>;
+    getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo;
+    calculateColSpan: (rowId: import("./models/index.js").RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("./models/index.js").RowId, Record<number, number>>;
   } & {
     resetColSpan: () => void;
-    getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo | undefined;
-    calculateColSpan: (rowId: RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
+    getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("./models/index.js").RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
   } & {
     getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
   } & {

package/features/colspan.d.ts

@@ -6,6 +6,10 @@ import type { CellColSpanInfo } from "../models/colspan.js";
 import { Virtualization } from "./virtualization.js";
 type ColumnIndex = number;
 type ColspanMap = Map<RowId, Record<ColumnIndex, CellColSpanInfo>>;
+export type ColspanParams = {
+  enabled: boolean;
+  getColspan: (rowId: RowId, column: ColumnWithWidth, columnIndex: integer) => integer;
+};
 export declare const Colspan: {
   initialize: typeof initializeState;
   use: typeof useColspan;

package/features/colspan.js

@@ -20,6 +20,7 @@ function initializeState(_params) {
   };
 }
 function useColspan(store, params, api) {
+  const getColspan = params.colspan?.getColspan;
   const resetColSpan = () => {
     store.state.colspanMap = new Map();
   };
@@ -28,14 +29,14 @@ function useColspan(store, params, api) {
   };
 
   // Calculate `colSpan` for each cell in the row
-  const calculateColSpan = (0, _useEventCallback.default)((rowId, minFirstColumn, maxLastColumn, columns) => {
+  const calculateColSpan = (0, _useEventCallback.default)(getColspan ? (rowId, minFirstColumn, maxLastColumn, columns) => {
     for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
-      const cellProps = calculateCellColSpan(store.state.colspanMap, i, rowId, minFirstColumn, maxLastColumn, columns, params.getColspan);
+      const cellProps = calculateCellColSpan(store.state.colspanMap, i, rowId, minFirstColumn, maxLastColumn, columns, getColspan);
       if (cellProps.colSpan > 1) {
         i += cellProps.colSpan - 1;
       }
     }
-  });
+  } : () => {});
   api.calculateColSpan = calculateColSpan;
   return {
     resetColSpan,