beautiful-grid 1.0.10 → 1.0.11

package/cjs/BGrid.js

@@ -387,13 +387,11 @@ function BGrid(_a) {
                 includeRows: false,
             });
         }
-        var sourceIndexByVisibleIndex = resolvedData.map(function (_, i) { return i; });
-        var visibleIndexBySourceIndex = new Map(resolvedData.map(function (_, i) { return [i, i]; }));
         return {
             rows: [],
             data: resolvedData,
-            sourceIndexByVisibleIndex: sourceIndexByVisibleIndex,
-            visibleIndexBySourceIndex: visibleIndexBySourceIndex,
+            sourceIndexByVisibleIndex: undefined,
+            visibleIndexBySourceIndex: undefined,
         };
     }, [queryColumns, resolvedData, resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode, resolvedDataQuery, resolvedRowKey]);
     var displayData = processedResult.data;
@@ -403,16 +401,20 @@ function BGrid(_a) {
         : Math.min(Math.max(Math.floor(frozenRowCount), 0), displayData.length);
     var checkedIndexesMap = React.useMemo(function () {
         if ((resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedRowKeys) && resolvedRowKey) {
-            var map_1 = new Map();
-            resolvedRowChecked.checkedRowKeys.forEach(function (key) {
-                var fIndex = resolvedData === null || resolvedData === void 0 ? void 0 : resolvedData.findIndex(function (item, index, obj) {
-                    return (0, utils_1.getCellValueByRowKey)(resolvedRowKey, item.values) === key;
-                });
-                if (fIndex > -1) {
-                    map_1.set(fIndex, true);
+            var remainingKeys = new Set(resolvedRowChecked.checkedRowKeys);
+            var map = new Map();
+            if (remainingKeys.size > 0 && resolvedData) {
+                for (var i = 0; i < resolvedData.length; i++) {
+                    var itemKey = (0, utils_1.getCellValueByRowKey)(resolvedRowKey, resolvedData[i].values);
+                    if (remainingKeys.has(itemKey)) {
+                        map.set(i, true);
+                        remainingKeys.delete(itemKey);
+                        if (remainingKeys.size === 0)
+                            break;
+                    }
                 }
-            });
-            return map_1;
+            }
+            return map;
         }
         if (resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedIndexes) {
             return new Map(resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedIndexes.map(function (id) { return [id, true]; }));
@@ -468,7 +470,7 @@ function BGrid(_a) {
                 containerBorderWidth * 2, 0)
             : 0;
         var displayItemCount = contentBodyHeight > 0 ? Math.ceil(contentBodyHeight / (itemHeight + itemPadding * 2)) : 0;
-        var visibleCheckedCount = processedResult.sourceIndexByVisibleIndex.reduce(function (count, sourceIndex) { return count + (checkedIndexesMap.has(sourceIndex) ? 1 : 0); }, 0);
+        var visibleCheckedCount = (0, utils_1.countVisibleCheckedIndexes)(displayData.length, checkedIndexesMap, processedResult.sourceIndexByVisibleIndex);
         var checkedAll = displayData.length === 0
             ? false
             : visibleCheckedCount === displayData.length

package/cjs/components/Table.js

@@ -138,7 +138,7 @@ var types_1 = require("../types");
 var utils_1 = require("../utils");
 var coordinate_1 = require("../utils/coordinate");
 var Loading_1 = __importDefault(require("./Loading"));
-var TableBody_1 = __importDefault(require("./TableBody"));
+var TableBody_1 = __importStar(require("./TableBody"));
 var TableBodyFrozen_1 = __importDefault(require("./TableBodyFrozen"));
 var TableFooter_1 = __importDefault(require("./TableFooter"));
 var scrollbar_1 = require("./scrollbar");
@@ -165,11 +165,26 @@ var LazyGridOptionalSurfaces = React.lazy(function () {
 function Table(props) {
     var _a;
     var _this = this;
-    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 _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, _7, _8;
     var cellSelectionOptions = props.cellSelectionOptions, onChangeData = props.onChangeData, sourceIndexByVisibleIndex = props.sourceIndexByVisibleIndex;
     var cellSelectionEnabled = (_b = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _b !== void 0 ? _b : true;
+    var rowKeyRegistryState = (0, react_1.useRef)({
+        sourceData: (_c = props.sourceData) !== null && _c !== void 0 ? _c : props.data,
+        rowKey: props.rowKey,
+        registry: (0, TableBody_1.createRowKeyRegistry)(),
+    });
+    var currentSourceData = (_d = props.sourceData) !== null && _d !== void 0 ? _d : props.data;
+    if (rowKeyRegistryState.current.sourceData !== currentSourceData ||
+        rowKeyRegistryState.current.rowKey !== props.rowKey) {
+        rowKeyRegistryState.current = {
+            sourceData: currentSourceData,
+            rowKey: props.rowKey,
+            registry: (0, TableBody_1.createRowKeyRegistry)(),
+        };
+    }
+    var rowKeyRegistry = rowKeyRegistryState.current.registry;
     // [Selector Group 1] Layout & Dimensions - 레이아웃 차원
-    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 ({
         width: s.width,
         height: s.height,
         containerBorderWidth: s.containerBorderWidth,
@@ -177,30 +192,30 @@ function Table(props) {
         style: s.style,
         itemHeight: s.itemHeight,
         itemPadding: s.itemPadding,
-    }); })), width = _7.width, height = _7.height, containerBorderWidth = _7.containerBorderWidth, className = _7.className, style = _7.style, itemHeight = _7.itemHeight, itemPadding = _7.itemPadding;
+    }); })), width = _9.width, height = _9.height, containerBorderWidth = _9.containerBorderWidth, className = _9.className, style = _9.style, itemHeight = _9.itemHeight, itemPadding = _9.itemPadding;
     // [Selector Group 2] Header, Footer, Summary - 헤더/푸터/요약
-    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 ({
         headerHeight: s.headerHeight,
         footerHeight: s.footerHeight,
         bottomBarHeight: s.bottomBarHeight,
         summaryHeight: s.summaryHeight,
-    }); })), headerHeight = _8.headerHeight, footerHeight = _8.footerHeight, bottomBarHeight = _8.bottomBarHeight, summaryHeight = _8.summaryHeight;
+    }); })), headerHeight = _10.headerHeight, footerHeight = _10.footerHeight, bottomBarHeight = _10.bottomBarHeight, summaryHeight = _10.summaryHeight;
     // [Selector Group 3] Scroll State - 스크롤 상태
