beautiful-grid 1.0.2 → 1.0.4

package/cjs/components/Table.js

@@ -164,11 +164,11 @@ var LazyGridOptionalSurfaces = React.lazy(function () {
 });
 function Table(props) {
     var _this = this;
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
     var cellSelectionOptions = props.cellSelectionOptions, onChangeData = props.onChangeData, sourceIndexByVisibleIndex = props.sourceIndexByVisibleIndex;
     var cellSelectionEnabled = (_a = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _a !== void 0 ? _a : true;
     // [Selector Group 1] Layout & Dimensions - 레이아웃 차원
-    var _5 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _6 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         width: s.width,
         height: s.height,
         containerBorderWidth: s.containerBorderWidth,
@@ -176,30 +176,30 @@ function Table(props) {
         style: s.style,
         itemHeight: s.itemHeight,
         itemPadding: s.itemPadding,
-    }); })), width = _5.width, height = _5.height, containerBorderWidth = _5.containerBorderWidth, className = _5.className, style = _5.style, itemHeight = _5.itemHeight, itemPadding = _5.itemPadding;
+    }); })), width = _6.width, height = _6.height, containerBorderWidth = _6.containerBorderWidth, className = _6.className, style = _6.style, itemHeight = _6.itemHeight, itemPadding = _6.itemPadding;
     // [Selector Group 2] Header, Footer, Summary - 헤더/푸터/요약
-    var _6 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _7 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         headerHeight: s.headerHeight,
         footerHeight: s.footerHeight,
         bottomBarHeight: s.bottomBarHeight,
         summaryHeight: s.summaryHeight,
-    }); })), headerHeight = _6.headerHeight, footerHeight = _6.footerHeight, bottomBarHeight = _6.bottomBarHeight, summaryHeight = _6.summaryHeight;
+    }); })), headerHeight = _7.headerHeight, footerHeight = _7.footerHeight, bottomBarHeight = _7.bottomBarHeight, summaryHeight = _7.summaryHeight;
     // [Selector Group 3] Scroll State - 스크롤 상태
-    var _7 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _8 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         scrollLeft: s.scrollLeft,
         scrollTop: s.scrollTop,
-    }); })), scrollLeft = _7.scrollLeft, scrollTop = _7.scrollTop;
+    }); })), scrollLeft = _8.scrollLeft, scrollTop = _8.scrollTop;
     // [Selector Group 4] Content, Columns, Data - 컨텐츠 관련
-    var _8 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _9 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         contentBodyHeight: s.contentBodyHeight,
         columns: s.columns,
         data: s.data,
         frozenColumnsWidth: s.frozenColumnsWidth,
         frozenRowCount: s.frozenRowCount,
         frozenRowsHeight: s.frozenRowsHeight,
-    }); })), contentBodyHeight = _8.contentBodyHeight, columns = _8.columns, data = _8.data, frozenColumnsWidth = _8.frozenColumnsWidth, frozenRowCount = _8.frozenRowCount, frozenRowsHeight = _8.frozenRowsHeight;
+    }); })), contentBodyHeight = _9.contentBodyHeight, columns = _9.columns, data = _9.data, frozenColumnsWidth = _9.frozenColumnsWidth, frozenRowCount = _9.frozenRowCount, frozenRowsHeight = _9.frozenRowsHeight;
     // [Selector Group 4-1] Cell selection & navigation - 셀 선택 및 내비게이션
-    var _9 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _10 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         cellSelectionRange: s.cellSelectionRange,
         cellSelectionRanges: s.cellSelectionRanges,
         activeCell: s.activeCell,
@@ -208,9 +208,9 @@ function Table(props) {
         editItemIndex: s.editItemIndex,
         editable: s.editable,
         handleClick: s.handleClick,
-    }); })), cellSelectionRange = _9.cellSelectionRange, cellSelectionRanges = _9.cellSelectionRanges, activeCell = _9.activeCell, activeCellHost = _9.activeCellHost, cellNavigationOptions = _9.cellNavigationOptions, editItemIndex = _9.editItemIndex, editable = _9.editable, handleClick = _9.handleClick;
+    }); })), cellSelectionRange = _10.cellSelectionRange, cellSelectionRanges = _10.cellSelectionRanges, activeCell = _10.activeCell, activeCellHost = _10.activeCellHost, cellNavigationOptions = _10.cellNavigationOptions, editItemIndex = _10.editItemIndex, editable = _10.editable, handleClick = _10.handleClick;
     // [Selector Group 5] State - 상태
-    var _10 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         rowChecked: s.rowChecked,
         page: s.page,
         loading: s.loading,
@@ -220,8 +220,8 @@ function Table(props) {
         scrollbar: s.scrollbar,
         status: s.status,
         pagination: s.pagination,
-    }); })), rowChecked = _10.rowChecked, page = _10.page, loading = _10.loading, spinning = _10.spinning, showLineNumber = _10.showLineNumber, summary = _10.summary, scrollbar = _10.scrollbar, status = _10.status, pagination = _10.pagination;
-    var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    }); })), rowChecked = _11.rowChecked, page = _11.page, loading = _11.loading, spinning = _11.spinning, showLineNumber = _11.showLineNumber, summary = _11.summary, scrollbar = _11.scrollbar, status = _11.status, pagination = _11.pagination;
+    var _12 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         searchOpen: s.searchOpen,
         searchOptions: s.searchOptions,
         contextMenuOptions: s.contextMenuOptions,
@@ -230,9 +230,9 @@ function Table(props) {
         storeSourceIndexByVisibleIndex: s.sourceIndexByVisibleIndex,
         storeRowKey: s.rowKey,
         cellInteractionSession: s.cellInteractionSession,
-    }); })), searchOpen = _11.searchOpen, searchOptions = _11.searchOptions, contextMenuOptions = _11.contextMenuOptions, activeSearchMatchIndex = _11.activeSearchMatchIndex, searchMatches = _11.searchMatches, storeSourceIndexByVisibleIndex = _11.storeSourceIndexByVisibleIndex, storeRowKey = _11.storeRowKey, cellInteractionSession = _11.cellInteractionSession;
+    }); })), searchOpen = _12.searchOpen, searchOptions = _12.searchOptions, contextMenuOptions = _12.contextMenuOptions, activeSearchMatchIndex = _12.activeSearchMatchIndex, searchMatches = _12.searchMatches, storeSourceIndexByVisibleIndex = _12.storeSourceIndexByVisibleIndex, storeRowKey = _12.storeRowKey, cellInteractionSession = _12.cellInteractionSession;
     // [Selector Group 6] State Setters - 차원 설정자
-    var _12 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setHeight: s.setHeight,
         setWidth: s.setWidth,
         setContentBodyHeight: s.setContentBodyHeight,
