beautiful-grid 1.0.3 → 1.0.5

package/README.md

@@ -5,7 +5,7 @@
 [![NPM version](https://img.shields.io/npm/v/beautiful-grid.svg?style=flat)](https://npmjs.org/package/beautiful-grid)
 [![NPM downloads](https://img.shields.io/npm/dm/beautiful-grid.svg?style=flat)](https://npmjs.org/package/beautiful-grid)
 [![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](LICENSE)
-[![Coverage](https://img.shields.io/badge/coverage-85.02%25-brightgreen.svg)](https://github.com/axisj/beautiful-grid/actions/workflows/tests.yml)
+[![Coverage](https://img.shields.io/badge/coverage-85.63%25-brightgreen.svg)](https://github.com/axisj/beautiful-grid/actions/workflows/tests.yml)
 
 BeautifulGrid is a high-performance, feature-packed, and beautifully designed open-source React Data Grid for data-heavy business applications. It combines zero-runtime-CSS styling with virtual scrolling, spreadsheet-like cell selection and clipboard operations, built-in and plugin cell editing, multi-level grouped headers, filtering & sorting toolboxes, server/client pagination, pivot table transforms, row reordering, and flexible theming.
 

package/cjs/BGrid.js

@@ -79,7 +79,7 @@ var utils_1 = require("./utils");
 var store_1 = require("./store");
 function BGrid(_a) {
     var _b, _c, _d;
-    var width = _a.width, height = _a.height, _e = _a.headerHeight, headerHeight = _e === void 0 ? 30 : _e, footerHeight = _a.footerHeight, _f = _a.summaryHeight, summaryHeight = _f === void 0 ? 30 : _f, _g = _a.itemHeight, itemHeight = _g === void 0 ? 15 : _g, _h = _a.itemPadding, itemPadding = _h === void 0 ? 7 : _h, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _j = _a.frozenColumnIndex, frozenColumnIndex = _j === void 0 ? 0 : _j, _k = _a.frozenRowCount, frozenRowCount = _k === void 0 ? 0 : _k, _l = _a.data, data = _l === void 0 ? [] : _l, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _m = _a.scrollTop, scrollTop = _m === void 0 ? 0 : _m, _o = _a.scrollLeft, scrollLeft = _o === void 0 ? 0 : _o, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _p = _a.loading, loading = _p === void 0 ? false : _p, spinning = _a.spinning, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _q = _a.editTrigger, editTrigger = _q === void 0 ? 'dblclick' : _q, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
+    var ref = _a.ref, width = _a.width, height = _a.height, _e = _a.headerHeight, headerHeight = _e === void 0 ? 30 : _e, footerHeight = _a.footerHeight, _f = _a.summaryHeight, summaryHeight = _f === void 0 ? 30 : _f, _g = _a.itemHeight, itemHeight = _g === void 0 ? 15 : _g, _h = _a.itemPadding, itemPadding = _h === void 0 ? 7 : _h, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _j = _a.frozenColumnIndex, frozenColumnIndex = _j === void 0 ? 0 : _j, _k = _a.frozenRowCount, frozenRowCount = _k === void 0 ? 0 : _k, _l = _a.data, data = _l === void 0 ? [] : _l, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _m = _a.scrollTop, scrollTop = _m === void 0 ? 0 : _m, _o = _a.scrollLeft, scrollLeft = _o === void 0 ? 0 : _o, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _p = _a.loading, loading = _p === void 0 ? false : _p, spinning = _a.spinning, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _q = _a.editTrigger, editTrigger = _q === void 0 ? 'dblclick' : _q, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
     var warnedSearchControlledRef = React.useRef({ open: false, query: false, pivotContextMenu: false });
     var pivotData = React.useMemo(function () {
         return (0, utils_1.createPivotData)({
@@ -475,7 +475,7 @@ function BGrid(_a) {
         initialShowBottomBar,
     ]);
     return (React.createElement(store_1.AppStoreProvider, { initialState: initialStoreState },
-        React.createElement(Table_1.default, { columns: computedColumns,
+        React.createElement(Table_1.default, { ref: ref, columns: computedColumns,
             columnsGroup: resolvedColumnsGroup,
             columnGroups: resolvedColumnGroups,
             onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,

package/cjs/components/Table.js

@@ -163,12 +163,13 @@ var LazyGridOptionalSurfaces = React.lazy(function () {
     }); });
 });
 function Table(props) {
+    var _a;
     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 _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, _6;
     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;
+    var cellSelectionEnabled = (_b = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _b !== void 0 ? _b : true;
     // [Selector Group 1] Layout & Dimensions - 레이아웃 차원
-    var _5 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _7 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         width: s.width,
         height: s.height,
         containerBorderWidth: s.containerBorderWidth,
@@ -176,30 +177,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 = _7.width, height = _7.height, containerBorderWidth = _7.containerBorderWidth, className = _7.className, style = _7.style, itemHeight = _7.itemHeight, itemPadding = _7.itemPadding;
     // [Selector Group 2] Header, Footer, Summary - 헤더/푸터/요약
-    var _6 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _8 = (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 = _8.headerHeight, footerHeight = _8.footerHeight, bottomBarHeight = _8.bottomBarHeight, summaryHeight = _8.summaryHeight;
     // [Selector Group 3] Scroll State - 스크롤 상태
-    var _7 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _9 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         scrollLeft: s.scrollLeft,
         scrollTop: s.scrollTop,
-    }); })), scrollLeft = _7.scrollLeft, scrollTop = _7.scrollTop;
+    }); })), scrollLeft = _9.scrollLeft, scrollTop = _9.scrollTop;
     // [Selector Group 4] Content, Columns, Data - 컨텐츠 관련
-    var _8 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _10 = (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 = _10.contentBodyHeight, columns = _10.columns, data = _10.data, frozenColumnsWidth = _10.frozenColumnsWidth, frozenRowCount = _10.frozenRowCount, frozenRowsHeight = _10.frozenRowsHeight;
     // [Selector Group 4-1] Cell selection & navigation - 셀 선택 및 내비게이션
-    var _9 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         cellSelectionRange: s.cellSelectionRange,
         cellSelectionRanges: s.cellSelectionRanges,
         activeCell: s.activeCell,
@@ -208,9 +209,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 = _11.cellSelectionRange, cellSelectionRanges = _11.cellSelectionRanges, activeCell = _11.activeCell, activeCellHost = _11.activeCellHost, cellNavigationOptions = _11.cellNavigationOptions, editItemIndex = _11.editItemIndex, editable = _11.editable, handleClick = _11.handleClick;
     // [Selector Group 5] State - 상태
-    var _10 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _12 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         rowChecked: s.rowChecked,
         page: s.page,
         loading: s.loading,
@@ -220,8 +221,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 = _12.rowChecked, page = _12.page, loading = _12.loading, spinning = _12.spinning, showLineNumber = _12.showLineNumber, summary = _12.summary, scrollbar = _12.scrollbar, status = _12.status, pagination = _12.pagination;
+    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         searchOpen: s.searchOpen,
         searchOptions: s.searchOptions,
         contextMenuOptions: s.contextMenuOptions,
@@ -230,9 +231,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 = _13.searchOpen, searchOptions = _13.searchOptions, contextMenuOptions = _13.contextMenuOptions, activeSearchMatchIndex = _13.activeSearchMatchIndex, searchMatches = _13.searchMatches, storeSourceIndexByVisibleIndex = _13.storeSourceIndexByVisibleIndex, storeRowKey = _13.storeRowKey, cellInteractionSession = _13.cellInteractionSession;
     // [Selector Group 6] State Setters - 차원 설정자
-    var _12 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _14 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setHeight: s.setHeight,
         setWidth: s.setWidth,
         setContentBodyHeight: s.setContentBodyHeight,
@@ -245,9 +246,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 = _14.setHeight, setWidth = _14.setWidth, setContentBodyHeight = _14.setContentBodyHeight, setDisplayItemCount = _14.setDisplayItemCount, setHeaderHeight = _14.setHeaderHeight, setFooterHeight = _14.setFooterHeight, setBottomBarHeight = _14.setBottomBarHeight, setSummaryHeight = _14.setSummaryHeight, setItemHeight = _14.setItemHeight, setItemPadding = _14.setItemPadding, setLoading = _14.setLoading, setSpinning = _14.setSpinning;
     // [Selector Group 7] Data & Column Setters - 데이터/열 설정자
-    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setData: s.setData,
         setSourceData: s.setSourceData,
         setProcessedData: s.setProcessedData,
@@ -258,9 +259,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 = _15.setData, setSourceData = _15.setSourceData, setProcessedData = _15.setProcessedData, setColumns = _15.setColumns, setColumnsGroup = _15.setColumnsGroup, setColumnGroups = _15.setColumnGroups, setFrozenColumnsWidth = _15.setFrozenColumnsWidth, setFrozenColumnIndex = _15.setFrozenColumnIndex, setFrozenRowCount = _15.setFrozenRowCount, setFrozenRowsHeight = _15.setFrozenRowsHeight;
     // [Selector Group 8] Row & Sort Setters - 행/정렬 설정자
-    var _14 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setRowChecked: s.setRowChecked,
         setCheckedIndexesMap: s.setCheckedIndexesMap,
         setSort: s.setSort,
@@ -277,9 +278,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 = _16.setRowChecked, setCheckedIndexesMap = _16.setCheckedIndexesMap, setSort = _16.setSort, setSortParams = _16.setSortParams, setDataQuery = _16.setDataQuery, setDataControl = _16.setDataControl, setIcons = _16.setIcons, setActiveToolbox = _16.setActiveToolbox, setRowKey = _16.setRowKey, setFocusedRowKey = _16.setFocusedRowKey, setEditItem = _16.setEditItem, setSearchOptions = _16.setSearchOptions, setContextMenuOptions = _16.setContextMenuOptions, requestSearchOpen = _16.requestSearchOpen, openContextMenu = _16.openContextMenu, commitCheckboxCell = _16.commitCheckboxCell;
     // [Selector Group 9] Pagination & Display Setters - 페이지/표시 설정자
-    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setPage: s.setPage,
         setDisplayPaginationLength: s.setDisplayPaginationLength,
         setShowLineNumber: s.setShowLineNumber,
@@ -295,9 +296,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 = _17.setPage, setDisplayPaginationLength = _17.setDisplayPaginationLength, setShowLineNumber = _17.setShowLineNumber, setMsg = _17.setMsg, setRowClassName = _17.setRowClassName, setCellMergeOptions = _17.setCellMergeOptions, setVariant = _17.setVariant, setSummary = _17.setSummary, setColumnSortable = _17.setColumnSortable, setReorder = _17.setReorder, setClassName = _17.setClassName, setStyle = _17.setStyle, setScrollbar = _17.setScrollbar, setStatus = _17.setStatus, setPagination = _17.setPagination;
     // [Selector Group 10] Edit & Event Setters - 편집/이벤트 설정자
-    var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _18 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setEditable: s.setEditable,
         setEditTrigger: s.setEditTrigger,
         setOnClick: s.setOnClick,
@@ -306,8 +307,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 = _18.setEditable, setEditTrigger = _18.setEditTrigger, setOnClick = _18.setOnClick, setOnChangeColumns = _18.setOnChangeColumns, setOnChangeData = _18.setOnChangeData, setOnLoadMore = _18.setOnLoadMore, setScroll = _18.setScroll, setInitialized = _18.setInitialized;
+    var _19 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setCellSelectionRanges: s.setCellSelectionRanges,
         setCellSelecting: s.setCellSelecting,
         clearCellSelection: s.clearCellSelection,
@@ -315,9 +316,10 @@ 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 = _19.setCellSelectionRanges, setCellSelecting = _19.setCellSelecting, clearCellSelection = _19.clearCellSelection, setActiveCell = _19.setActiveCell, moveActiveCell = _19.moveActiveCell, setCellNavigationOptions = _19.setCellNavigationOptions, syncActiveCellToBounds = _19.syncActiveCellToBounds;
     var trHeight = itemHeight + itemPadding * 2;
     var scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
+    var scrollOverscanRows = Math.max(KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE, Math.ceil(scrollableBodyHeight / Math.max(trHeight, 1)));
     var mainViewportWidth = Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0);
     var logicalBodyContentHeight = data.length * trHeight;
     var virtualScrollWindowMetrics = React.useMemo(function () {
@@ -327,7 +329,7 @@ function Table(props) {
             enabled: scrollbar.variant !== 'native',
         });
     }, [contentBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
-    var _18 = __read(React.useState(0), 2), virtualScrollBase = _18[0], setVirtualScrollBase = _18[1];
+    var _20 = __read(React.useState(0), 2), virtualScrollBase = _20[0], setVirtualScrollBase = _20[1];
     var virtualScrollBaseRef = (0, react_1.useRef)(0);
     var containerRef = (0, react_1.useRef)(null);
     var searchPopoverRef = (0, react_1.useRef)(null);
@@ -337,7 +339,8 @@ function Table(props) {
     var logicalVerticalScrollState = React.useMemo(function () { return ({
         scrollTop: scrollTop,
         scrollHeight: virtualScrollWindowMetrics.logicalContentHeight,
-    }); }, [scrollTop, virtualScrollWindowMetrics.logicalContentHeight]);
+        maxScrollTop: virtualScrollWindowMetrics.logicalMaxScroll,
+    }); }, [scrollTop, virtualScrollWindowMetrics.logicalContentHeight, virtualScrollWindowMetrics.logicalMaxScroll]);
     var hasMultiCellSelection = React.useMemo(function () {
         return cellSelectionRanges.length > 1 ||
             cellSelectionRanges.some(function (range) {
@@ -447,9 +450,11 @@ function Table(props) {
             rowHeight: trHeight,
             frozenRowCount: frozenRowCount,
             totalRowCount: data.length,
+            overscan: scrollOverscanRows,
+            leadingOverscan: scrollOverscanRows,
             windowSize: ((_a = props.reorder) === null || _a === void 0 ? void 0 : _a.enabled) ? 1 : KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE,
         });
-    }, [data.length, frozenRowCount, (_b = props.reorder) === null || _b === void 0 ? void 0 : _b.enabled, scrollTop, scrollableBodyHeight, trHeight]);
+    }, [data.length, frozenRowCount, (_c = props.reorder) === null || _c === void 0 ? void 0 : _c.enabled, scrollOverscanRows, scrollTop, scrollableBodyHeight, trHeight]);
     var frozenRowRange = React.useMemo(function () { return ({ startRowIndex: 0, endRowIndex: frozenRowCount }); }, [frozenRowCount]);
     var scrollableRowRange = React.useMemo(function () { return ({
         startRowIndex: visibleScrollableRows.startRowIndex,
@@ -617,6 +622,15 @@ function Table(props) {
     }, []);
     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 _21 = __read(React.useState(null), 2), rowScrollRequest = _21[0], setRowScrollRequest = _21[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);
@@ -627,7 +641,7 @@ function Table(props) {
     var selectionMetricsRef = (0, react_1.useRef)({
         columns: columns,
         dataLength: data.length,
-        frozenColumnIndex: (_c = props.frozenColumnIndex) !== null && _c !== void 0 ? _c : 0,
+        frozenColumnIndex: (_d = props.frozenColumnIndex) !== null && _d !== void 0 ? _d : 0,
         frozenRowCount: frozenRowCount,
         frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
         frozenRowsHeight: frozenRowsHeight,
@@ -1489,7 +1503,7 @@ function Table(props) {
         setFrozenColumnIndex((_d = props.frozenColumnIndex) !== null && _d !== void 0 ? _d : 0);
     }, [
         props.frozenColumnIndex,
-        (_d = props.reorder) === null || _d === void 0 ? void 0 : _d.enabled,
+        (_e = props.reorder) === null || _e === void 0 ? void 0 : _e.enabled,
         showLineNumber,
         rowChecked,
         itemHeight,
@@ -1505,7 +1519,7 @@ function Table(props) {
         var nextFrozenRowCount = Math.min(Math.max(Math.floor((_c = props.frozenRowCount) !== null && _c !== void 0 ? _c : 0), 0), rowCount);
         setFrozenRowCount(nextFrozenRowCount);
         setFrozenRowsHeight(nextFrozenRowCount * trHeight);
-    }, [data.length, (_e = props.data) === null || _e === void 0 ? void 0 : _e.length, props.frozenRowCount, setFrozenRowCount, setFrozenRowsHeight, trHeight]);
+    }, [data.length, (_f = props.data) === null || _f === void 0 ? void 0 : _f.length, props.frozenRowCount, setFrozenRowCount, setFrozenRowsHeight, trHeight]);
     // [Group 5] Data & columns
     (0, react_1.useEffect)(function () {
         if (props.data !== undefined &&
@@ -1525,6 +1539,7 @@ function Table(props) {
                 setSourceData(props.sourceData);
             }
         }
+        syncedDataPropRef.current = props.data;
     }, [
         props.data,
         props.sourceData,
@@ -1595,19 +1610,23 @@ function Table(props) {
         }
     }, [
         props.page,
-        (_f = props.page) === null || _f === void 0 ? void 0 : _f.currentPage,
-        (_g = props.page) === null || _g === void 0 ? void 0 : _g.loading,
-        (_h = props.page) === null || _h === void 0 ? void 0 : _h.pageSize,
-        (_j = props.page) === null || _j === void 0 ? void 0 : _j.totalPages,
-        (_k = props.page) === null || _k === void 0 ? void 0 : _k.totalElements,
-        (_l = props.page) === null || _l === void 0 ? void 0 : _l.onChange,
-        (_m = props.page) === null || _m === void 0 ? void 0 : _m.displayPaginationLength,
+        (_g = props.page) === null || _g === void 0 ? void 0 : _g.currentPage,
+        (_h = props.page) === null || _h === void 0 ? void 0 : _h.loading,
+        (_j = props.page) === null || _j === void 0 ? void 0 : _j.pageSize,
+        (_k = props.page) === null || _k === void 0 ? void 0 : _k.totalPages,
+        (_l = props.page) === null || _l === void 0 ? void 0 : _l.totalElements,
+        (_m = props.page) === null || _m === void 0 ? void 0 : _m.onChange,
+        (_o = props.page) === null || _o === void 0 ? void 0 : _o.displayPaginationLength,
         setPage,
         setDisplayPaginationLength,
     ]);
+    var previousPageRef = (0, react_1.useRef)((_p = props.page) === null || _p === void 0 ? void 0 : _p.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, (_q = props.page) === null || _q === void 0 ? void 0 : _q.currentPage]);
     // [Group 8] Row key & selection
     (0, react_1.useEffect)(function () {
         setRowKey(props.rowKey);
@@ -1679,10 +1698,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,
+        (_s = (_r = props.cellNavigationOptions) === null || _r === void 0 ? void 0 : _r.activeCell) === null || _s === void 0 ? void 0 : _s.columnIndex,
+        (_u = (_t = props.cellNavigationOptions) === null || _t === void 0 ? void 0 : _t.activeCell) === null || _u === void 0 ? void 0 : _u.rowIndex,
+        (_w = (_v = props.cellNavigationOptions) === null || _v === void 0 ? void 0 : _v.defaultActiveCell) === null || _w === void 0 ? void 0 : _w.columnIndex,
+        (_y = (_x = props.cellNavigationOptions) === null || _x === void 0 ? void 0 : _x.defaultActiveCell) === null || _y === void 0 ? void 0 : _y.rowIndex,
         syncActiveCellToBounds,
     ]);
     // setInitialized + DOM event bindings
@@ -1691,7 +1710,7 @@ 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 });
         }
         return function () {
@@ -1704,17 +1723,55 @@ 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, setInitialized]);
     React.useLayoutEffect(function () {
         var _a, _b;
         if (!scrollContainerRef.current)
             return;
-        var nextTop = (_a = props.scrollTop) !== null && _a !== void 0 ? _a : latestScrollRef.current.top;
-        var nextLeft = (_b = props.scrollLeft) !== null && _b !== void 0 ? _b : latestScrollRef.current.left;
+        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, props.scrollLeft, props.scrollTop]);
+    }, [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 };
@@ -1766,8 +1823,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 = (_0 = (_z = props.cellSelectionOptions) === null || _z === void 0 ? void 0 : _z.clearOnEscape) !== null && _0 !== void 0 ? _0 : true;
+    var clearCellSelectionOnOutsideClick = (_2 = (_1 = props.cellSelectionOptions) === null || _1 === void 0 ? void 0 : _1.clearOnOutsideClick) !== null && _2 !== void 0 ? _2 : true;
     var keyboardRuntimeRef = (0, react_1.useRef)({
         activeCell: activeCell,
         cellInteractionSession: cellInteractionSession,
@@ -1785,7 +1842,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_1 = props.frozenColumnIndex) !== null && _1 !== void 0 ? _1 : 0,
+        frozenColumnIndex: (_3 = props.frozenColumnIndex) !== null && _3 !== void 0 ? _3 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -1818,7 +1875,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_2 = props.frozenColumnIndex) !== null && _2 !== void 0 ? _2 : 0,
+        frozenColumnIndex: (_4 = props.frozenColumnIndex) !== null && _4 !== void 0 ? _4 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -2200,14 +2257,14 @@ function Table(props) {
         };
     }, []);
     return (React.createElement(EditorPortalRoot_1.EditorPortalContext.Provider, { value: editorPortalContext },
-        React.createElement(Container, { ref: containerRef, role: 'grid', style: __assign(__assign({}, style), { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }), className: className, tabIndex: 0, onFocus: function (event) {
+        React.createElement(Container, { ref: containerRef, role: 'grid', style: __assign(__assign({}, style), (_a = { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }, _a['--bgrid-virtual-row-height'] = "".concat(trHeight, "px"), _a)), className: className, tabIndex: 0, onFocus: function (event) {
                 if (event.target !== event.currentTarget)
                     return;
                 var gateway = event.currentTarget.querySelector('[data-bgrid-text-editor-gateway="true"]');
                 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": ((_5 = props.frozenColumnIndex) !== null && _5 !== void 0 ? _5 : 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,
@@ -2236,6 +2293,11 @@ 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-virtual-row-backdrop', "aria-hidden": 'true', style: {
+                            top: stickyTopHeight,
+                            height: contentBodyHeight,
+                            marginBottom: -contentBodyHeight,
+                        } }),
                     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' },
@@ -2266,7 +2328,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)),
+                ((_6 = rowReorderController.preview) === null || _6 === void 0 ? void 0 : _6.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 }),

package/cjs/utils/coordinate.js

@@ -53,8 +53,8 @@ function getRowBottom(rowIndex, rowHeight) {
     return (rowIndex + 1) * rowHeight;
 }
 function ensureCellVisible(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var cell = _a.cell, scrollContainer = _a.scrollContainer, _k = _a.frozenColumnCount, frozenColumnCount = _k === void 0 ? 0 : _k, _l = _a.frozenRowCount, frozenRowCount = _l === void 0 ? 0 : _l, columns = _a.columns, rowHeight = _a.rowHeight, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var cell = _a.cell, scrollContainer = _a.scrollContainer, _l = _a.frozenColumnCount, frozenColumnCount = _l === void 0 ? 0 : _l, _m = _a.frozenRowCount, frozenRowCount = _m === void 0 ? 0 : _m, columns = _a.columns, rowHeight = _a.rowHeight, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
     var currentScrollTop = (_c = (_b = verticalScrollState === null || verticalScrollState === void 0 ? void 0 : verticalScrollState.scrollTop) !== null && _b !== void 0 ? _b : scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) !== null && _c !== void 0 ? _c : 0;
     var currentScrollLeft = (_d = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollLeft) !== null && _d !== void 0 ? _d : 0;
     var nextScrollTop = currentScrollTop;
@@ -66,10 +66,10 @@ function ensureCellVisible(_a) {
         var rowBottom = getRowBottom(targetRowIndex, rowHeight);
         var clientHeight = scrollContainer.clientHeight;
         var scrollHeight = (_e = verticalScrollState === null || verticalScrollState === void 0 ? void 0 : verticalScrollState.scrollHeight) !== null && _e !== void 0 ? _e : scrollContainer.scrollHeight;
-        var maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+        var maxScrollTop = Math.max(0, (_f = verticalScrollState === null || verticalScrollState === void 0 ? void 0 : verticalScrollState.maxScrollTop) !== null && _f !== void 0 ? _f : scrollHeight - clientHeight);
         if (clientHeight > 0) {
-            var topInset = clamp((_f = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.top) !== null && _f !== void 0 ? _f : 0, 0, clientHeight);
-            var bottomInset = clamp((_g = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.bottom) !== null && _g !== void 0 ? _g : 0, 0, Math.max(clientHeight - topInset, 0));
+            var topInset = clamp((_g = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.top) !== null && _g !== void 0 ? _g : 0, 0, clientHeight);
+            var bottomInset = clamp((_h = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.bottom) !== null && _h !== void 0 ? _h : 0, 0, Math.max(clientHeight - topInset, 0));
             var viewportTop = currentScrollTop + topInset;
             var viewportBottom = currentScrollTop + clientHeight - bottomInset;
             if (rowTop < viewportTop) {
@@ -90,8 +90,8 @@ function ensureCellVisible(_a) {
         var scrollWidth = scrollContainer.scrollWidth;
         var maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
         if (clientWidth > 0) {
-            var leftInset = clamp((_h = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.left) !== null && _h !== void 0 ? _h : 0, 0, clientWidth);
-            var rightInset = clamp((_j = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.right) !== null && _j !== void 0 ? _j : 0, 0, Math.max(clientWidth - leftInset, 0));
+            var leftInset = clamp((_j = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.left) !== null && _j !== void 0 ? _j : 0, 0, clientWidth);
+            var rightInset = clamp((_k = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.right) !== null && _k !== void 0 ? _k : 0, 0, Math.max(clientWidth - leftInset, 0));
             var viewportLeft = currentScrollLeft + leftInset;
             var viewportRight = currentScrollLeft + clientWidth - rightInset;
             var visibleWidth = Math.max(clientWidth - leftInset - rightInset, 0);

package/cjs/utils/getVisibleScrollableRowRange.js

@@ -6,7 +6,7 @@ exports.getVisibleScrollableRowRange = getVisibleScrollableRowRange;
  * The returned end index is exclusive.
  */
 function getVisibleScrollableRowRange(_a) {
-    var scrollTop = _a.scrollTop, viewportHeight = _a.viewportHeight, rowHeight = _a.rowHeight, frozenRowCount = _a.frozenRowCount, totalRowCount = _a.totalRowCount, _b = _a.overscan, overscan = _b === void 0 ? 1 : _b, _c = _a.windowSize, windowSize = _c === void 0 ? 1 : _c;
+    var scrollTop = _a.scrollTop, viewportHeight = _a.viewportHeight, rowHeight = _a.rowHeight, frozenRowCount = _a.frozenRowCount, totalRowCount = _a.totalRowCount, _b = _a.overscan, overscan = _b === void 0 ? 1 : _b, _c = _a.leadingOverscan, leadingOverscan = _c === void 0 ? 0 : _c, _d = _a.windowSize, windowSize = _d === void 0 ? 1 : _d;
     var safeRowHeight = Math.max(rowHeight, 1);
     var safeTotal = Math.max(Math.floor(totalRowCount), 0);
     var safeFrozen = Math.min(Math.max(Math.floor(frozenRowCount), 0), safeTotal);
@@ -14,11 +14,12 @@ function getVisibleScrollableRowRange(_a) {
     var relativeStart = Math.min(Math.max(Math.floor(Math.max(scrollTop, 0) / safeRowHeight), 0), scrollableRowCount);
     var safeWindowSize = Math.max(Math.floor(windowSize), 1);
     var windowStart = Math.floor(relativeStart / safeWindowSize) * safeWindowSize;
-    var visibleCount = Math.max(Math.ceil(Math.max(viewportHeight, 0) / safeRowHeight) + Math.max(overscan, 0), 0);
+    var renderStart = Math.max(windowStart - Math.max(Math.floor(leadingOverscan), 0), 0);
+    var visibleCount = Math.max(Math.ceil(Math.max(viewportHeight, 0) / safeRowHeight) + Math.max(Math.floor(overscan), 0), 0);
     return {
-        startRowIndex: safeFrozen + windowStart,
+        startRowIndex: safeFrozen + renderStart,
         endRowIndex: Math.min(safeFrozen + windowStart + visibleCount + safeWindowSize - 1, safeTotal),
-        paddingTop: windowStart * safeRowHeight,
+        paddingTop: renderStart * safeRowHeight,
         scrollContentHeight: scrollableRowCount * safeRowHeight,
     };
 }

package/esm/BGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Table from './components/Table';
 import { createPivotData, buildHeaderMatrix, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, processDataQuery, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, shouldRenderBottomBar, } from './utils';
 import { AppStoreProvider } from './store';
-export function BGrid({ width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, searchOptions, contextMenuOptions, }) {
+export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, searchOptions, contextMenuOptions, }) {
     const warnedSearchControlledRef = React.useRef({ open: false, query: false, pivotContextMenu: false });
     const pivotData = React.useMemo(() => {
         return createPivotData({
@@ -410,7 +410,7 @@ export function BGrid({ width, height, headerHeight = 30, footerHeight, summaryH
         initialShowBottomBar,
     ]);
     return (React.createElement(AppStoreProvider, { initialState: initialStoreState },
-        React.createElement(Table, { columns: computedColumns,
+        React.createElement(Table, { ref: ref, columns: computedColumns,
             columnsGroup: resolvedColumnsGroup,
             columnGroups: resolvedColumnGroups,
             onChangeColumns: resolvedOnChangeColumns,

package/esm/components/Table.js

@@ -182,6 +182,7 @@ function Table(props) {
     })));
     const trHeight = itemHeight + itemPadding * 2;
     const scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
+    const scrollOverscanRows = Math.max(KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE, Math.ceil(scrollableBodyHeight / Math.max(trHeight, 1)));
     const mainViewportWidth = Math.max(width - (frozenColumnsWidth ?? 0), 0);
     const logicalBodyContentHeight = data.length * trHeight;
     const virtualScrollWindowMetrics = React.useMemo(() => getVirtualScrollWindowMetrics({
@@ -199,7 +200,8 @@ function Table(props) {
     const logicalVerticalScrollState = React.useMemo(() => ({
         scrollTop,
         scrollHeight: virtualScrollWindowMetrics.logicalContentHeight,
-    }), [scrollTop, virtualScrollWindowMetrics.logicalContentHeight]);
+        maxScrollTop: virtualScrollWindowMetrics.logicalMaxScroll,
+    }), [scrollTop, virtualScrollWindowMetrics.logicalContentHeight, virtualScrollWindowMetrics.logicalMaxScroll]);
     const hasMultiCellSelection = React.useMemo(() => cellSelectionRanges.length > 1 ||
         cellSelectionRanges.some(range => {
             const normalized = normalizeCellSelectionRange(range);
@@ -298,8 +300,10 @@ function Table(props) {
         rowHeight: trHeight,
         frozenRowCount,
         totalRowCount: data.length,
+        overscan: scrollOverscanRows,
+        leadingOverscan: scrollOverscanRows,
         windowSize: props.reorder?.enabled ? 1 : KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE,
-    }), [data.length, frozenRowCount, props.reorder?.enabled, scrollTop, scrollableBodyHeight, trHeight]);
+    }), [data.length, frozenRowCount, props.reorder?.enabled, scrollOverscanRows, scrollTop, scrollableBodyHeight, trHeight]);
     const frozenRowRange = React.useMemo(() => ({ startRowIndex: 0, endRowIndex: frozenRowCount }), [frozenRowCount]);
     const scrollableRowRange = React.useMemo(() => ({
         startRowIndex: visibleScrollableRows.startRowIndex,
@@ -465,6 +469,14 @@ function Table(props) {
     }, []);
     const latestScrollRef = useRef({ top: scrollTop, left: scrollLeft });
     const latestCommittedScrollRef = useRef({ top: scrollTop, left: scrollLeft });
+    const scrollPropsRef = useRef({ top: props.scrollTop, left: props.scrollLeft });
+    const syncedDataPropRef = useRef(props.data);
+    const [rowScrollRequest, setRowScrollRequest] = React.useState(null);
+    React.useImperativeHandle(props.ref, () => ({
+        scrollToRow(rowIndex, options) {
+            setRowScrollRequest({ rowIndex, align: options?.align ?? 'nearest' });
+        },
+    }), []);
     const scrollRafRef = useRef(null);
     const scrollIdleTimerRef = useRef(null);
     const selectionAutoScrollRafRef = useRef(null);
@@ -1333,6 +1345,7 @@ function Table(props) {
                 setSourceData(props.sourceData);
             }
         }
+        syncedDataPropRef.current = props.data;
     }, [
         props.data,
         props.sourceData,
@@ -1411,8 +1424,11 @@ function Table(props) {
         setPage,
         setDisplayPaginationLength,
     ]);
+    const previousPageRef = useRef(props.page?.currentPage);
     useEffect(() => {
-        resetScrollPosition('top');
+        if (previousPageRef.current !== props.page?.currentPage)
+            resetScrollPosition('top');
+        previousPageRef.current = props.page?.currentPage;
     }, [resetScrollPosition, props.page?.currentPage]);
     // [Group 8] Row key & selection
     useEffect(() => {
@@ -1497,7 +1513,7 @@ function Table(props) {
         const containerRefCurrent = containerRef.current;
         const scrollContainerRefCurrent = scrollContainerRef?.current;
         if (scrollContainerRefCurrent) {
-            scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
+            scrollContainerRefCurrent.removeEventListener('scroll', onScroll, true);
             scrollContainerRefCurrent.addEventListener('scroll', onScroll, { passive: true, capture: true });
         }
         return () => {
@@ -1510,16 +1526,54 @@ function Table(props) {
                 scrollIdleTimerRef.current = null;
             }
             containerRefCurrent?.removeAttribute('data-bgrid-scrolling');
-            scrollContainerRefCurrent?.removeEventListener('scroll', onScroll);
+            scrollContainerRefCurrent?.removeEventListener('scroll', onScroll, true);
         };
     }, [onScroll, setInitialized]);
     React.useLayoutEffect(() => {
         if (!scrollContainerRef.current)
             return;
-        const nextTop = props.scrollTop ?? latestScrollRef.current.top;
-        const nextLeft = props.scrollLeft ?? latestScrollRef.current.left;
+        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.
+        const nextTop = props.scrollTop !== scrollPropsRef.current.top
+            ? props.scrollTop ?? latestScrollRef.current.top
+            : latestScrollRef.current.top;
+        const nextLeft = props.scrollLeft !== scrollPropsRef.current.left
+            ? props.scrollLeft ?? latestScrollRef.current.left
+            : latestScrollRef.current.left;
+        scrollPropsRef.current = { top: props.scrollTop, left: props.scrollLeft };
         commitScroll(nextTop, nextLeft);
-    }, [commitScroll, props.scrollLeft, props.scrollTop]);
+    }, [commitScroll, data, props.data, props.scrollLeft, props.scrollTop]);
+    React.useLayoutEffect(() => {
+        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);
+        const { rowIndex, align } = rowScrollRequest;
+        if (!Number.isInteger(rowIndex) || rowIndex < frozenRowCount || rowIndex >= data.length)
+            return;
+        if (scrollableBodyHeight <= 0)
+            return;
+        const rowTop = (rowIndex - frozenRowCount) * trHeight;
+        const rowBottom = rowTop + trHeight;
+        const { top, left } = latestScrollRef.current;
+        let 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]);
     useEffect(() => {
         latestScrollRef.current = { top: scrollTop, left: scrollLeft };
         latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
@@ -1999,7 +2053,13 @@ function Table(props) {
         };
     }, []);
     return (React.createElement(EditorPortalContext.Provider, { value: editorPortalContext },
-        React.createElement(Container, { ref: containerRef, role: 'grid', style: { ...style, width, height, borderWidth: `${containerBorderWidth}px` }, className: className, tabIndex: 0, onFocus: event => {
+        React.createElement(Container, { ref: containerRef, role: 'grid', style: {
+                ...style,
+                width,
+                height,
+                borderWidth: `${containerBorderWidth}px`,
+                ['--bgrid-virtual-row-height']: `${trHeight}px`,
+            }, className: className, tabIndex: 0, onFocus: event => {
                 if (event.target !== event.currentTarget)
                     return;
                 const gateway = event.currentTarget.querySelector('[data-bgrid-text-editor-gateway="true"]');
@@ -2035,6 +2095,11 @@ function Table(props) {
                             React.createElement(TableSummaryFrozen, { position: 'top' }))),
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary, { position: 'top' })))),
+                    React.createElement("div", { className: 'bgrid-virtual-row-backdrop', "aria-hidden": 'true', style: {
+                            top: stickyTopHeight,
+                            height: contentBodyHeight,
+                            marginBottom: -contentBodyHeight,
+                        } }),
                     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 ?? 0) > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-left bgrid-frozen-column-boundary', style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-rows-left' },

package/esm/utils/coordinate.js

@@ -53,7 +53,7 @@ export function ensureCellVisible({ cell, scrollContainer, frozenColumnCount = 0
         const rowBottom = getRowBottom(targetRowIndex, rowHeight);
         const clientHeight = scrollContainer.clientHeight;
         const scrollHeight = verticalScrollState?.scrollHeight ?? scrollContainer.scrollHeight;
-        const maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+        const maxScrollTop = Math.max(0, verticalScrollState?.maxScrollTop ?? scrollHeight - clientHeight);
         if (clientHeight > 0) {
             const topInset = clamp(viewportInsets?.top ?? 0, 0, clientHeight);
             const bottomInset = clamp(viewportInsets?.bottom ?? 0, 0, Math.max(clientHeight - topInset, 0));

package/esm/utils/getVisibleScrollableRowRange.js

@@ -2,7 +2,7 @@
  * Maps the scrollable body's physical scroll offset to logical data row indexes.
  * The returned end index is exclusive.
  */
-export function getVisibleScrollableRowRange({ scrollTop, viewportHeight, rowHeight, frozenRowCount, totalRowCount, overscan = 1, windowSize = 1, }) {
+export function getVisibleScrollableRowRange({ scrollTop, viewportHeight, rowHeight, frozenRowCount, totalRowCount, overscan = 1, leadingOverscan = 0, windowSize = 1, }) {
     const safeRowHeight = Math.max(rowHeight, 1);
     const safeTotal = Math.max(Math.floor(totalRowCount), 0);
     const safeFrozen = Math.min(Math.max(Math.floor(frozenRowCount), 0), safeTotal);
@@ -10,11 +10,12 @@ export function getVisibleScrollableRowRange({ scrollTop, viewportHeight, rowHei
     const relativeStart = Math.min(Math.max(Math.floor(Math.max(scrollTop, 0) / safeRowHeight), 0), scrollableRowCount);
     const safeWindowSize = Math.max(Math.floor(windowSize), 1);
     const windowStart = Math.floor(relativeStart / safeWindowSize) * safeWindowSize;
-    const visibleCount = Math.max(Math.ceil(Math.max(viewportHeight, 0) / safeRowHeight) + Math.max(overscan, 0), 0);
+    const renderStart = Math.max(windowStart - Math.max(Math.floor(leadingOverscan), 0), 0);
+    const visibleCount = Math.max(Math.ceil(Math.max(viewportHeight, 0) / safeRowHeight) + Math.max(Math.floor(overscan), 0), 0);
     return {
-        startRowIndex: safeFrozen + windowStart,
+        startRowIndex: safeFrozen + renderStart,
         endRowIndex: Math.min(safeFrozen + windowStart + visibleCount + safeWindowSize - 1, safeTotal),
-        paddingTop: windowStart * safeRowHeight,
+        paddingTop: renderStart * safeRowHeight,
         scrollContentHeight: scrollableRowCount * safeRowHeight,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beautiful-grid",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A beautiful, powerful, open-source React Data Grid.",
   "homepage": "https://bgrid.axisj.com",
   "bugs": {

package/style.css

@@ -1561,6 +1561,25 @@
   background-color: var(--bgrid-body-bg);
 }
 
+/* Safari can advance its native scroll layer before React commits the next
+   virtual-row window. Keep an inexpensive viewport-sized row grid behind the
+   real tables so that compositor gaps retain the table's visual geometry. */
+.bgrid-virtual-row-backdrop {
+  position: sticky;
+  z-index: 0;
+  box-sizing: border-box;
+  min-width: 100%;
+  pointer-events: none;
+  background-color: var(--bgrid-body-bg);
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent calc(var(--bgrid-virtual-row-height, 28px) - 1px),
+    var(--bgrid-border-color-base) calc(var(--bgrid-virtual-row-height, 28px) - 1px),
+    var(--bgrid-border-color-base) var(--bgrid-virtual-row-height, 28px)
+  );
+}
+
 .bgrid-footer-container {
   position: relative;
   z-index: 10;

package/types/BGrid.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BGridProps } from './types';
-export declare function BGrid<T = Record<string, any>>({ width, height, headerHeight, footerHeight, summaryHeight, itemHeight, itemPadding, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, searchOptions, contextMenuOptions, }: BGridProps<T>): React.JSX.Element;
+export declare function BGrid<T = Record<string, any>>({ ref, width, height, headerHeight, footerHeight, summaryHeight, itemHeight, itemPadding, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, searchOptions, contextMenuOptions, }: BGridProps<T>): React.JSX.Element;

package/types/components/Table.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Key } from 'react';
 import { BGridCellNavigationOptions, AppModelColumn, BGridColumnGroup, BGridColumnGroupNode, BGridDataControl, BGridDataItem, BGridDataQuery, BGridPage, BGridProps, BGridRowChecked, BGridSortInfo, BGridSortParam, BGridResolvedScrollbarOptions, BGridResolvedStatusOptions, BGridResolvedPaginationViewOptions } from '../types';
 interface Props<T> {
+    ref?: BGridProps<T>['ref'];
     width?: number;
     height?: number;
     headerHeight?: number;

package/types/types.d.ts

@@ -619,7 +619,20 @@ export interface BGridResolvedStatusOptions extends BGridStatusOptions {
     configured: boolean;
 }
 export type BGridResolvedPaginationViewOptions = Required<Pick<BGridPaginationViewOptions, 'visible'>> & Omit<BGridPaginationViewOptions, 'visible'>;
+export interface BGridScrollToRowOptions {
+    /** Defaults to nearest: scroll only as far as needed to reveal the row. */
+    align?: 'start' | 'center' | 'end' | 'nearest';
+}
+export interface BGridRef {
+    /**
+     * Reveal a zero-based row in the displayed (sorted/filtered) data on the current page.
+     * Runs after pending data updates. Invalid indexes and frozen rows are ignored.
+     * Preserves horizontal scroll, cell focus and selection; does not load other pages.
+     */
+    scrollToRow: (rowIndex: number, options?: BGridScrollToRowOptions) => void;
+}
 export interface BGridProps<T> {
+    ref?: React.Ref<BGridRef>;
     width: number;
     height: number;
     headerHeight?: number;

package/types/utils/coordinate.d.ts

@@ -15,6 +15,7 @@ export interface EnsureCellVisibleParams {
     verticalScrollState?: {
         scrollTop: number;
         scrollHeight: number;
+        maxScrollTop?: number;
     };
     viewportInsets?: {
         top?: number;

package/types/utils/getVisibleScrollableRowRange.d.ts

@@ -5,6 +5,7 @@ export interface VisibleScrollableRowRangeParams {
     frozenRowCount: number;
     totalRowCount: number;
     overscan?: number;
+    leadingOverscan?: number;
     windowSize?: number;
 }
 export interface VisibleScrollableRowRange {
@@ -17,4 +18,4 @@ export interface VisibleScrollableRowRange {
  * Maps the scrollable body's physical scroll offset to logical data row indexes.
  * The returned end index is exclusive.
  */
-export declare function getVisibleScrollableRowRange({ scrollTop, viewportHeight, rowHeight, frozenRowCount, totalRowCount, overscan, windowSize, }: VisibleScrollableRowRangeParams): VisibleScrollableRowRange;
+export declare function getVisibleScrollableRowRange({ scrollTop, viewportHeight, rowHeight, frozenRowCount, totalRowCount, overscan, leadingOverscan, windowSize, }: VisibleScrollableRowRangeParams): VisibleScrollableRowRange;