-    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 ({
         scrollLeft: s.scrollLeft,
         scrollTop: s.scrollTop,
-    }); })), scrollLeft = _9.scrollLeft, scrollTop = _9.scrollTop;
+    }); })), scrollLeft = _11.scrollLeft, scrollTop = _11.scrollTop;
     // [Selector Group 4] Content, Columns, Data - 컨텐츠 관련
-    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 ({
         contentBodyHeight: s.contentBodyHeight,
         columns: s.columns,
         data: s.data,
         frozenColumnsWidth: s.frozenColumnsWidth,
         frozenRowCount: s.frozenRowCount,
         frozenRowsHeight: s.frozenRowsHeight,
-    }); })), contentBodyHeight = _10.contentBodyHeight, columns = _10.columns, data = _10.data, frozenColumnsWidth = _10.frozenColumnsWidth, frozenRowCount = _10.frozenRowCount, frozenRowsHeight = _10.frozenRowsHeight;
+    }); })), contentBodyHeight = _12.contentBodyHeight, columns = _12.columns, data = _12.data, frozenColumnsWidth = _12.frozenColumnsWidth, frozenRowCount = _12.frozenRowCount, frozenRowsHeight = _12.frozenRowsHeight;
     // [Selector Group 4-1] Cell selection & navigation - 셀 선택 및 내비게이션