@@ -245,9 +245,9 @@ function Table(props) {
         setItemPadding: s.setItemPadding,
         setLoading: s.setLoading,
         setSpinning: s.setSpinning,
-    }); })), setHeight = _12.setHeight, setWidth = _12.setWidth, setContentBodyHeight = _12.setContentBodyHeight, setDisplayItemCount = _12.setDisplayItemCount, setHeaderHeight = _12.setHeaderHeight, setFooterHeight = _12.setFooterHeight, setBottomBarHeight = _12.setBottomBarHeight, setSummaryHeight = _12.setSummaryHeight, setItemHeight = _12.setItemHeight, setItemPadding = _12.setItemPadding, setLoading = _12.setLoading, setSpinning = _12.setSpinning;
+    }); })), setHeight = _13.setHeight, setWidth = _13.setWidth, setContentBodyHeight = _13.setContentBodyHeight, setDisplayItemCount = _13.setDisplayItemCount, setHeaderHeight = _13.setHeaderHeight, setFooterHeight = _13.setFooterHeight, setBottomBarHeight = _13.setBottomBarHeight, setSummaryHeight = _13.setSummaryHeight, setItemHeight = _13.setItemHeight, setItemPadding = _13.setItemPadding, setLoading = _13.setLoading, setSpinning = _13.setSpinning;
     // [Selector Group 7] Data & Column Setters - 데이터/열 설정자
-    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _14 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setData: s.setData,
         setSourceData: s.setSourceData,
         setProcessedData: s.setProcessedData,
@@ -258,9 +258,9 @@ function Table(props) {
         setFrozenColumnIndex: s.setFrozenColumnIndex,
         setFrozenRowCount: s.setFrozenRowCount,
         setFrozenRowsHeight: s.setFrozenRowsHeight,
-    }); })), setData = _13.setData, setSourceData = _13.setSourceData, setProcessedData = _13.setProcessedData, setColumns = _13.setColumns, setColumnsGroup = _13.setColumnsGroup, setColumnGroups = _13.setColumnGroups, setFrozenColumnsWidth = _13.setFrozenColumnsWidth, setFrozenColumnIndex = _13.setFrozenColumnIndex, setFrozenRowCount = _13.setFrozenRowCount, setFrozenRowsHeight = _13.setFrozenRowsHeight;
+    }); })), setData = _14.setData, setSourceData = _14.setSourceData, setProcessedData = _14.setProcessedData, setColumns = _14.setColumns, setColumnsGroup = _14.setColumnsGroup, setColumnGroups = _14.setColumnGroups, setFrozenColumnsWidth = _14.setFrozenColumnsWidth, setFrozenColumnIndex = _14.setFrozenColumnIndex, setFrozenRowCount = _14.setFrozenRowCount, setFrozenRowsHeight = _14.setFrozenRowsHeight;
     // [Selector Group 8] Row & Sort Setters - 행/정렬 설정자
-    var _14 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setRowChecked: s.setRowChecked,
         setCheckedIndexesMap: s.setCheckedIndexesMap,
         setSort: s.setSort,
@@ -277,9 +277,9 @@ function Table(props) {
         requestSearchOpen: s.requestSearchOpen,
         openContextMenu: s.openContextMenu,
         commitCheckboxCell: s.commitCheckboxCell,
-    }); })), setRowChecked = _14.setRowChecked, setCheckedIndexesMap = _14.setCheckedIndexesMap, setSort = _14.setSort, setSortParams = _14.setSortParams, setDataQuery = _14.setDataQuery, setDataControl = _14.setDataControl, setIcons = _14.setIcons, setActiveToolbox = _14.setActiveToolbox, setRowKey = _14.setRowKey, setFocusedRowKey = _14.setFocusedRowKey, setEditItem = _14.setEditItem, setSearchOptions = _14.setSearchOptions, setContextMenuOptions = _14.setContextMenuOptions, requestSearchOpen = _14.requestSearchOpen, openContextMenu = _14.openContextMenu, commitCheckboxCell = _14.commitCheckboxCell;
+    }); })), setRowChecked = _15.setRowChecked, setCheckedIndexesMap = _15.setCheckedIndexesMap, setSort = _15.setSort, setSortParams = _15.setSortParams, setDataQuery = _15.setDataQuery, setDataControl = _15.setDataControl, setIcons = _15.setIcons, setActiveToolbox = _15.setActiveToolbox, setRowKey = _15.setRowKey, setFocusedRowKey = _15.setFocusedRowKey, setEditItem = _15.setEditItem, setSearchOptions = _15.setSearchOptions, setContextMenuOptions = _15.setContextMenuOptions, requestSearchOpen = _15.requestSearchOpen, openContextMenu = _15.openContextMenu, commitCheckboxCell = _15.commitCheckboxCell;
     // [Selector Group 9] Pagination & Display Setters - 페이지/표시 설정자
-    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setPage: s.setPage,
         setDisplayPaginationLength: s.setDisplayPaginationLength,
         setShowLineNumber: s.setShowLineNumber,
@@ -295,9 +295,9 @@ function Table(props) {
         setScrollbar: s.setScrollbar,
         setStatus: s.setStatus,
         setPagination: s.setPagination,
-    }); })), setPage = _15.setPage, setDisplayPaginationLength = _15.setDisplayPaginationLength, setShowLineNumber = _15.setShowLineNumber, setMsg = _15.setMsg, setRowClassName = _15.setRowClassName, setCellMergeOptions = _15.setCellMergeOptions, setVariant = _15.setVariant, setSummary = _15.setSummary, setColumnSortable = _15.setColumnSortable, setReorder = _15.setReorder, setClassName = _15.setClassName, setStyle = _15.setStyle, setScrollbar = _15.setScrollbar, setStatus = _15.setStatus, setPagination = _15.setPagination;
+    }); })), setPage = _16.setPage, setDisplayPaginationLength = _16.setDisplayPaginationLength, setShowLineNumber = _16.setShowLineNumber, setMsg = _16.setMsg, setRowClassName = _16.setRowClassName, setCellMergeOptions = _16.setCellMergeOptions, setVariant = _16.setVariant, setSummary = _16.setSummary, setColumnSortable = _16.setColumnSortable, setReorder = _16.setReorder, setClassName = _16.setClassName, setStyle = _16.setStyle, setScrollbar = _16.setScrollbar, setStatus = _16.setStatus, setPagination = _16.setPagination;
     // [Selector Group 10] Edit & Event Setters - 편집/이벤트 설정자
-    var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setEditable: s.setEditable,
         setEditTrigger: s.setEditTrigger,
         setOnClick: s.setOnClick,
