@infinite-table/infinite-react 4.4.1 → 4.4.2-canary.0

package/index.css

@@ -320,15 +320,15 @@
   overflow-y: hidden;
 }
 
-/* vanilla-extract-css-ns:src/components/InfiniteTable/components/ActiveCellIndicator.css.ts.vanilla.css?source=LkFjdGl2ZUNlbGxJbmRpY2F0b3JfQWN0aXZlSW5kaWNhdG9yV3JhcHBlckNsc19fbnhicTFjMCB7CiAgd2lkdGg6IHZhcigtLWFjdGl2ZUNlbGxDb2xXaWR0aF9fMTZoa2JrYzcpOwogIGhlaWdodDogdmFyKC0tYWN0aXZlQ2VsbFJvd0hlaWdodF9fMTZoa2JrYzMpOwp9Ci5BY3RpdmVDZWxsSW5kaWNhdG9yX0FjdGl2ZUNlbGxJbmRpY2F0b3JfX254YnExYzEgewogIC0tYWN0aXZlQ2VsbE9mZnNldFhfXzE2aGtia2M0OiB2YXIoLS1hY3RpdmVDZWxsQ29sT2Zmc2V0X18xNmhrYmtjOCk7CiAgLS1hY3RpdmVDZWxsT2Zmc2V0WV9fMTZoa2JrYzU6IHZhcigtLWFjdGl2ZUNlbGxSb3dPZmZzZXRfXzE2aGtia2MyKTsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKHZhcigtLWFjdGl2ZUNlbGxPZmZzZXRYX18xNmhrYmtjNCksIHZhcigtLWFjdGl2ZUNlbGxPZmZzZXRZX18xNmhrYmtjNSksIDBweCk7CiAgaW5zZXQ6IHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWluZGljYXRvci1pbnNldCk7CiAgYm9yZGVyOiB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXIsIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci13aWR0aCkgdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYm9yZGVyLXN0eWxlKSB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItY29sb3IsIHZhcigtLWluZmluaXRlLWFjY2VudC1jb2xvcikpKTsKICBiYWNrZ3JvdW5kOiB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1iYWNrZ3JvdW5kLWRlZmF1bHQpOwp9Ci5BY3RpdmVDZWxsSW5kaWNhdG9yX0FjdGl2ZUNlbGxJbmRpY2F0b3JDbHNfdmlzaWJsZV9fbnhicTFjMiB7CiAgZGlzcGxheTogYmxvY2s7Cn0KLkFjdGl2ZUNlbGxJbmRpY2F0b3JfQWN0aXZlQ2VsbEluZGljYXRvckNsc19oaWRkZW5fX254YnExYzMgewogIGRpc3BsYXk6IG5vbmU7Cn0= */
+/* vanilla-extract-css-ns:src/components/InfiniteTable/components/ActiveCellIndicator.css.ts.vanilla.css?source=LkFjdGl2ZUNlbGxJbmRpY2F0b3JfQWN0aXZlSW5kaWNhdG9yV3JhcHBlckNsc19fbnhicTFjMCB7CiAgd2lkdGg6IHZhcigtLWFjdGl2ZUNlbGxDb2xXaWR0aF9fMTZoa2JrYzkpOwogIGhlaWdodDogdmFyKC0tYWN0aXZlQ2VsbFJvd0hlaWdodF9fMTZoa2JrYzQpOwp9Ci5BY3RpdmVDZWxsSW5kaWNhdG9yX0FjdGl2ZUNlbGxJbmRpY2F0b3JfX254YnExYzEgewogIC0tYWN0aXZlQ2VsbE9mZnNldFhfXzE2aGtia2M1OiB2YXIoLS1hY3RpdmVDZWxsQ29sT2Zmc2V0X18xNmhrYmtjYSk7CiAgLS1hY3RpdmVDZWxsT2Zmc2V0WV9fMTZoa2JrYzY6IHZhcigtLWFjdGl2ZUNlbGxSb3dPZmZzZXRfXzE2aGtia2MyKTsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKHZhcigtLWFjdGl2ZUNlbGxPZmZzZXRYX18xNmhrYmtjNSksIHZhcigtLWFjdGl2ZUNlbGxPZmZzZXRZX18xNmhrYmtjNiksIDBweCk7CiAgaW5zZXQ6IHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWluZGljYXRvci1pbnNldCk7CiAgYm9yZGVyOiB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXIsIHZhcigtLWluZmluaXRlLWFjdGl2ZS1jZWxsLWJvcmRlci13aWR0aCkgdmFyKC0taW5maW5pdGUtYWN0aXZlLWNlbGwtYm9yZGVyLXN0eWxlKSB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1ib3JkZXItY29sb3IsIHZhcigtLWluZmluaXRlLWFjY2VudC1jb2xvcikpKTsKICBiYWNrZ3JvdW5kOiB2YXIoLS1pbmZpbml0ZS1hY3RpdmUtY2VsbC1iYWNrZ3JvdW5kLWRlZmF1bHQpOwp9Ci5BY3RpdmVDZWxsSW5kaWNhdG9yX0FjdGl2ZUNlbGxJbmRpY2F0b3JDbHNfdmlzaWJsZV9fbnhicTFjMiB7CiAgZGlzcGxheTogYmxvY2s7Cn0KLkFjdGl2ZUNlbGxJbmRpY2F0b3JfQWN0aXZlQ2VsbEluZGljYXRvckNsc19oaWRkZW5fX254YnExYzMgewogIGRpc3BsYXk6IG5vbmU7Cn0= */
 .ActiveCellIndicator_ActiveIndicatorWrapperCls__nxbq1c0 {
-  width: var(--activeCellColWidth__16hkbkc7);
-  height: var(--activeCellRowHeight__16hkbkc3);
+  width: var(--activeCellColWidth__16hkbkc9);
+  height: var(--activeCellRowHeight__16hkbkc4);
 }
 .ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 {
-  --activeCellOffsetX__16hkbkc4: var(--activeCellColOffset__16hkbkc8);
-  --activeCellOffsetY__16hkbkc5: var(--activeCellRowOffset__16hkbkc2);
-  transform: translate3d(var(--activeCellOffsetX__16hkbkc4), var(--activeCellOffsetY__16hkbkc5), 0px);
+  --activeCellOffsetX__16hkbkc5: var(--activeCellColOffset__16hkbkca);
+  --activeCellOffsetY__16hkbkc6: var(--activeCellRowOffset__16hkbkc2);
+  transform: translate3d(var(--activeCellOffsetX__16hkbkc5), var(--activeCellOffsetY__16hkbkc6), 0px);
   inset: var(--infinite-active-cell-indicator-inset);
   border: var(--infinite-active-cell-border, var(--infinite-active-cell-border-width) var(--infinite-active-cell-border-style) var(--infinite-active-cell-border-color, var(--infinite-accent-color)));
   background: var(--infinite-active-cell-background-default);
@@ -340,17 +340,17 @@
   display: none;
 }
 