-    var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         cellSelectionRange: s.cellSelectionRange,
         cellSelectionRanges: s.cellSelectionRanges,
         activeCell: s.activeCell,
@@ -209,9 +224,9 @@ function Table(props) {
         editItemIndex: s.editItemIndex,
         editable: s.editable,
         handleClick: s.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;
+    }); })), cellSelectionRange = _13.cellSelectionRange, cellSelectionRanges = _13.cellSelectionRanges, activeCell = _13.activeCell, activeCellHost = _13.activeCellHost, cellNavigationOptions = _13.cellNavigationOptions, editItemIndex = _13.editItemIndex, editable = _13.editable, handleClick = _13.handleClick;
     // [Selector Group 5] State - 상태
-    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 ({
         rowChecked: s.rowChecked,
         page: s.page,
         loading: s.loading,
@@ -222,8 +237,8 @@ function Table(props) {
         scrollbar: s.scrollbar,
         status: s.status,
         pagination: s.pagination,
-    }); })), rowChecked = _12.rowChecked, page = _12.page, loading = _12.loading, spinning = _12.spinning, disabled = _12.disabled, 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 ({
+    }); })), rowChecked = _14.rowChecked, page = _14.page, loading = _14.loading, spinning = _14.spinning, disabled = _14.disabled, showLineNumber = _14.showLineNumber, summary = _14.summary, scrollbar = _14.scrollbar, status = _14.status, pagination = _14.pagination;
+    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         searchOpen: s.searchOpen,
         searchOptions: s.searchOptions,
         contextMenuOptions: s.contextMenuOptions,
@@ -232,9 +247,9 @@ function Table(props) {
         storeSourceIndexByVisibleIndex: s.sourceIndexByVisibleIndex,
         storeRowKey: s.rowKey,
         cellInteractionSession: s.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;
+    }); })), searchOpen = _15.searchOpen, searchOptions = _15.searchOptions, contextMenuOptions = _15.contextMenuOptions, activeSearchMatchIndex = _15.activeSearchMatchIndex, searchMatches = _15.searchMatches, storeSourceIndexByVisibleIndex = _15.storeSourceIndexByVisibleIndex, storeRowKey = _15.storeRowKey, cellInteractionSession = _15.cellInteractionSession;
     // [Selector Group 6] State 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 ({
         setHeight: s.setHeight,
         setWidth: s.setWidth,
         setContentBodyHeight: s.setContentBodyHeight,
@@ -248,9 +263,9 @@ function Table(props) {
         setLoading: s.setLoading,
         setSpinning: s.setSpinning,
         setDisabled: s.setDisabled,
-    }); })), 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, setDisabled = _14.setDisabled;
+    }); })), setHeight = _16.setHeight, setWidth = _16.setWidth, setContentBodyHeight = _16.setContentBodyHeight, setDisplayItemCount = _16.setDisplayItemCount, setHeaderHeight = _16.setHeaderHeight, setFooterHeight = _16.setFooterHeight, setBottomBarHeight = _16.setBottomBarHeight, setSummaryHeight = _16.setSummaryHeight, setItemHeight = _16.setItemHeight, setItemPadding = _16.setItemPadding, setLoading = _16.setLoading, setSpinning = _16.setSpinning, setDisabled = _16.setDisabled;
     // [Selector Group 7] Data & Column 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 ({
         setData: s.setData,
         setSourceData: s.setSourceData,
         setProcessedData: s.setProcessedData,
@@ -261,9 +276,9 @@ function Table(props) {
         setFrozenColumnIndex: s.setFrozenColumnIndex,
         setFrozenRowCount: s.setFrozenRowCount,
         setFrozenRowsHeight: s.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;
+    }); })), setData = _17.setData, setSourceData = _17.setSourceData, setProcessedData = _17.setProcessedData, setColumns = _17.setColumns, setColumnsGroup = _17.setColumnsGroup, setColumnGroups = _17.setColumnGroups, setFrozenColumnsWidth = _17.setFrozenColumnsWidth, setFrozenColumnIndex = _17.setFrozenColumnIndex, setFrozenRowCount = _17.setFrozenRowCount, setFrozenRowsHeight = _17.setFrozenRowsHeight;
     // [Selector Group 8] Row & Sort 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 ({
         setRowChecked: s.setRowChecked,
         setCheckedIndexesMap: s.setCheckedIndexesMap,
         setSort: s.setSort,