@@ -306,8 +306,8 @@ function Table(props) {
         setOnLoadMore: s.setOnLoadMore,
         setScroll: s.setScroll,
         setInitialized: s.setInitialized,
-    }); })), setEditable = _16.setEditable, setEditTrigger = _16.setEditTrigger, setOnClick = _16.setOnClick, setOnChangeColumns = _16.setOnChangeColumns, setOnChangeData = _16.setOnChangeData, setOnLoadMore = _16.setOnLoadMore, setScroll = _16.setScroll, setInitialized = _16.setInitialized;
-    var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    }); })), setEditable = _17.setEditable, setEditTrigger = _17.setEditTrigger, setOnClick = _17.setOnClick, setOnChangeColumns = _17.setOnChangeColumns, setOnChangeData = _17.setOnChangeData, setOnLoadMore = _17.setOnLoadMore, setScroll = _17.setScroll, setInitialized = _17.setInitialized;
+    var _18 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setCellSelectionRanges: s.setCellSelectionRanges,
         setCellSelecting: s.setCellSelecting,
         clearCellSelection: s.clearCellSelection,
@@ -315,10 +315,29 @@ function Table(props) {
         moveActiveCell: s.moveActiveCell,
         setCellNavigationOptions: s.setCellNavigationOptions,
         syncActiveCellToBounds: s.syncActiveCellToBounds,
-    }); })), setCellSelectionRanges = _17.setCellSelectionRanges, setCellSelecting = _17.setCellSelecting, clearCellSelection = _17.clearCellSelection, setActiveCell = _17.setActiveCell, moveActiveCell = _17.moveActiveCell, setCellNavigationOptions = _17.setCellNavigationOptions, syncActiveCellToBounds = _17.syncActiveCellToBounds;
+    }); })), setCellSelectionRanges = _18.setCellSelectionRanges, setCellSelecting = _18.setCellSelecting, clearCellSelection = _18.clearCellSelection, setActiveCell = _18.setActiveCell, moveActiveCell = _18.moveActiveCell, setCellNavigationOptions = _18.setCellNavigationOptions, syncActiveCellToBounds = _18.syncActiveCellToBounds;
     var trHeight = itemHeight + itemPadding * 2;
     var scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
     var mainViewportWidth = Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0);
+    var logicalBodyContentHeight = data.length * trHeight;
+    var virtualScrollWindowMetrics = React.useMemo(function () {
+        return (0, utils_1.getVirtualScrollWindowMetrics)({
+            logicalContentHeight: logicalBodyContentHeight,
+            viewportHeight: contentBodyHeight,
+            enabled: scrollbar.variant !== 'native',
+        });
+    }, [contentBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
+    var _19 = __read(React.useState(0), 2), virtualScrollBase = _19[0], setVirtualScrollBase = _19[1];
+    var virtualScrollBaseRef = (0, react_1.useRef)(0);
+    var containerRef = (0, react_1.useRef)(null);
+    var searchPopoverRef = (0, react_1.useRef)(null);
+    var editorPortalRef = (0, react_1.useRef)(null);
+    var bodyContainerRef = (0, react_1.useRef)(null);
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var logicalVerticalScrollState = React.useMemo(function () { return ({
+        scrollTop: scrollTop,
+        scrollHeight: virtualScrollWindowMetrics.logicalContentHeight,
+    }); }, [scrollTop, virtualScrollWindowMetrics.logicalContentHeight]);
     var hasMultiCellSelection = React.useMemo(function () {
         return cellSelectionRanges.length > 1 ||
             cellSelectionRanges.some(function (range) {
@@ -418,7 +437,7 @@ function Table(props) {
                 top: topQuadrant ? 0 : scrollTop,
                 width: leftQuadrant ? frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0 : mainViewportWidth,
                 height: topQuadrant ? frozenRowsHeight : scrollableBodyHeight,
-            } }));
+            }, offsetTop: !topQuadrant && virtualScrollWindowMetrics.enabled ? virtualScrollBase : 0 }));
     };
     var visibleScrollableRows = React.useMemo(function () {
         var _a;
@@ -436,15 +455,14 @@ function Table(props) {
         startRowIndex: visibleScrollableRows.startRowIndex,
         endRowIndex: visibleScrollableRows.endRowIndex,
     }); }, [visibleScrollableRows.endRowIndex, visibleScrollableRows.startRowIndex]);
-    var frozenScrollableBodyStyle = React.useMemo(function () { return ({ top: visibleScrollableRows.paddingTop }); }, [visibleScrollableRows.paddingTop]);
-    var containerRef = (0, react_1.useRef)(null);
-    var searchPopoverRef = (0, react_1.useRef)(null);
+    var frozenScrollableBodyStyle = React.useMemo(function () { return ({
+        top: virtualScrollWindowMetrics.enabled
+            ? visibleScrollableRows.paddingTop - virtualScrollBase
+            : visibleScrollableRows.paddingTop,
+    }); }, [virtualScrollBase, virtualScrollWindowMetrics.enabled, visibleScrollableRows.paddingTop]);
     var warnedContextMenuIdsRef = (0, react_1.useRef)(new Set());
     var warnedContextMenuFactoryRef = (0, react_1.useRef)(false);
-    var editorPortalRef = (0, react_1.useRef)(null);
     var editorPortalContext = React.useMemo(function () { return ({ gridRef: containerRef, portalRef: editorPortalRef }); }, []);