-/* vanilla-extract-css-ns:src/components/InfiniteTable/components/ActiveRowIndicator.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62TzW7CMBCE73mKvVSKK4yAQw9wQj312heI/FeyZbGjtSGgineviEUFagOpxNX+PLMz1o6XJuHOvYf2zVs0KgWu/jiqPmcvxPsJfBUAUqL/QI/JSdWhkkMrdWDrWMZ0IDeHneLyPjfq4YwjugKFWBQAjKs6/dLmrU+4cVJzaOPpgeFApBXLFm2qu5dZ6/5YfQNdDN6JDhk8u4vHV3Ff0QQKvVkuFftA43zKl0Lk7rUy6xWHrbc3W/yhbrtfYJ2L3OC+RA+RV3rAHzw23wgSKx8bxc4nMIpMOZ1MnkAOCioVNbUaGDfDQsAznCxyucdiPGgLXylWO4yoyZ0XctotpMXYkDrMQVMw6/8J1mit82e92bWeD94tiuM3HNfm3SUEAAA= */
+/* vanilla-extract-css-ns:src/components/InfiniteTable/components/ActiveRowIndicator.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62TwWrDMAyG73kKXQbxqEvWwQ7pacdd+wJBsd1Eq2cHxW1aRt99NGYlhaUJozdjffy/fgkt31Wgg9n47sNpUhg8F398FZ+rN8vHDL4TACnJbclRMBJ7VLLvZOlZG5ZtOFmTwwE5neYWI5wy1t6AQqwTAKaqDjlkl3esThuNWQxa6UiHek4rPSjE48NNKypv/WiWoeIYqIwLsShEnGaJalex3zt9d4pX6r77AOtd5BcdU3LQclXO2MFj8y0gMLq2QTYugEKr0pcsewI5K6hE29Q4M26EhYBnuFjE4Z6T5ay72hhFjSmichF4b34vbdVfmqa2sXjKobRe7f6ru0XbXoVfb4Wdd2adnH8AzVggHQcEAAA= */
 .ActiveRowIndicator_ActiveRowIndicator__j26lrx0 {
   --infinite-active-row-border-style: var(--infinite-active-row-border-style, var(--infinite-active-cell-border-style));
-  right: var(--infinite-runtime-browser-scrollbar-width);
+  right: 0;
   border: var(--infinite-active-row-border, var(--infinite-active-row-border-width, var(--infinite-active-cell-border-width)) var(--infinite-active-row-border-style, var(--infinite-active-cell-border-style)) var(--infinite-active-row-border-color, var(--infinite-active-cell-border-color, var(--infinite-accent-color))));
   background: var(--infinite-active-row-background, var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-active-row-border-color, var(--infinite-active-cell-border-color, var(--infinite-accent-color))), transparent calc(100% - var(--infinite-active-row-background-alpha, var(--infinite-active-cell-background-alpha)) * 100%))));
 }