@@ -281,9 +296,9 @@ function Table(props) {
         requestSearchOpen: s.requestSearchOpen,
         openContextMenu: s.openContextMenu,
         commitCheckboxCell: s.commitCheckboxCell,
-    }); })), setRowChecked = _16.setRowChecked, setCheckedIndexesMap = _16.setCheckedIndexesMap, setSort = _16.setSort, setSortParams = _16.setSortParams, setDataQuery = _16.setDataQuery, setDataControl = _16.setDataControl, setIcons = _16.setIcons, setColumnVisibilityState = _16.setColumnVisibilityState, 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;
+    }); })), setRowChecked = _18.setRowChecked, setCheckedIndexesMap = _18.setCheckedIndexesMap, setSort = _18.setSort, setSortParams = _18.setSortParams, setDataQuery = _18.setDataQuery, setDataControl = _18.setDataControl, setIcons = _18.setIcons, setColumnVisibilityState = _18.setColumnVisibilityState, setActiveToolbox = _18.setActiveToolbox, setRowKey = _18.setRowKey, setFocusedRowKey = _18.setFocusedRowKey, setEditItem = _18.setEditItem, setSearchOptions = _18.setSearchOptions, setContextMenuOptions = _18.setContextMenuOptions, requestSearchOpen = _18.requestSearchOpen, openContextMenu = _18.openContextMenu, commitCheckboxCell = _18.commitCheckboxCell;
     // [Selector Group 9] Pagination & Display Setters - 페이지/표시 설정자
-    var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _19 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setPage: s.setPage,
         setDisplayPaginationLength: s.setDisplayPaginationLength,
         setShowLineNumber: s.setShowLineNumber,
@@ -299,9 +314,9 @@ function Table(props) {
         setScrollbar: s.setScrollbar,
         setStatus: s.setStatus,
         setPagination: s.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;
+    }); })), setPage = _19.setPage, setDisplayPaginationLength = _19.setDisplayPaginationLength, setShowLineNumber = _19.setShowLineNumber, setMsg = _19.setMsg, setRowClassName = _19.setRowClassName, setCellMergeOptions = _19.setCellMergeOptions, setVariant = _19.setVariant, setSummary = _19.setSummary, setColumnSortable = _19.setColumnSortable, setReorder = _19.setReorder, setClassName = _19.setClassName, setStyle = _19.setStyle, setScrollbar = _19.setScrollbar, setStatus = _19.setStatus, setPagination = _19.setPagination;
     // [Selector Group 10] Edit & Event Setters - 편집/이벤트 설정자
-    var _18 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _20 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setEditable: s.setEditable,
         setEditTrigger: s.setEditTrigger,
         setOnClick: s.setOnClick,
@@ -310,8 +325,8 @@ function Table(props) {
         setOnLoadMore: s.setOnLoadMore,
         setScroll: s.setScroll,
         setInitialized: s.setInitialized,
-    }); })), 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 ({
+    }); })), setEditable = _20.setEditable, setEditTrigger = _20.setEditTrigger, setOnClick = _20.setOnClick, setOnChangeColumns = _20.setOnChangeColumns, setOnChangeData = _20.setOnChangeData, setOnLoadMore = _20.setOnLoadMore, setScroll = _20.setScroll, setInitialized = _20.setInitialized;
+    var _21 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setCellSelectionRanges: s.setCellSelectionRanges,
         setCellSelecting: s.setCellSelecting,
         clearCellSelection: s.clearCellSelection,