-    var bodyContainerRef = (0, react_1.useRef)(null);
-    var scrollContainerRef = (0, react_1.useRef)(null);
     var rowReorderController = (0, useRowReorderController_1.useRowReorderController)({
         containerRef: containerRef,
         bodyContainerRef: bodyContainerRef,
@@ -556,7 +574,8 @@ function Table(props) {
     var stickyBottomHeight = (summary === null || summary === void 0 ? void 0 : summary.position) === 'bottom' ? summaryHeight : 0;
     var stickyFixedHeight = stickyTopHeight + stickyBottomHeight;
     var scrollViewportHeight = contentBodyHeight + stickyFixedHeight;
-    var scrollPlaneHeight = stickyFixedHeight + frozenRowsHeight + visibleScrollableRows.scrollContentHeight;
+    var physicalScrollableRowsHeight = Math.max(virtualScrollWindowMetrics.physicalContentHeight - frozenRowsHeight, 0);
+    var scrollPlaneHeight = stickyFixedHeight + virtualScrollWindowMetrics.physicalContentHeight;
     var scrollPlaneContentWidth = (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) + scrollableColumnsWidth;
     var scrollPlaneWidth = Math.max(width, scrollPlaneContentWidth);
     var customVerticalScrollbarGutter = scrollbar.vertical.visible && scrollbar.variant === 'classic'
@@ -567,7 +586,16 @@ function Table(props) {
     var scrollPlaneMinWidth = customVerticalScrollbarGutter
         ? "max(100%, calc(".concat(scrollPlaneContentWidth, "px + ").concat(customVerticalScrollbarGutter, "))")
         : scrollPlaneWidth;
-    var scrollbarMetrics = (0, scrollbar_1.useScrollbarMetrics)(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+    var measuredScrollbarMetrics = (0, scrollbar_1.useScrollbarMetrics)(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+    var scrollbarMetrics = React.useMemo(function () {
+        return virtualScrollWindowMetrics.enabled
+            ? __assign(__assign({}, measuredScrollbarMetrics), { vertical: {
+                    viewportSize: contentBodyHeight,
+                    contentSize: virtualScrollWindowMetrics.logicalContentHeight,
+                    maxScroll: virtualScrollWindowMetrics.logicalMaxScroll,
+                    hasOverflow: virtualScrollWindowMetrics.logicalMaxScroll > 1,
+                } }) : measuredScrollbarMetrics;
+    }, [contentBodyHeight, measuredScrollbarMetrics, virtualScrollWindowMetrics]);
     var measuredVerticalScrollbarGutter = customVerticalScrollbarGutter && scrollbarMetrics.horizontal.hasOverflow
         ? Math.max(scrollbarMetrics.horizontal.contentSize - scrollPlaneContentWidth, 0)
         : 0;
@@ -587,13 +615,17 @@ function Table(props) {
             scrollContainerRef.current.scrollLeft = offset;
         }
     }, []);
-    var handleScrollTopChange = (0, react_1.useCallback)(function (offset) {
-        if (scrollContainerRef.current) {
-            scrollContainerRef.current.scrollTop = offset;
-        }
-    }, []);
     var latestScrollRef = (0, react_1.useRef)({ top: scrollTop, left: scrollLeft });
     var latestCommittedScrollRef = (0, react_1.useRef)({ top: scrollTop, left: scrollLeft });
+    var scrollPropsRef = (0, react_1.useRef)({ top: props.scrollTop, left: props.scrollLeft });
+    var syncedDataPropRef = (0, react_1.useRef)(props.data);
+    var _20 = __read(React.useState(null), 2), rowScrollRequest = _20[0], setRowScrollRequest = _20[1];
+    React.useImperativeHandle(props.ref, function () { return ({
+        scrollToRow: function (rowIndex, options) {
+            var _a;
+            setRowScrollRequest({ rowIndex: rowIndex, align: (_a = options === null || options === void 0 ? void 0 : options.align) !== null && _a !== void 0 ? _a : 'nearest' });
+        },
+    }); }, []);
     var scrollRafRef = (0, react_1.useRef)(null);
     var scrollIdleTimerRef = (0, react_1.useRef)(null);
     var selectionAutoScrollRafRef = (0, react_1.useRef)(null);
@@ -608,6 +640,7 @@ function Table(props) {
         frozenRowCount: frozenRowCount,
         frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
         frozenRowsHeight: frozenRowsHeight,
+        scrollTop: scrollTop,
         trHeight: trHeight,
     });
     (0, react_1.useEffect)(function () {
@@ -619,9 +652,10 @@ function Table(props) {
             frozenRowCount: frozenRowCount,
             frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
             frozenRowsHeight: frozenRowsHeight,
+            scrollTop: scrollTop,
             trHeight: trHeight,
         };
-    }, [columns, data.length, props.frozenColumnIndex, frozenColumnsWidth, frozenRowCount, frozenRowsHeight, trHeight]);
+    }, [columns, data.length, props.frozenColumnIndex, frozenColumnsWidth, frozenRowCount, frozenRowsHeight, scrollTop, trHeight]);
     var markScrollActive = (0, react_1.useCallback)(function () {
         var _a;
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-bgrid-scrolling', 'true');
@@ -633,6 +667,28 @@ function Table(props) {
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-bgrid-scrolling');
         }, SCROLL_IDLE_DELAY);
     }, []);
+    var commitScroll = (0, react_1.useCallback)(function (top, left) {
+        var scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        var position = (0, utils_1.getVirtualScrollWindowPosition)(top, virtualScrollWindowMetrics);
+        if (virtualScrollBaseRef.current !== position.base) {
+            virtualScrollBaseRef.current = position.base;
+            setVirtualScrollBase(position.base);
+        }
+        if (scrollContainer.scrollTop !== position.physicalScrollTop) {
+            scrollContainer.scrollTop = position.physicalScrollTop;
+        }
+        if (scrollContainer.scrollLeft !== left)
+            scrollContainer.scrollLeft = left;
+        latestScrollRef.current = { top: position.logicalScrollTop, left: left };
+        latestCommittedScrollRef.current = { top: position.logicalScrollTop, left: left };
+        setScroll(position.logicalScrollTop, left);
+    }, [setScroll, virtualScrollWindowMetrics]);
+    var handleScrollTopChange = (0, react_1.useCallback)(function (offset) {
+        var _a, _b;
+        commitScroll(offset, (_b = (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : scrollLeft);
+    }, [commitScroll, scrollLeft]);
     var scheduleScrollFrame = (0, react_1.useCallback)(function () {
         if (scrollRafRef.current !== null)
             return;
@@ -642,91 +698,42 @@ function Table(props) {
             var scrollContainer = scrollContainerRef.current;
             if (!scrollContainer)
                 return;
-            var scrollTop = scrollContainer.scrollTop, scrollLeft = scrollContainer.scrollLeft;
-            latestScrollRef.current = { top: scrollTop, left: scrollLeft };
+            var physicalScrollTop = scrollContainer.scrollTop, scrollLeft = scrollContainer.scrollLeft;
+            var position = (0, utils_1.rebaseVirtualScrollWindow)(virtualScrollBaseRef.current, physicalScrollTop, virtualScrollWindowMetrics);
+            if (virtualScrollBaseRef.current !== position.base) {
+                virtualScrollBaseRef.current = position.base;
+                setVirtualScrollBase(position.base);
+            }
+            if (physicalScrollTop !== position.physicalScrollTop) {
+                scrollContainer.scrollTop = position.physicalScrollTop;
+            }
+            var logicalScrollTop = position.logicalScrollTop;
+            latestScrollRef.current = { top: logicalScrollTop, left: scrollLeft };
             var _b = latestCommittedScrollRef.current, committedTop = _b.top, committedLeft = _b.left;
-            if (committedTop !== scrollTop || committedLeft !== scrollLeft) {
-                latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
-                setScroll(scrollTop, scrollLeft);
+            if (committedTop !== logicalScrollTop || committedLeft !== scrollLeft) {
+                latestCommittedScrollRef.current = { top: logicalScrollTop, left: scrollLeft };
+                setScroll(logicalScrollTop, scrollLeft);
             }
             if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-bgrid-scrolling')) {
                 scrollRafRef.current = requestAnimationFrame(pollNativeScrollPosition);
             }
         };
         scrollRafRef.current = requestAnimationFrame(pollNativeScrollPosition);
-    }, [setScroll]);
+    }, [setScroll, virtualScrollWindowMetrics]);
     var onScroll = (0, react_1.useCallback)(function () {
         if (scrollContainerRef.current) {
-            var _a = scrollContainerRef.current, scrollTop_1 = _a.scrollTop, scrollLeft_1 = _a.scrollLeft;
-            latestScrollRef.current = { top: scrollTop_1, left: scrollLeft_1 };
             markScrollActive();
             scheduleScrollFrame();
         }
     }, [markScrollActive, scheduleScrollFrame]);