-.ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 {
+.ActiveRowIndicator_ActiveRowIndicatorRecipe_active_true__j26lrx2 {
   display: block;
 }
-.ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 {
+.ActiveRowIndicator_ActiveRowIndicatorRecipe_active_false__j26lrx3 {
   display: none;
 }
 

package/index.d.ts

@@ -118,7 +118,82 @@ declare class DeepMap<KeyType, ValueType> {
 
 declare type VoidFn = () => void;
 
+declare type TableRenderRange = {
+    start: [number, number];
+    end: [number, number];
+    rowFixed?: FixedPosition;
+    colFixed?: FixedPosition;
+};
 declare type FixedPosition = false | 'start' | 'end';
+declare type WhichDirection = {
+    horizontal?: boolean;
+    vertical?: boolean;
+};
+declare type ItemSizeFunction = (index: number) => number;
+interface IBrain {
+    getColCount: () => number;
+    getRowCount: () => number;
+    getFixedCellInfo: () => {
+        fixedRowsStart: number;
+        fixedColsStart: number;
+        fixedRowsEnd: number;
+        fixedColsEnd: number;
+    };
+    getRowspanParent: (rowIndex: number, colIndex: number) => number;
+    getColspanParent: (rowIndex: number, colIndex: number) => number;
+    getRowHeight: (rowIndex: number) => number;
+    getColWidth: (colIndex: number) => number;
+    getRowHeightWithSpan: (rowIndex: number, colIndex: number, rowspan: number) => number;
+    getColWidthWithSpan: (rowIndex: number, colIndex: number, colspan: number) => number;
+    isRowFixedStart: (rowIndex: number) => boolean;
+    isRowFixedEnd: (rowIndex: number) => boolean;
+    getScrollPosition: () => ScrollPosition;
+    getItemOffsetFor: (itemIndex: number, direction: 'horizontal' | 'vertical') => number;
+    getItemSize: (itemIndex: number, direction: 'horizontal' | 'vertical') => number;
+    getItemAt: (scrollPos: number, direction: 'horizontal' | 'vertical') => number;
+    getAvailableSize: () => Size;
+    getFixedStartRowsHeight: () => number;
+    getFixedEndRowsHeight: (options?: {
+        skipScroll: boolean;
+    }) => number;
+    getFixedStartColsWidth: () => number;
+    getFixedEndColsWidth: (options?: {
+        skipScroll: boolean;
+    }) => number;
+    getFixedEndColsOffsets: (options?: {
+        skipScroll: boolean;
+    }) => number[];
+    getFixedEndRowsOffsets: (options?: {
+        skipScroll: boolean;
+    }) => number[];
+    isRowFixed: (rowIndex: number) => boolean;
+    isColFixed: (colIndex: number) => boolean;
+    getRenderRange: () => TableRenderRange;
+    getExtraSpanCellsForRange: (options: {
+        horizontal: {
+            startIndex: number;
+            endIndex: number;
+        };
+        vertical: {
+            startIndex: number;
+            endIndex: number;
+        };
+    }) => [number, number][];
+    getRowspan: (rowIndex: number, colIndex: number) => number;
+    getColspan: (rowIndex: number, colIndex: number) => number;
+    getCellOffset: (rowIndex: number, colIndex: number) => {
+        x: number;
+        y: number;
+    };
+    name: string;
+    onRenderRangeChange: (fn: (renderRange: TableRenderRange) => void) => VoidFunction;
+    onScroll: (fn: OnScrollFn) => VoidFunction;
+    onAvailableSizeChange: (fn: (size: Size) => void) => VoidFunction;
+    onDestroy: (fn: VoidFunction) => void;
+    onScrollStart: (fn: VoidFunction) => VoidFunction;
+    onScrollStop: (fn: (scrollPos: ScrollPosition) => void) => VoidFunction;
+}
+
 declare type SpanFunction = ({ rowIndex, colIndex, }: {
     rowIndex: number;
     colIndex: number;
@@ -127,7 +202,6 @@ declare type RenderRangeType = {
     startIndex: number;
     endIndex: number;
 };
-declare type ItemSizeFunction = (index: number) => number;
 declare type MatrixBrainOptions = {
     width: number;
     height: number;
@@ -138,16 +212,7 @@ declare type MatrixBrainOptions = {
     rowspan?: SpanFunction;
     colspan?: SpanFunction;
 };
-declare type TableRenderRange = {
-    start: [number, number];
-    end: [number, number];
-    rowFixed?: FixedPosition;
-    colFixed?: FixedPosition;
-};
-declare type WhichDirection = {
-    horizontal?: boolean;
-    vertical?: boolean;
-};
+
 declare type FnOnRenderRangeChange = (range: TableRenderRange) => void;
 declare type FnOnDirectionalRenderRangeChange = (range: [number, number]) => void;
 declare type FnOnRenderCountChange = ({ horizontal, vertical, }: {
@@ -155,39 +220,61 @@ declare type FnOnRenderCountChange = ({ horizontal, vertical, }: {
     vertical: number;
 }) => void;
 declare type OnAvailableSizeChange = (size: Size) => void;
-declare class MatrixBrain extends Logger {
+declare type ShouldUpdateRenderCountOptions = {
+    horizontalChange: boolean;
+    colsChanged: boolean;
+    colWidthChanged: boolean;
+    widthChanged: boolean;
+    colspanChanged: boolean;
+    verticalChange: boolean;
+    rowsChanged: boolean;
+    rowHeightChanged: boolean;
+    heightChanged: boolean;
+    rowspanChanged: boolean;
+};
+declare class MatrixBrain extends Logger implements IBrain {
     private scrolling;
-    private width;
+    protected availableWidth: MatrixBrainOptions['width'];
+    protected availableRenderWidth: number;
+    isHorizontalLayoutBrain: boolean;
     name: string;
-    private height;
-    private cols;
-    private rows;
-    private rowHeight;
-    private colWidth;
+    protected availableHeight: MatrixBrainOptions['height'];
+    protected availableRenderHeight: number;
+    protected cols: MatrixBrainOptions['cols'];
+    protected rows: MatrixBrainOptions['rows'];
+    /**
+     * This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
+     * In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
+     */
+    set rowsPerPage(rowsPerPage: number);
+    get rowsPerPage(): number;
+    protected _rowsPerPage: number;
+    protected rowHeight: MatrixBrainOptions['rowHeight'];
+    protected colWidth: MatrixBrainOptions['colWidth'];
     private rowspan;
     private colspan;
     private rowspanParent;
     private rowspanValue;
-    private rowHeightCache;
-    private rowOffsetCache;
+    protected rowHeightCache: number[];
+    protected rowOffsetCache: number[];
     private verticalTotalSize;
     private colspanParent;
     private colspanValue;
-    private colWidthCache;
-    private colOffsetCache;
+    protected colWidthCache: number[];
+    protected colOffsetCache: number[];
     private horizontalTotalSize;
     private horizontalRenderCount?;
     private verticalRenderCount?;
-    private horizontalRenderRange;
-    private verticalRenderRange;
-    private extraSpanCells;
+    protected horizontalRenderRange: RenderRangeType;
+    protected verticalRenderRange: RenderRangeType;
+    protected extraSpanCells: [number, number][];
     private scrollPosition;
     private onScrollFns;
     private onRenderRangeChangeFns;
     private onVerticalRenderRangeChangeFns;
     private onHorizontalRenderRangeChangeFns;
     private onDestroyFns;
-    private destroyed;
+    protected destroyed: boolean;
     private onRenderCountChangeFns;
     private onAvailableSizeChangeFns;
     private onScrollStartFns;
@@ -210,37 +297,38 @@ declare class MatrixBrain extends Logger {
      * Number of rows that are fixed at the end
      */
     private fixedRowsEnd;
-    constructor(name?: string);
+    constructor(name: string);
     private reset;
     private resetVertical;
     private resetHorizontal;
     setScrollStopDelay: (scrollStopDelay: number) => void;
+    getVirtualColIndex(colIndex: number, _opts?: {
+        pageIndex: number;
+    }): number;
     getRowCount: () => number;
     getColCount: () => number;
-    update: (options: Partial<MatrixBrainOptions>) => void;
-    setRowAndColumnSizes({ rowHeight, colWidth, }: {
-        rowHeight: number | ItemSizeFunction;
-        colWidth: number | ItemSizeFunction;
-    }): void;
-    setRowsAndCols: ({ rows, cols }: {
-        rows: number;
-        cols: number;
-    }) => void;
-    setAvailableSize(size: Partial<Size>, config?: {
-        skipUpdateRenderCount?: boolean;
-    }): void;
-    updateRenderCount: (which?: WhichDirection) => void;
-    private doUpdateRenderCount;
+    update(options: Partial<MatrixBrainOptions>, shouldUpdateRenderCount?: (options: ShouldUpdateRenderCountOptions) => boolean): void;
+    /**
+     *
+     * @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
+     * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
+     */
+    extendRenderRange(options: {
+        left?: number | boolean;
+        right?: number | boolean;
+    }): () => void;
+    updateRenderCount(which?: WhichDirection): void;
+    protected doUpdateRenderCount(which?: WhichDirection): void;
     get scrollTopMax(): number;
     get scrollLeftMax(): number;
     private setScrolling;
     private notifyScrollStart;
     private notifyScrollStop;
-    setScrollPosition: (scrollPosition: ScrollPosition, callback?: ((scrollPos: ScrollPosition) => void) | undefined) => void;
-    private notifyAvailableSizeChange;
-    private notifyRenderRangeChange;
-    private notifyVerticalRenderRangeChange;
-    private notifyHorizontalRenderRangeChange;
+    setScrollPosition(scrollPosition: ScrollPosition, callback?: (scrollPos: ScrollPosition) => void): void;
+    protected notifyAvailableSizeChange: () => void;
+    protected notifyRenderRangeChange(): void;
+    protected notifyVerticalRenderRangeChange: () => void;
+    protected notifyHorizontalRenderRangeChange: () => void;
     private notifyScrollChange;
     private computeDirectionalRenderCount;
     getFixedSize(direction: 'horizontal' | 'vertical'): number;
@@ -318,12 +406,15 @@ declare class MatrixBrain extends Logger {
         endIndex: number;
     };
     getItemAt: (scrollPos: number, direction: 'horizontal' | 'vertical') => number;
-    getCellOffset: (rowIndex: number, colIndex: number) => {
+    getCellOffset(rowIndex: number, colIndex: number): {
         x: number;
         y: number;
     };
-    getItemOffsetFor: (itemIndex: number, direction: 'horizontal' | 'vertical') => number;
-    private computeCacheFor;
+    getInitialRowHeight(): number | ItemSizeFunction;
+    getInitialCols(): number;
+    getInitialRows(): number;
+    getItemOffsetFor(itemIndex: number, direction: 'horizontal' | 'vertical'): number;
+    protected computeCacheFor: (itemIndex: number, direction: 'horizontal' | 'vertical') => void;
     private getItemSizeCacheFor;
     private computeItemSpanUpTo;
     private getCellSpan;
@@ -343,11 +434,13 @@ declare class MatrixBrain extends Logger {
      * @returns the size of the specified item
      */
     getItemSize: (itemIndex: number, direction: 'horizontal' | 'vertical') => number;
-    getTotalSize: () => {
+    getRowIndexInPage(rowIndex: number): number;
+    getPageIndexForRow(_rowIndex: number): number;
+    getVirtualizedContentSize(): {
         height: number;
         width: number;
     };
-    getTotalSizeFor: (direction: 'horizontal' | 'vertical') => number;
+    getVirtualizedContentSizeFor(direction: 'horizontal' | 'vertical'): number;
     setRenderRange: ({ horizontal, vertical, extraCells, }: {
         horizontal: RenderRangeType;
         vertical: RenderRangeType;
@@ -373,8 +466,12 @@ declare class MatrixBrain extends Logger {
         width: number;
         height: number;
     };
+    protected getAvailableRenderSize: () => {
+        width: number;
+        height: number;
+    };
     private notifyDestroy;
-    destroy: () => void;
+    destroy(): void;
 }
 
 declare enum InfiniteTableActionType {
@@ -397,6 +494,7 @@ declare type InfiniteTableAction = {
 declare type InfiniteTableBaseCellProps<T> = {
     column: InfiniteTableComputedColumn<T>;
     align?: InfiniteTableColumnAlignValues;
+    horizontalLayoutPageIndex: number | null;
     rowId?: any;
     renderChildren: () => Renderable;
     width: number;
@@ -489,6 +587,7 @@ declare type InfiniteTableColumnHeaderParam<DATA_TYPE, COL_TYPE = InfiniteTableC
     columnSortInfo: DataSourceSingleSortInfo<DATA_TYPE> | null;
     columnFilterValue: DataSourceFilterValueItem<DATA_TYPE> | null;
     selectionMode: DataSourcePropSelectionMode;
+    horizontalLayoutPageIndex: null | number;
     allRowsSelected: boolean;
     someRowsSelected: boolean;
     filtered: boolean;
@@ -518,6 +617,9 @@ declare type InfiniteTableColumnRenderBag = {
 };
 declare type InfiniteTableColumnRenderParamBase<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = {
     domRef: InfiniteTableCellProps<DATA_TYPE>['domRef'];
+    htmlElementRef: React__default.MutableRefObject<HTMLElement | null>;
+    rowIndexInHorizontalLayoutPage: null | number;
+    horizontalLayoutPageIndex: null | number;
     value: string | number | Renderable;
     align: InfiniteTableColumnAlignValues;
     verticalAlign: InfiniteTableColumnVerticalAlignValues;
@@ -569,6 +671,11 @@ declare type InfiniteTableColumnRenderFunctionForNormalRows<DATA_TYPE, COL_TYPE
 }) => Renderable | null;
 declare type InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = (renderParams: InfiniteTableColumnCellContextType<DATA_TYPE, COL_TYPE>) => Renderable | null;
 declare type InfiniteTableColumnHeaderRenderFunction<T> = (headerParams: InfiniteTableColumnHeaderParam<T>) => Renderable;
+declare type InfiniteTableColumnOrHeaderRenderFunction<T> = (params: (InfiniteTableColumnCellContextType<T> & {
+    rowInfo: InfiniteTableRowInfo<T>;
+}) | (InfiniteTableColumnHeaderParam<T> & {
+    rowInfo: null;
+})) => ReturnType<InfiniteTableColumnRenderFunction<T>>;
 declare type InfiniteTableColumnContentFocusable<T> = boolean | InfiniteTableColumnContentFocusableFn<T>;
 declare type InfiniteTableColumnEditable<T> = boolean | InfiniteTableColumnEditableFn<T>;
 declare type InfiniteTableColumnContentFocusableFn<T> = (params: InfiniteTableColumnContentFocusableParams<T>) => boolean;
@@ -586,6 +693,8 @@ declare type InfiniteTableColumnTypeNames = 'string' | 'number' | 'date' | strin
 declare type InfiniteTableColumnStylingFnParams<T> = {
     value: Renderable;
     column: InfiniteTableComputedColumn<T>;
+    rowIndexInHorizontalLayoutPage: null | number;
+    horizontalLayoutPageIndex: null | number;
     inEdit: boolean;
     rowHasSelectedCells: boolean;
     editError: InfiniteTableColumnRenderParamBase<T>['editError'];
@@ -681,7 +790,7 @@ declare type InfiniteTableColumn<DATA_TYPE> = {
     renderRowDetailIcon?: boolean | InfiniteTableColumnRenderFunction<DATA_TYPE>;
     renderSortIcon?: InfiniteTableColumnHeaderRenderFunction<DATA_TYPE>;
     renderFilterIcon?: InfiniteTableColumnHeaderRenderFunction<DATA_TYPE>;
-    renderSelectionCheckBox?: boolean | InfiniteTableColumnRenderFunction<DATA_TYPE>;
+    renderSelectionCheckBox?: boolean | InfiniteTableColumnOrHeaderRenderFunction<DATA_TYPE>;
     renderMenuIcon?: boolean | InfiniteTableColumnHeaderRenderFunction<DATA_TYPE>;
     renderHeaderSelectionCheckBox?: boolean | InfiniteTableColumnHeaderRenderFunction<DATA_TYPE>;
     components?: {
@@ -1169,6 +1278,85 @@ declare class RowDetailState<KeyType = any> extends BooleanCollectionState<RowDe
     toggleRowDetails(key: KeyType): void;
 }
 
+declare type SubscriptionCallbackOnChangeFn<T> = (node: T | null) => void;
+interface SubscriptionCallback<T> {
+    (node: T, callback?: () => void): void;
+    get: () => T | null;
+    destroy: VoidFn;
+    onChange: (fn: SubscriptionCallbackOnChangeFn<T>) => VoidFn;
+}
+
+/**
+ * This class abstracts the following behavior:
+ *
+ * in the DOM, we have a list (flat, so no nesting) of elements that represent table cells
+ * At any one time, just a fraction of all table cells are rendered/present in the DOM
+ * and we need to keep track and know for each element what cell represents and for each
+ * rendered cell, to what element it is currently mapped (so we need a bi-directional mapping)
+ *
+ * This class has tests - see tests/mapped-cells.spec.ts
+ */
+declare class MappedCells<T_ADDITIONAL_CELL_INFO = any> extends Logger {
+    /**
+     * This is the mapping from element index to cell info.
+     * The index in the array is the element index while the value at the position is an array where
+     * the first number is the row index and the second number is the column index.
+     */
+    private elementIndexToCell;
+    /**
+     * This is the mapping from cell address to element index.
+     * The key in the map is the cell address (built like this: `${rowIndex}:${columnIndex}`)
+     * while the value is the element index it is being rendered to.
+     */
+    private cellToElementIndex;
+    private cellAdditionalInfo;
+    /**
+     * Keeps the JSX of rendered elements in memory, so we can possibly reuse it later.
+     */
+    private renderedElements;
+    private withCellAdditionalInfo;
+    constructor(opts?: {
+        withCellAdditionalInfo: boolean;
+    });
+    getElementFromListForColumn: (elementsOutsideItemRange: number[], colIndex: number) => number | undefined;
+    init(): void;
+    reset(): void;
+    destroy(): void;
+    /**
+     * Retrieves the elements that contain rendered cells that are outside
+     * of the specified range
+     *
+     * @param start in [rowIndex, colIndex] format - represents the topmost-leftmost cell visible of the render range
+     * @param end in [rowIndex, colIndex] format - represents the bottom-right corner of the visible range. The end is not inclusive,
+     * so the last visible cell will be [rowIndex-1, colIndex-1]
+     *
+     * @returns an array of element indexes that are outside the specified range
+     */
+    getElementsOutsideRenderRange: (range: TableRenderRange) => number[];
+    isCellRendered: (rowIndex: number, columnIndex: number) => boolean;
+    getCellAdditionalInfo: (rowIndex: number, columnIndex: number) => T_ADDITIONAL_CELL_INFO | undefined;
+    isElementRendered: (elementIndex: number) => boolean;
+    getElementsForRowIndex: (rowIndex: number) => number[];
+    getAdditionalInfoForRowIndex: (rowIndex: number) => T_ADDITIONAL_CELL_INFO[];
+    getRenderedNodeAtElement: (elementIndex: number) => Renderable | null;
+    getRenderedCellAtElement: (elementIndex: number) => [
+        number,
+        number
+    ] | null;
+    getRenderedNodeForCell: (rowIndex: number, columnIndex: number) => Renderable | null;
+    getElementIndexForCell: (rowIndex: number, columnIndex: number) => number | null;
+    renderCellAtElement: (rowIndex: number, colIndex: number, elementIndex: number, renderNode: Renderable | undefined, cellAdditionalInfo?: T_ADDITIONAL_CELL_INFO | undefined) => void;
+    discardCell: (rowIndex: number, colIndex: number) => void;
+    discardElement: (elementIndex: number) => [
+        number,
+        number
+    ] | null;
+    discardElementsStartingWith: (elIndex: number, callback?: ((index: number, cell: [
+        number,
+        number
+    ] | null) => void) | undefined) => boolean;
+}
+
 declare type TableRenderCellFnParam = {
     domRef: RefCallback<HTMLElement>;
     rowIndex: number;
@@ -1196,19 +1384,25 @@ declare type TableRenderDetailRowFnParam = {
 };
 declare type TableRenderCellFn = (param: TableRenderCellFnParam) => Renderable;
 declare type TableRenderDetailRowFn = (param: TableRenderDetailRowFnParam) => Renderable;
+declare type HorizontalLayoutColVisibilityOptions = {
+    horizontalLayoutPageIndex?: number;
+};
 declare class ReactHeadlessTableRenderer extends Logger {
-    private brain;
+    protected brain: MatrixBrain;
     debugId: string;
-    private destroyed;
+    protected destroyed: boolean;
     private scrolling;
     cellHoverClassNames: string[];
     private itemDOMElements;
-    private itemDOMRefs;
-    private updaters;
+    protected itemDOMRefs: RefCallback<HTMLElement>[];
+    protected updaters: SubscriptionCallback<Renderable>[];
     private detailRowDOMElements;
     private detailRowDOMRefs;
     private detailRowUpdaters;
-    private mappedCells;
+    protected mappedCells: MappedCells<{
+        renderRowIndex: number;
+        renderColIndex: number;
+    }>;
     private mappedDetailRows;
     private items;
     private detailItems;
@@ -1228,7 +1422,7 @@ declare class ReactHeadlessTableRenderer extends Logger {
         scrollLeft?: boolean | undefined;
         scrollTop?: boolean | undefined;
     }, zIndex: number | 'auto' | undefined | null) => void;
-    constructor(brain: MatrixBrain);
+    constructor(brain: MatrixBrain, debugId?: string);
     getFullyVisibleRowsRange: () => {
         start: number;
         end: number;
@@ -1236,11 +1430,12 @@ declare class ReactHeadlessTableRenderer extends Logger {
     getScrollPositionForScrollRowIntoView: (rowIndex: number, config?: {
         scrollAdjustPosition?: ScrollAdjustPosition;
         offset?: number;
+        colIndex?: number;
     }) => ScrollPosition | null;
     getScrollPositionForScrollColumnIntoView: (colIndex: number, config?: {
         scrollAdjustPosition?: ScrollAdjustPosition;
         offset?: number;
-    }) => ScrollPosition | null;
+    } & HorizontalLayoutColVisibilityOptions) => ScrollPosition | null;
     getScrollPositionForScrollCellIntoView: (rowIndex: number, colIndex: number, config?: {
         rowScrollAdjustPosition?: ScrollAdjustPosition;
         colScrollAdjustPosition?: ScrollAdjustPosition;
@@ -1252,31 +1447,46 @@ declare class ReactHeadlessTableRenderer extends Logger {
     isRowVisible: (rowIndex: number, offsetMargin?: number) => boolean;
     isRowRendered: (rowIndex: number) => boolean;
     isCellVisible: (rowIndex: number, colIndex: number) => boolean;
-    isCellFullyVisible: (rowIndex: number, colIndex: number) => boolean;
-    isColumnFullyVisible: (colIndex: number, offsetMargin?: number) => boolean;
-    isColumnVisible: (colIndex: number, offsetMargin?: number) => boolean;
-    isCellRendered: (rowIndex: number, colIndex: number) => boolean;
-    isColumnRendered: (colIndex: number) => boolean;
+    isCellFullyVisible: (rowIndex: number, colIndex: number, opts?: HorizontalLayoutColVisibilityOptions | undefined) => boolean;
+    isColumnFullyVisible: (colIndex: number, offsetMargin?: number, opts?: HorizontalLayoutColVisibilityOptions | undefined) => boolean;
+    isColumnVisible: (colIndex: number, offsetMargin?: number, opts?: HorizontalLayoutColVisibilityOptions | undefined) => boolean;
+    isCellRendered: (rowIndex: number, colIndex: number, opts?: HorizontalLayoutColVisibilityOptions | undefined) => boolean;
+    isColumnRendered: (colIndex: number, opts?: HorizontalLayoutColVisibilityOptions | undefined) => boolean;
     getExtraSpanCellsForRange: (range: TableRenderRange) => [number, number][];
-    renderRange: (range: TableRenderRange, { renderCell, renderDetailRow, force, onRender, }: {
-        force?: boolean | undefined;
+    isCellRenderedAndMappedCorrectly(row: number, col: number): {
+        rendered: boolean;
+        mapped: boolean;
+    };
+    renderRange(range: TableRenderRange, { renderCell, renderDetailRow, force, onRender, }: {
+        force?: boolean;
         renderCell: TableRenderCellFn;
-        renderDetailRow?: TableRenderDetailRowFn | undefined;
+        renderDetailRow?: TableRenderDetailRowFn;
         onRender: (items: Renderable[]) => void;
-    }) => Renderable[];
+    }): Renderable[];
     private renderElement;
     private renderDetailElement;
     getFixedRanges: (currentRenderRange: TableRenderRange) => TableRenderRange[];
-    private isCellFixed;
-    private isCellCovered;
+    protected isCellFixed: (rowIndex: number, colIndex: number) => {
+        row: FixedPosition;
+        col: FixedPosition;
+    };
+    protected isCellCovered: (rowIndex: number, colIndex: number) => false | number[];
     private renderDetailRowAtElement;
-    private renderCellAtElement;
-    private onMouseEnter;
+    protected getCellRealCoordinates(rowIndex: number, colIndex: number): {
+        rowIndex: number;
+        colIndex: number;
+    };
+    protected renderCellAtElement(rowIndex: number, colIndex: number, elementIndex: number, renderCell: TableRenderCellFn): void;
+    protected onMouseEnter: (rowIndex: number) => void;
     private addHoverClass;
-    private onMouseLeave;
+    protected onMouseLeave: (rowIndex: number) => void;
     private removeHoverClass;
-    private updateHoverClassNamesForRow;
-    private updateElementPosition;
+    protected updateHoverClassNamesForRow: (rowIndex: number) => void;
+    protected updateElementPosition: (elementIndex: number, options?: {
+        hidden: boolean;
+        rowspan: number;
+        colspan: number;
+    } | undefined) => void;
     private updateDetailElementPosition;
     private onScrollStart;
     private onScrollStop;
@@ -1285,14 +1495,6 @@ declare class ReactHeadlessTableRenderer extends Logger {
     reset(): void;
 }
 
-declare type SubscriptionCallbackOnChangeFn<T> = (node: T | null) => void;
-interface SubscriptionCallback<T> {
-    (node: T, callback?: () => void): void;
-    get: () => T | null;
-    destroy: VoidFn;
-    onChange: (fn: SubscriptionCallbackOnChangeFn<T>) => VoidFn;
-}
-
 declare class ScrollListener {
     private scrollPosition;
     private onScrollFns;
@@ -1318,11 +1520,13 @@ declare type ContextMenuLocationWithEvent = Partial<CellContextMenuLocation> & {
     target: HTMLElement;
 };
 interface InfiniteTableSetupState<T> {
+    brain: MatrixBrain;
+    headerBrain: MatrixBrain;
     renderer: ReactHeadlessTableRenderer;
+    onRenderUpdater: SubscriptionCallback<Renderable>;
     lastRowToExpandRef: MutableRefObject<any | null>;
     lastRowToCollapseRef: MutableRefObject<any | null>;
     getDOMNodeForCell: (cellPos: CellPositionByIndex) => HTMLElement | null;
-    onRenderUpdater: SubscriptionCallback<Renderable>;
     propsCache: Map<keyof InfiniteTableProps<T>, WeakMap<any, any>>;
     columnsWhenInlineGroupRenderStrategy?: Record<string, InfiniteTableColumn<T>>;
     domRef: MutableRefObject<HTMLDivElement | null>;
@@ -1361,8 +1565,6 @@ interface InfiniteTableSetupState<T> {
     keyDown: SubscriptionCallback<KeyboardEvent>;
     columnsWhenGrouping?: InfiniteTablePropColumns<T>;
     bodySize: Size;
-    brain: MatrixBrain;
-    headerBrain: MatrixBrain;
     focused: boolean;
     ready: boolean;
     columnReorderDragColumnId: false | string;
@@ -1406,6 +1608,7 @@ interface InfiniteTableMappedState<T> {
     groupColumn: InfiniteTableProps<T>['groupColumn'];
     onKeyDown: InfiniteTableProps<T>['onKeyDown'];
     onCellClick: InfiniteTableProps<T>['onCellClick'];
+    wrapRowsHorizontally: InfiniteTableProps<T>['wrapRowsHorizontally'];
     rowDetailCache: RowDetailCache<RowDetailCacheKey, RowDetailCacheEntry>;
     headerOptions: NonUndefined<InfiniteTableProps<T>['headerOptions']>;
     draggableColumnsRestrictTo: NonUndefined<InfiniteTableProps<T>['draggableColumnsRestrictTo']>;
@@ -2255,6 +2458,7 @@ declare function useInfiniteHeaderCell<T>(): {
     columnSortInfo: DataSourceSingleSortInfo<T> | null;
     columnFilterValue: DataSourceFilterValueItem<T> | null;
     selectionMode: DataSourcePropSelectionMode;
+    horizontalLayoutPageIndex: number | null;
     allRowsSelected: boolean;
     someRowsSelected: boolean;
     filtered: boolean;
@@ -5082,11 +5286,14 @@ declare type InfiniteTablePropColumnGroups = Record<string, InfiniteTableColumnG
 declare type InfiniteTablePropCollapsedColumnGroups = Map<string[], string>;
 declare type InfiniteTableColumnGroupHeaderRenderParams = {
     columnGroup: InfiniteTableComputedColumnGroup;
+    horizontalLayoutPageIndex: number | null;
 };
 declare type InfiniteTableColumnGroupHeaderRenderFunction = (params: InfiniteTableColumnGroupHeaderRenderParams) => Renderable;
+declare type InfiniteTableColumnGroupStyleFunction = (params: InfiniteTableColumnGroupHeaderRenderParams) => React$1.CSSProperties;
 declare type InfiniteTableColumnGroup = {
     columnGroup?: string;
     header?: Renderable | InfiniteTableColumnGroupHeaderRenderFunction;
+    style?: React$1.CSSProperties | InfiniteTableColumnGroupStyleFunction;
 };
 declare type InfiniteTableComputedColumnGroup = InfiniteTableColumnGroup & {
     id: string;
@@ -5181,6 +5388,7 @@ interface InfiniteTableProps<T> {
     children?: React$1.JSX.Element | React$1.JSX.Element[] | React$1.ReactNode;
     loadingText?: Renderable;
     components?: InfiniteTablePropComponents<T>;
+    wrapRowsHorizontally?: boolean;
     keyboardShortcuts?: InfiniteTablePropKeyboardShorcut[];
     viewportReservedWidth?: number;
     onViewportReservedWidthChange?: (viewportReservedWidth: number) => void;