@@ -319,7 +334,7 @@ function Table(props) {
         moveActiveCell: s.moveActiveCell,
         setCellNavigationOptions: s.setCellNavigationOptions,
         syncActiveCellToBounds: s.syncActiveCellToBounds,
-    }); })), setCellSelectionRanges = _19.setCellSelectionRanges, setCellSelecting = _19.setCellSelecting, clearCellSelection = _19.clearCellSelection, setActiveCell = _19.setActiveCell, moveActiveCell = _19.moveActiveCell, setCellNavigationOptions = _19.setCellNavigationOptions, syncActiveCellToBounds = _19.syncActiveCellToBounds;
+    }); })), setCellSelectionRanges = _21.setCellSelectionRanges, setCellSelecting = _21.setCellSelecting, clearCellSelection = _21.clearCellSelection, setActiveCell = _21.setActiveCell, moveActiveCell = _21.moveActiveCell, setCellNavigationOptions = _21.setCellNavigationOptions, syncActiveCellToBounds = _21.syncActiveCellToBounds;
     var trHeight = itemHeight + itemPadding * 2;
     var rowHeightMetrics = props.rowHeightMetrics;
     var variableRowOffsets = rowHeightMetrics.variable ? rowHeightMetrics.offsets : undefined;
@@ -334,7 +349,7 @@ function Table(props) {
             enabled: scrollbar.variant !== 'native',
         });
     }, [contentBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
-    var _20 = __read(React.useState(0), 2), virtualScrollBase = _20[0], setVirtualScrollBase = _20[1];
+    var _22 = __read(React.useState(0), 2), virtualScrollBase = _22[0], setVirtualScrollBase = _22[1];
     var virtualScrollBaseRef = (0, react_1.useRef)(0);
     var containerRef = (0, react_1.useRef)(null);
     var searchPopoverRef = (0, react_1.useRef)(null);
@@ -467,7 +482,7 @@ function Table(props) {
     }, [
         data.length,
         frozenRowCount,
-        (_c = props.reorder) === null || _c === void 0 ? void 0 : _c.enabled,
+        (_e = props.reorder) === null || _e === void 0 ? void 0 : _e.enabled,
         scrollOverscanRows,
         scrollTop,
         scrollableBodyHeight,
@@ -524,7 +539,7 @@ function Table(props) {
                 ]);
             }
         }