-    var onWheel = (0, react_1.useCallback)(function (evt) {
-        var scrollContainer = scrollContainerRef.current;
-        if (!scrollContainer)
-            return;
-        var delta = { x: 0, y: 0 };
-        if (evt.detail) {
-            delta.y = evt.detail * 10;
-        }
-        else if (typeof evt.deltaY === 'undefined') {
-            delta.y = -evt.wheelDelta;
-            delta.x = 0;
-        }
-        else {
-            delta.y = evt.deltaY;
-            delta.x = evt.deltaX;
-        }
-        if (evt.deltaMode === 1) {
-            delta.y = delta.y * 16;
-            delta.x = delta.x * 16;
-        }
-        else if (evt.deltaMode === 2) {
-            delta.y = delta.y * scrollContainer.clientHeight;
-            delta.x = delta.x * scrollContainer.clientWidth;
-        }
-        var maxScrollTop = Math.max(scrollContainer.scrollHeight - scrollContainer.clientHeight, 0);
-        var maxScrollLeft = Math.max(scrollContainer.scrollWidth - scrollContainer.clientWidth, 0);
-        var nextScrollTop = Math.min(maxScrollTop, Math.max(0, scrollContainer.scrollTop + delta.y));
-        var nextScrollLeft = Math.min(maxScrollLeft, Math.max(0, scrollContainer.scrollLeft + delta.x));
-        var didScrollTop = nextScrollTop !== scrollContainer.scrollTop;
-        var didScrollLeft = nextScrollLeft !== scrollContainer.scrollLeft;
-        var isVertical = Math.abs(delta.y) > Math.abs(delta.x);
-        if (isVertical) {
-            if (!didScrollTop)
-                return;
-        }
-        else {
-            if (!didScrollLeft)
-                return;
-        }
-        evt.preventDefault();
-        if (didScrollTop)
-            scrollContainer.scrollTop = nextScrollTop;
-        if (didScrollLeft)
-            scrollContainer.scrollLeft = nextScrollLeft;
-    }, []);
     var resetScrollPosition = (0, react_1.useCallback)(function (type) {
-        var _a, _b;
-        if (type === 'all' || type === 'left')
-            (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ left: 0 });
-        if (type === 'all' || type === 'top')
-            (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
-    }, []);
-    var commitScroll = (0, react_1.useCallback)(function (top, left) {
         var scrollContainer = scrollContainerRef.current;
         if (!scrollContainer)
             return;
-        if (scrollContainer.scrollTop !== top)
-            scrollContainer.scrollTop = top;
-        if (scrollContainer.scrollLeft !== left)
-            scrollContainer.scrollLeft = left;
-        latestScrollRef.current = { top: top, left: left };
-        latestCommittedScrollRef.current = { top: top, left: left };
-        setScroll(top, left);
-    }, [setScroll]);
+        var nextTop = type === 'all' || type === 'top' ? 0 : latestScrollRef.current.top;
+        var nextLeft = type === 'all' || type === 'left' ? 0 : scrollContainer.scrollLeft;
+        commitScroll(nextTop, nextLeft);
+    }, [commitScroll]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
         if (!searchOpen || activeSearchMatchIndex === undefined)
@@ -751,6 +758,7 @@ function Table(props) {
             frozenRowCount: frozenRowCount,
             columns: columns,
             rowHeight: trHeight,
+            verticalScrollState: logicalVerticalScrollState,
             viewportInsets: viewportInsets,
         });
         if (result.didScroll)
@@ -760,6 +768,7 @@ function Table(props) {
         columns,
         commitScroll,
         frozenRowCount,
+        logicalVerticalScrollState,
         props.frozenColumnIndex,
         searchMatches,
         searchOpen,
@@ -992,18 +1001,18 @@ function Table(props) {
         if (!dragState || !pointer || !scrollContainer || !bodyContainer)
             return;
         var delta = getSelectionAutoScrollDelta(pointer.clientX, pointer.clientY, bodyContainer, scrollContainer);
-        var maxScrollTop = Math.max(scrollContainer.scrollHeight - scrollContainer.clientHeight, 0);
+        var maxScrollTop = virtualScrollWindowMetrics.logicalMaxScroll;
         var maxScrollLeft = Math.max(scrollContainer.scrollWidth - scrollContainer.clientWidth, 0);
-        var nextScrollTop = (0, coordinate_1.clamp)(scrollContainer.scrollTop + delta.y, 0, maxScrollTop);
+        var nextScrollTop = (0, coordinate_1.clamp)(latestScrollRef.current.top + delta.y, 0, maxScrollTop);
         var nextScrollLeft = (0, coordinate_1.clamp)(scrollContainer.scrollLeft + delta.x, 0, maxScrollLeft);
-        if (nextScrollTop !== scrollContainer.scrollTop || nextScrollLeft !== scrollContainer.scrollLeft) {
+        if (nextScrollTop !== latestScrollRef.current.top || nextScrollLeft !== scrollContainer.scrollLeft) {
             commitScroll(nextScrollTop, nextScrollLeft);
         }
         updateSelectionByPointer(pointer.clientX, pointer.clientY);
         if (cellSelectionDragRef.current && (delta.x !== 0 || delta.y !== 0)) {
             selectionAutoScrollRafRef.current = requestAnimationFrame(runSelectionAutoScroll);
         }
-    }, [commitScroll, updateSelectionByPointer]);
+    }, [commitScroll, updateSelectionByPointer, virtualScrollWindowMetrics.logicalMaxScroll]);
     var selectAllCells = (0, react_1.useCallback)(function () {
         if (!cellSelectionEnabled)
             return false;
@@ -1525,6 +1534,7 @@ function Table(props) {
                 setSourceData(props.sourceData);
             }
         }
+        syncedDataPropRef.current = props.data;
     }, [
         props.data,
         props.sourceData,
@@ -1605,9 +1615,13 @@ function Table(props) {
         setPage,
         setDisplayPaginationLength,
     ]);