-        var sourceIndex = (_d = storeSourceIndexByVisibleIndex[visibleIndex]) !== null && _d !== void 0 ? _d : visibleIndex;
+        var sourceIndex = (_d = storeSourceIndexByVisibleIndex === null || storeSourceIndexByVisibleIndex === void 0 ? void 0 : storeSourceIndexByVisibleIndex[visibleIndex]) !== null && _d !== void 0 ? _d : visibleIndex;
         var target = {
             cell: logical.cell,
             visibleIndex: visibleIndex,
@@ -641,7 +656,7 @@ function Table(props) {
     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];
+    var _23 = __read(React.useState(null), 2), rowScrollRequest = _23[0], setRowScrollRequest = _23[1];
     React.useImperativeHandle(props.ref, function () { return ({
         scrollToRow: function (rowIndex, options) {
             var _a;
@@ -658,7 +673,7 @@ function Table(props) {
     var selectionMetricsRef = (0, react_1.useRef)({
         columns: columns,
         dataLength: data.length,
-        frozenColumnIndex: (_d = props.frozenColumnIndex) !== null && _d !== void 0 ? _d : 0,
+        frozenColumnIndex: (_f = props.frozenColumnIndex) !== null && _f !== void 0 ? _f : 0,
         frozenRowCount: frozenRowCount,
         frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
         frozenRowsHeight: frozenRowsHeight,
@@ -1543,7 +1558,7 @@ function Table(props) {
         setFrozenColumnIndex((_d = props.frozenColumnIndex) !== null && _d !== void 0 ? _d : 0);
     }, [
         props.frozenColumnIndex,
-        (_e = props.reorder) === null || _e === void 0 ? void 0 : _e.enabled,
+        (_g = props.reorder) === null || _g === void 0 ? void 0 : _g.enabled,
         showLineNumber,
         rowChecked,
         itemHeight,
@@ -1561,7 +1576,7 @@ function Table(props) {
         setFrozenRowsHeight((_d = rowHeightMetrics.offsets[nextFrozenRowCount]) !== null && _d !== void 0 ? _d : nextFrozenRowCount * trHeight);
     }, [
         data.length,
-        (_f = props.data) === null || _f === void 0 ? void 0 : _f.length,
+        (_h = props.data) === null || _h === void 0 ? void 0 : _h.length,
         props.frozenRowCount,
         rowHeightMetrics,
         setFrozenRowCount,
@@ -1570,10 +1585,7 @@ function Table(props) {
     ]);
     // [Group 5] Data & columns
     (0, react_1.useEffect)(function () {
-        if (props.data !== undefined &&
-            props.sourceData !== undefined &&
-            props.sourceIndexByVisibleIndex !== undefined &&
-            props.visibleIndexBySourceIndex !== undefined) {
+        if (props.data !== undefined && props.sourceData !== undefined) {
             setProcessedData({
                 data: props.data,
                 sourceData: props.sourceData,
@@ -1661,23 +1673,23 @@ function Table(props) {
         }
     }, [
         props.page,
-        (_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,
+        (_j = props.page) === null || _j === void 0 ? void 0 : _j.currentPage,
+        (_k = props.page) === null || _k === void 0 ? void 0 : _k.loading,
+        (_l = props.page) === null || _l === void 0 ? void 0 : _l.pageSize,
+        (_m = props.page) === null || _m === void 0 ? void 0 : _m.totalPages,
+        (_o = props.page) === null || _o === void 0 ? void 0 : _o.totalElements,
+        (_p = props.page) === null || _p === void 0 ? void 0 : _p.onChange,
+        (_q = props.page) === null || _q === void 0 ? void 0 : _q.displayPaginationLength,
         setPage,
         setDisplayPaginationLength,
     ]);
-    var previousPageRef = (0, react_1.useRef)((_p = props.page) === null || _p === void 0 ? void 0 : _p.currentPage);
+    var previousPageRef = (0, react_1.useRef)((_r = props.page) === null || _r === void 0 ? void 0 : _r.currentPage);
     (0, react_1.useEffect)(function () {
         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]);
+    }, [resetScrollPosition, (_s = props.page) === null || _s === void 0 ? void 0 : _s.currentPage]);
     // [Group 8] Row key & selection
     (0, react_1.useEffect)(function () {
         setRowKey(props.rowKey);
@@ -1753,10 +1765,10 @@ function Table(props) {
     }, [
         columns.length,
         data.length,
-        (_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,
+        (_u = (_t = props.cellNavigationOptions) === null || _t === void 0 ? void 0 : _t.activeCell) === null || _u === void 0 ? void 0 : _u.columnIndex,
+        (_w = (_v = props.cellNavigationOptions) === null || _v === void 0 ? void 0 : _v.activeCell) === null || _w === void 0 ? void 0 : _w.rowIndex,
+        (_y = (_x = props.cellNavigationOptions) === null || _x === void 0 ? void 0 : _x.defaultActiveCell) === null || _y === void 0 ? void 0 : _y.columnIndex,
+        (_0 = (_z = props.cellNavigationOptions) === null || _z === void 0 ? void 0 : _z.defaultActiveCell) === null || _0 === void 0 ? void 0 : _0.rowIndex,
         disabled,
         syncActiveCellToBounds,
     ]);
@@ -1891,8 +1903,8 @@ function Table(props) {
         endCellSelectionDrag();
         clearCellSelection();
     }, [cellSelectionEnabled, clearCellSelection, endCellSelectionDrag]);
-    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 clearCellSelectionOnEscape = (_2 = (_1 = props.cellSelectionOptions) === null || _1 === void 0 ? void 0 : _1.clearOnEscape) !== null && _2 !== void 0 ? _2 : true;
+    var clearCellSelectionOnOutsideClick = (_4 = (_3 = props.cellSelectionOptions) === null || _3 === void 0 ? void 0 : _3.clearOnOutsideClick) !== null && _4 !== void 0 ? _4 : true;
     var keyboardRuntimeRef = (0, react_1.useRef)({
         activeCell: activeCell,
         cellInteractionSession: cellInteractionSession,
@@ -1911,7 +1923,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_3 = props.frozenColumnIndex) !== null && _3 !== void 0 ? _3 : 0,
+        frozenColumnIndex: (_5 = props.frozenColumnIndex) !== null && _5 !== void 0 ? _5 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -1946,7 +1958,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_4 = props.frozenColumnIndex) !== null && _4 !== void 0 ? _4 : 0,
+        frozenColumnIndex: (_6 = props.frozenColumnIndex) !== null && _6 !== void 0 ? _6 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -2348,7 +2360,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": ((_5 = props.frozenColumnIndex) !== null && _5 !== void 0 ? _5 : 0) > 0 ? 'true' : 'false', "data-bgrid-disabled": disabled ? 'true' : undefined, "data-bgrid-variable-row-height": rowHeightMetrics.variable ? 'true' : undefined },
+            }, "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": ((_7 = props.frozenColumnIndex) !== null && _7 !== void 0 ? _7 : 0) > 0 ? 'true' : 'false', "data-bgrid-disabled": disabled ? 'true' : undefined, "data-bgrid-variable-row-height": rowHeightMetrics.variable ? 'true' : undefined },
             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,
@@ -2387,17 +2399,17 @@ function Table(props) {
                     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, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top-frozen', quadrant: 'top-left', allowRowReorder: false }),
+                                React.createElement(TableBodyFrozen_1.default, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top-frozen', quadrant: 'top-left', allowRowReorder: false }),
                                 renderSelectionOverlay('top-left'))),
                             React.createElement("div", { className: 'bgrid-frozen-rows-main', style: { left: frozenColumnsWidth }, role: 'rfdg-frozen-rows-main' },
-                                React.createElement(TableBody_1.default, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
+                                React.createElement(TableBody_1.default, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, 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: physicalScrollableRowsHeight }, "data-bgrid-row-band": 'scrollable' },
                             (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenScrollContent, { style: {
                                     width: frozenColumnsWidth,
                                     height: physicalScrollableRowsHeight,
                                 }, role: 'rfdg-frozen-scroll-container' },
-                                React.createElement(TableBodyFrozen_1.default, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, style: frozenScrollableBodyStyle, quadrant: 'body-left', onRowReorderPointerDown: rowReorderController.onPointerDown, onRowReorderKeyDown: rowReorderController.onKeyDown }),
+                                React.createElement(TableBodyFrozen_1.default, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, style: frozenScrollableBodyStyle, quadrant: 'body-left', onRowReorderPointerDown: rowReorderController.onPointerDown, onRowReorderKeyDown: rowReorderController.onKeyDown }),
                                 renderSelectionOverlay('body-left'))),
                             React.createElement(ScrollContent, { style: {
                                     left: frozenColumnsWidth,
@@ -2406,7 +2418,7 @@ function Table(props) {
                                         : visibleScrollableRows.paddingTop,
                                     height: physicalScrollableRowsHeight,
                                 } },
-                                React.createElement(TableBody_1.default, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
+                                React.createElement(TableBody_1.default, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
                                 renderSelectionOverlay('body-main')))),
                     summary && summary.position === 'bottom' && (React.createElement(SummaryContainer, { position: 'bottom', style: { height: summaryHeight, bottom: 0 }, role: 'rfdg-summary-container' },
                         (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenSummary, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-summary' },
@@ -2414,7 +2426,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 },
-                ((_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)),
+                ((_8 = rowReorderController.preview) === null || _8 === void 0 ? void 0 : _8.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 }),