+    var previousPageRef = (0, react_1.useRef)((_o = props.page) === null || _o === void 0 ? void 0 : _o.currentPage);
     (0, react_1.useEffect)(function () {
-        resetScrollPosition('top');
-    }, [resetScrollPosition, (_o = props.page) === null || _o === void 0 ? void 0 : _o.currentPage]);
+        var _a, _b;
+        if (previousPageRef.current !== ((_a = props.page) === null || _a === void 0 ? void 0 : _a.currentPage))
+            resetScrollPosition('top');
+        previousPageRef.current = (_b = props.page) === null || _b === void 0 ? void 0 : _b.currentPage;
+    }, [resetScrollPosition, (_p = props.page) === null || _p === void 0 ? void 0 : _p.currentPage]);
     // [Group 8] Row key & selection
     (0, react_1.useEffect)(function () {
         setRowKey(props.rowKey);
@@ -1679,10 +1693,10 @@ function Table(props) {
     }, [
         columns.length,
         data.length,
-        (_q = (_p = props.cellNavigationOptions) === null || _p === void 0 ? void 0 : _p.activeCell) === null || _q === void 0 ? void 0 : _q.columnIndex,
-        (_s = (_r = props.cellNavigationOptions) === null || _r === void 0 ? void 0 : _r.activeCell) === null || _s === void 0 ? void 0 : _s.rowIndex,
-        (_u = (_t = props.cellNavigationOptions) === null || _t === void 0 ? void 0 : _t.defaultActiveCell) === null || _u === void 0 ? void 0 : _u.columnIndex,
-        (_w = (_v = props.cellNavigationOptions) === null || _v === void 0 ? void 0 : _v.defaultActiveCell) === null || _w === void 0 ? void 0 : _w.rowIndex,
+        (_r = (_q = props.cellNavigationOptions) === null || _q === void 0 ? void 0 : _q.activeCell) === null || _r === void 0 ? void 0 : _r.columnIndex,
+        (_t = (_s = props.cellNavigationOptions) === null || _s === void 0 ? void 0 : _s.activeCell) === null || _t === void 0 ? void 0 : _t.rowIndex,
+        (_v = (_u = props.cellNavigationOptions) === null || _u === void 0 ? void 0 : _u.defaultActiveCell) === null || _v === void 0 ? void 0 : _v.columnIndex,
+        (_x = (_w = props.cellNavigationOptions) === null || _w === void 0 ? void 0 : _w.defaultActiveCell) === null || _x === void 0 ? void 0 : _x.rowIndex,
         syncActiveCellToBounds,
     ]);
     // setInitialized + DOM event bindings
@@ -1691,10 +1705,8 @@ function Table(props) {
         var containerRefCurrent = containerRef.current;
         var scrollContainerRefCurrent = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (scrollContainerRefCurrent) {
-            scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
+            scrollContainerRefCurrent.removeEventListener('scroll', onScroll, true);
             scrollContainerRefCurrent.addEventListener('scroll', onScroll, { passive: true, capture: true });
-            // scrollContainerRefCurrent.removeEventListener('wheel', onWheel);
-            // scrollContainerRefCurrent.addEventListener('wheel', onWheel, { passive: false, capture: true });
         }
         return function () {
             if (scrollRafRef.current !== null) {
@@ -1706,20 +1718,57 @@ function Table(props) {
                 scrollIdleTimerRef.current = null;
             }
             containerRefCurrent === null || containerRefCurrent === void 0 ? void 0 : containerRefCurrent.removeAttribute('data-bgrid-scrolling');
-            scrollContainerRefCurrent === null || scrollContainerRefCurrent === void 0 ? void 0 : scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
+            scrollContainerRefCurrent === null || scrollContainerRefCurrent === void 0 ? void 0 : scrollContainerRefCurrent.removeEventListener('scroll', onScroll, true);
         };
-    }, [onScroll, onWheel, setInitialized]);
+    }, [onScroll, setInitialized]);
     React.useLayoutEffect(function () {
+        var _a, _b;
         if (!scrollContainerRef.current)
             return;
-        if (props.scrollLeft !== undefined) {
-            scrollContainerRef.current.scrollLeft = props.scrollLeft;
-        }
-        if (props.scrollTop !== undefined) {
-            scrollContainerRef.current.scrollTop = props.scrollTop;
-        }
-    }, [props.scrollLeft, props.scrollTop]);
+        if (props.data !== syncedDataPropRef.current)
+            return;
+        // Resizing or changing the data also changes commitScroll. Only a changed
+        // scroll prop should override the user's current position.
+        var nextTop = props.scrollTop !== scrollPropsRef.current.top
+            ? (_a = props.scrollTop) !== null && _a !== void 0 ? _a : latestScrollRef.current.top
+            : latestScrollRef.current.top;
+        var nextLeft = props.scrollLeft !== scrollPropsRef.current.left
+            ? (_b = props.scrollLeft) !== null && _b !== void 0 ? _b : latestScrollRef.current.left
+            : latestScrollRef.current.left;
+        scrollPropsRef.current = { top: props.scrollTop, left: props.scrollLeft };
+        commitScroll(nextTop, nextLeft);
+    }, [commitScroll, data, props.data, props.scrollLeft, props.scrollTop]);
+    React.useLayoutEffect(function () {
+        if (!rowScrollRequest)
+            return;
+        // Prop data reaches the per-grid store in an effect. Wait for that render
+        // so appending a row and requesting it in the same event is supported.
+        if (props.data !== syncedDataPropRef.current)
+            return;
+        setRowScrollRequest(null);
+        var rowIndex = rowScrollRequest.rowIndex, align = rowScrollRequest.align;
+        if (!Number.isInteger(rowIndex) || rowIndex < frozenRowCount || rowIndex >= data.length)
+            return;
+        if (scrollableBodyHeight <= 0)
+            return;
+        var rowTop = (rowIndex - frozenRowCount) * trHeight;
+        var rowBottom = rowTop + trHeight;
+        var _a = latestScrollRef.current, top = _a.top, left = _a.left;
+        var nextTop = top;
+        if (align === 'start')
+            nextTop = rowTop;
+        else if (align === 'center')
+            nextTop = rowTop - (scrollableBodyHeight - trHeight) / 2;
+        else if (align === 'end')
+            nextTop = rowBottom - scrollableBodyHeight;
+        else if (rowTop < top)
+            nextTop = rowTop;
+        else if (rowBottom > top + scrollableBodyHeight)
+            nextTop = rowBottom - scrollableBodyHeight;
+        commitScroll(nextTop, left);
+    }, [commitScroll, data, frozenRowCount, props.data, rowScrollRequest, scrollableBodyHeight, trHeight]);
     (0, react_1.useEffect)(function () {
+        latestScrollRef.current = { top: scrollTop, left: scrollLeft };
         latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
     }, [scrollTop, scrollLeft]);
     (0, react_1.useEffect)(function () {
@@ -1769,8 +1818,8 @@ function Table(props) {
         endCellSelectionDrag();
         clearCellSelection();
     }, [cellSelectionEnabled, clearCellSelection, endCellSelectionDrag]);
-    var clearCellSelectionOnEscape = (_y = (_x = props.cellSelectionOptions) === null || _x === void 0 ? void 0 : _x.clearOnEscape) !== null && _y !== void 0 ? _y : true;
-    var clearCellSelectionOnOutsideClick = (_0 = (_z = props.cellSelectionOptions) === null || _z === void 0 ? void 0 : _z.clearOnOutsideClick) !== null && _0 !== void 0 ? _0 : true;
+    var clearCellSelectionOnEscape = (_z = (_y = props.cellSelectionOptions) === null || _y === void 0 ? void 0 : _y.clearOnEscape) !== null && _z !== void 0 ? _z : true;
+    var clearCellSelectionOnOutsideClick = (_1 = (_0 = props.cellSelectionOptions) === null || _0 === void 0 ? void 0 : _0.clearOnOutsideClick) !== null && _1 !== void 0 ? _1 : true;
     var keyboardRuntimeRef = (0, react_1.useRef)({
         activeCell: activeCell,
         cellInteractionSession: cellInteractionSession,
@@ -1788,7 +1837,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_1 = props.frozenColumnIndex) !== null && _1 !== void 0 ? _1 : 0,
+        frozenColumnIndex: (_2 = props.frozenColumnIndex) !== null && _2 !== void 0 ? _2 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -1801,6 +1850,7 @@ function Table(props) {
         searchOpen: searchOpen,
         searchOptions: searchOptions,
         trHeight: trHeight,
+        verticalScrollState: logicalVerticalScrollState,
         viewportInsets: keyboardViewportInsets,
     });
     keyboardRuntimeRef.current = {
@@ -1820,7 +1870,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_2 = props.frozenColumnIndex) !== null && _2 !== void 0 ? _2 : 0,
+        frozenColumnIndex: (_3 = props.frozenColumnIndex) !== null && _3 !== void 0 ? _3 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -1833,6 +1883,7 @@ function Table(props) {
         searchOpen: searchOpen,
         searchOptions: searchOptions,
         trHeight: trHeight,
+        verticalScrollState: logicalVerticalScrollState,
         viewportInsets: keyboardViewportInsets,
     };
     (0, react_1.useEffect)(function () {
@@ -1849,7 +1900,7 @@ function Table(props) {
         };
         var moveWithArrowKey = function (key, extendSelection, toBoundary) {
             if (toBoundary === void 0) { toBoundary = false; }
-            var _a = keyboardRuntimeRef.current, activeCell = _a.activeCell, cellInteractionSession = _a.cellInteractionSession, cellNavigationOptions = _a.cellNavigationOptions, cellSelectionEnabled = _a.cellSelectionEnabled, columns = _a.columns, commitScroll = _a.commitScroll, dataLength = _a.dataLength, frozenColumnIndex = _a.frozenColumnIndex, frozenRowCount = _a.frozenRowCount, moveActiveCell = _a.moveActiveCell, trHeight = _a.trHeight, viewportInsets = _a.viewportInsets;
+            var _a = keyboardRuntimeRef.current, activeCell = _a.activeCell, cellInteractionSession = _a.cellInteractionSession, cellNavigationOptions = _a.cellNavigationOptions, cellSelectionEnabled = _a.cellSelectionEnabled, columns = _a.columns, commitScroll = _a.commitScroll, dataLength = _a.dataLength, frozenColumnIndex = _a.frozenColumnIndex, frozenRowCount = _a.frozenRowCount, moveActiveCell = _a.moveActiveCell, trHeight = _a.trHeight, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
             var container = containerRef.current;
             var activeElement = document.activeElement;
             if (!container ||
@@ -1883,6 +1934,7 @@ function Table(props) {
                 frozenRowCount: frozenRowCount,
                 columns: columns,
                 rowHeight: trHeight,
+                verticalScrollState: verticalScrollState,
                 viewportInsets: viewportInsets,
             });
             if (result.didScroll) {
@@ -1916,7 +1968,7 @@ function Table(props) {
         };
         var handleKeyDown = function (evt) {
             var _a, _b, _c, _d, _e;
-            var _f = keyboardRuntimeRef.current, activeCell = _f.activeCell, cellInteractionSession = _f.cellInteractionSession, cellNavigationOptions = _f.cellNavigationOptions, cellSelectionEnabled = _f.cellSelectionEnabled, clearCellSelection = _f.clearCellSelection, clearCellSelectionOnEscape = _f.clearCellSelectionOnEscape, columns = _f.columns, commitCheckboxCell = _f.commitCheckboxCell, commitScroll = _f.commitScroll, copySelectedCells = _f.copySelectedCells, data = _f.data, dataLength = _f.dataLength, editable = _f.editable, editItemIndex = _f.editItemIndex, endCellSelectionDrag = _f.endCellSelectionDrag, frozenColumnIndex = _f.frozenColumnIndex, frozenRowCount = _f.frozenRowCount, height = _f.height, handleClick = _f.handleClick, moveActiveCell = _f.moveActiveCell, openCellContextMenu = _f.openCellContextMenu, selectAllCells = _f.selectAllCells, setEditItem = _f.setEditItem, requestSearchOpen = _f.requestSearchOpen, searchOpen = _f.searchOpen, searchOptions = _f.searchOptions, trHeight = _f.trHeight, viewportInsets = _f.viewportInsets;
+            var _f = keyboardRuntimeRef.current, activeCell = _f.activeCell, cellInteractionSession = _f.cellInteractionSession, cellNavigationOptions = _f.cellNavigationOptions, cellSelectionEnabled = _f.cellSelectionEnabled, clearCellSelection = _f.clearCellSelection, clearCellSelectionOnEscape = _f.clearCellSelectionOnEscape, columns = _f.columns, commitCheckboxCell = _f.commitCheckboxCell, commitScroll = _f.commitScroll, copySelectedCells = _f.copySelectedCells, data = _f.data, dataLength = _f.dataLength, editable = _f.editable, editItemIndex = _f.editItemIndex, endCellSelectionDrag = _f.endCellSelectionDrag, frozenColumnIndex = _f.frozenColumnIndex, frozenRowCount = _f.frozenRowCount, height = _f.height, handleClick = _f.handleClick, moveActiveCell = _f.moveActiveCell, openCellContextMenu = _f.openCellContextMenu, selectAllCells = _f.selectAllCells, setEditItem = _f.setEditItem, requestSearchOpen = _f.requestSearchOpen, searchOpen = _f.searchOpen, searchOptions = _f.searchOptions, trHeight = _f.trHeight, verticalScrollState = _f.verticalScrollState, viewportInsets = _f.viewportInsets;
             var container = containerRef.current;
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
@@ -2045,6 +2097,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
                         if (result.didScroll) {
@@ -2088,6 +2141,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
                         if (result.didScroll) {
@@ -2115,6 +2169,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
                         if (result.didScroll) {
@@ -2204,7 +2259,7 @@ function Table(props) {
                 if (gateway instanceof HTMLInputElement) {
                     gateway.focus({ preventScroll: true });
                 }
-            }, "data-scroll-variant": scrollbar.variant, "data-vertical-scrollbar": scrollbar.variant !== 'native' && scrollbar.vertical.visible ? 'visible' : 'hidden', "data-bgrid-cell-selection-enabled": cellSelectionEnabled ? 'true' : 'false', "data-bgrid-frozen-columns": ((_3 = props.frozenColumnIndex) !== null && _3 !== void 0 ? _3 : 0) > 0 ? 'true' : 'false' },
+            }, "data-scroll-variant": scrollbar.variant, "data-vertical-scrollbar": scrollbar.variant !== 'native' && scrollbar.vertical.visible ? 'visible' : 'hidden', "data-bgrid-cell-selection-enabled": cellSelectionEnabled ? 'true' : 'false', "data-bgrid-frozen-columns": ((_4 = props.frozenColumnIndex) !== null && _4 !== void 0 ? _4 : 0) > 0 ? 'true' : 'false' },
             scrollbar.variant !== 'native' && scrollbar.vertical.visible && (React.createElement("div", { className: 'bgrid-vertical-scrollbar-gutter', "aria-hidden": 'true' })),
             scrollbar.variant !== 'native' && scrollbar.vertical.visible && (React.createElement("div", { className: 'bgrid-vertical-scrollbar-area', style: {
                     top: 0,
@@ -2222,7 +2277,7 @@ function Table(props) {
                         event.stopPropagation();
                     }
                 } },
-                React.createElement(ScrollPlane, { style: { height: scrollPlaneHeight, minWidth: scrollPlaneMinWidth } },
+                React.createElement(ScrollPlane, { style: { height: scrollPlaneHeight, minWidth: scrollPlaneMinWidth }, "data-bgrid-virtual-scroll-window": virtualScrollWindowMetrics.enabled ? 'true' : undefined, "data-bgrid-logical-height": virtualScrollWindowMetrics.logicalContentHeight, "data-bgrid-physical-height": virtualScrollWindowMetrics.physicalContentHeight, "data-bgrid-logical-scroll-top": Math.round(scrollTop), "data-bgrid-virtual-scroll-base": virtualScrollWindowMetrics.enabled ? Math.round(virtualScrollBase) : undefined },
                     React.createElement(HeaderContainer, { style: { height: headerHeight, top: 0 }, role: 'rfdg-header-container' },
                         (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenHeader, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-header' },
                             React.createElement(TableHeadFrozen_1.default, { container: containerRef }))),
@@ -2233,7 +2288,7 @@ function Table(props) {
                             React.createElement(TableSummaryFronzen_1.TableSummaryFrozen, { position: 'top' }))),
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary_1.TableSummary, { position: 'top' })))),
-                    React.createElement("div", { className: 'bgrid-body-scroll-content', style: { height: frozenRowsHeight + visibleScrollableRows.scrollContentHeight } },
+                    React.createElement("div", { className: 'bgrid-body-scroll-content', style: { height: virtualScrollWindowMetrics.physicalContentHeight } },
                         frozenRowCount > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-layer', style: { height: frozenRowsHeight, top: stickyTopHeight }, "data-bgrid-row-band": 'frozen' },
                             (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-left bgrid-frozen-column-boundary', style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-rows-left' },
                                 React.createElement(TableBodyFrozen_1.default, { scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top-frozen', quadrant: 'top-left', allowRowReorder: false }),
@@ -2241,17 +2296,19 @@ function Table(props) {
                             React.createElement("div", { className: 'bgrid-frozen-rows-main', style: { left: frozenColumnsWidth }, role: 'rfdg-frozen-rows-main' },
                                 React.createElement(TableBody_1.default, { scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
                                 renderSelectionOverlay('top-main')))),
-                        React.createElement("div", { className: 'bgrid-scrollable-rows-layer', style: { height: visibleScrollableRows.scrollContentHeight }, "data-bgrid-row-band": 'scrollable' },
+                        React.createElement("div", { className: 'bgrid-scrollable-rows-layer', style: { height: physicalScrollableRowsHeight }, "data-bgrid-row-band": 'scrollable' },
                             (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenScrollContent, { style: {
                                     width: frozenColumnsWidth,
-                                    height: visibleScrollableRows.scrollContentHeight,
+                                    height: physicalScrollableRowsHeight,
                                 }, role: 'rfdg-frozen-scroll-container' },
                                 React.createElement(TableBodyFrozen_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, style: frozenScrollableBodyStyle, quadrant: 'body-left', onRowReorderPointerDown: rowReorderController.onPointerDown, onRowReorderKeyDown: rowReorderController.onKeyDown }),
                                 renderSelectionOverlay('body-left'))),
                             React.createElement(ScrollContent, { style: {
                                     left: frozenColumnsWidth,
-                                    paddingTop: visibleScrollableRows.paddingTop,
-                                    height: visibleScrollableRows.scrollContentHeight,
+                                    paddingTop: virtualScrollWindowMetrics.enabled
+                                        ? visibleScrollableRows.paddingTop - virtualScrollBase
+                                        : visibleScrollableRows.paddingTop,
+                                    height: physicalScrollableRowsHeight,
                                 } },
                                 React.createElement(TableBody_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
                                 renderSelectionOverlay('body-main')))),
@@ -2261,7 +2318,7 @@ function Table(props) {
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary_1.TableSummary, { position: 'bottom' })))))),
             React.createElement(BodyViewport, { ref: bodyContainerRef, style: { top: stickyTopHeight, height: contentBodyHeight }, "data-last": !page ? 'true' : undefined },
-                ((_4 = rowReorderController.preview) === null || _4 === void 0 ? void 0 : _4.visible) && (React.createElement("div", { className: 'bgrid-row-reorder-preview', "data-bgrid-row-reorder-phase": rowReorderController.preview.phase, "aria-hidden": 'true' }, rowReorderController.preview.text)),
+                ((_5 = rowReorderController.preview) === null || _5 === void 0 ? void 0 : _5.visible) && (React.createElement("div", { className: 'bgrid-row-reorder-preview', "data-bgrid-row-reorder-phase": rowReorderController.preview.phase, "aria-hidden": 'true' }, rowReorderController.preview.text)),
                 React.createElement(Loading_1.default, { active: !!spinning, size: 'small' })),
             React.createElement("div", { className: 'bgrid-visually-hidden', role: 'status', "aria-live": 'polite', "aria-atomic": 'true' }, rowReorderController.announcement),
             React.createElement(CellTextEditorGateway_1.CellTextEditorGateway, { containerRef: containerRef }),
@@ -2343,7 +2400,7 @@ function getCellPositionFromPointer(_a) {
     var rowIndex = metrics.frozenRowCount > 0 && clientY < frozenRowsBottom
         ? (0, coordinate_1.clamp)(Math.floor((clientY - bodyRect.top) / metrics.trHeight), 0, metrics.frozenRowCount - 1)
         : (0, coordinate_1.clamp)(metrics.frozenRowCount +
-            Math.floor((scrollContainer.scrollTop +
+            Math.floor((metrics.scrollTop +
                 (0, coordinate_1.clamp)(clientY - scrollRect.top, 0, Math.max(scrollContainer.clientHeight - 1, 0))) /
                 metrics.trHeight), 0, metrics.dataLength - 1);
     var columnIndex = getColumnIndexFromPointer({