@visactor/vtable 0.15.5 → 0.16.1

package/dist/vtable.js

@@ -49267,7 +49267,7 @@
         let parentId = layout.getParentCellId(col, row);
         let parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
         const updateCellPositions = [];
-        updateCellPositions.push(parentCellAddress);
+        parentCellAddress && updateCellPositions.push(parentCellAddress);
         while (parentId) {
             parentId = layout.getParentCellId(parentCellAddress.col, parentCellAddress.row);
             if (parentId) {
@@ -49397,6 +49397,7 @@
         lastOrderFn;
         lastOrderField;
         currentIndexedData = [];
+        userPagination;
         pagination;
         _currentPagerIndexedData;
         enableHierarchyState = false;
@@ -49412,6 +49413,7 @@
             this._source = obj?.source ?? obj;
             this.sortedIndexMap = new Map();
             this._currentPagerIndexedData = [];
+            this.userPagination = pagination;
             this.pagination = pagination || {
                 totalCount: this._sourceLength,
                 perPageCount: this._sourceLength,
@@ -49621,6 +49623,112 @@
                 p_node.children.splice(c_node_index, 1, record);
             }
         }
+        addRecord(record, index) {
+            this.source.splice(index, 0, record);
+            this.currentIndexedData.push(this.currentIndexedData.length);
+            this._sourceLength += 1;
+            if (this.userPagination) {
+                this.pagination.totalCount = this._sourceLength;
+                const { perPageCount, currentPage } = this.pagination;
+                const startIndex = perPageCount * (currentPage || 0);
+                const endIndex = startIndex + perPageCount;
+                if (index < endIndex) {
+                    this.updatePagerData();
+                }
+            }
+            else {
+                this.pagination.perPageCount = this._sourceLength;
+                this.pagination.totalCount = this._sourceLength;
+                this.updatePagerData();
+            }
+        }
+        addRecords(recordArr, index) {
+            if (Array.isArray(recordArr)) {
+                this.source.splice(index, 0, ...recordArr);
+                for (let i = 0; i < recordArr.length; i++) {
+                    this.currentIndexedData.push(this.currentIndexedData.length);
+                }
+                this._sourceLength += recordArr.length;
+            }
+            if (this.userPagination) {
+                this.pagination.totalCount = this._sourceLength;
+                const { perPageCount, currentPage } = this.pagination;
+                const startIndex = perPageCount * (currentPage || 0);
+                const endIndex = startIndex + perPageCount;
+                if (index < endIndex) {
+                    this.updatePagerData();
+                }
+            }
+            else {
+                this.pagination.perPageCount = this._sourceLength;
+                this.pagination.totalCount = this._sourceLength;
+                this.updatePagerData();
+            }
+        }
+        addRecordForSorted(record) {
+            this.source.push(record);
+            this.currentIndexedData.push(this.currentIndexedData.length);
+            this._sourceLength += 1;
+            this.sortedIndexMap.clear();
+            if (!this.userPagination) {
+                this.pagination.perPageCount = this._sourceLength;
+                this.pagination.totalCount = this._sourceLength;
+            }
+        }
+        addRecordsForSorted(recordArr) {
+            if (Array.isArray(recordArr)) {
+                this.source.push(...recordArr);
+                for (let i = 0; i < recordArr.length; i++) {
+                    this.currentIndexedData.push(this.currentIndexedData.length);
+                }
+                this._sourceLength += recordArr.length;
+                this.sortedIndexMap.clear();
+            }
+            if (!this.userPagination) {
+                this.pagination.perPageCount = this._sourceLength;
+                this.pagination.totalCount = this._sourceLength;
+            }
+        }
+        deleteRecordsForSorted(recordIndexs) {
+            const recordIndexsMaxToMin = recordIndexs.sort((a, b) => b - a);
+            for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
+                const recordIndex = recordIndexsMaxToMin[index];
+                if (recordIndex >= this._sourceLength || recordIndex < 0) {
+                    continue;
+                }
+                const rawIndex = this.currentIndexedData[recordIndex];
+                this.source.splice(rawIndex, 1);
+                this._sourceLength -= 1;
+            }
+            this.sortedIndexMap.clear();
+            if (!this.userPagination) {
+                this.pagination.perPageCount = this._sourceLength;
+                this.pagination.totalCount = this._sourceLength;
+            }
+        }
+        deleteRecords(recordIndexs) {
+            const realDeletedRecordIndexs = [];
+            const recordIndexsMaxToMin = recordIndexs.sort((a, b) => b - a);
+            for (let index = 0; index < recordIndexsMaxToMin.length; index++) {
+                const recordIndex = recordIndexsMaxToMin[index];
+                if (recordIndex >= this._sourceLength || recordIndex < 0) {
+                    continue;
+                }
+                realDeletedRecordIndexs.push(recordIndex);
+                this.source.splice(recordIndex, 1);
+                this.currentIndexedData.pop();
+                this._sourceLength -= 1;
+            }
+            if (this.userPagination) {
+                this.updatePagerData();
+            }
+            else {
+                this.pagination.perPageCount = this._sourceLength;
+                this.pagination.totalCount = this._sourceLength;
+                this.updatePagerData();
+            }
+            return realDeletedRecordIndexs;
+        }
         sort(field, order, orderFn = order !== 'desc'
             ? (v1, v2) => (v1 === v2 ? 0 : v1 > v2 ? 1 : -1)
             : (v1, v2) => (v1 === v2 ? 0 : v1 < v2 ? 1 : -1)) {
@@ -49688,7 +49796,7 @@
                 });
             }
         }
-        get sourceLenght() {
+        get sourceLength() {
             return this._sourceLength;
         }
         set sourceLength(sourceLen) {
@@ -50499,6 +50607,32 @@
             hasFunctionPros
         };
     }
+    function sortRecords(table) {
+        if (table.sortState) {
+            let order;
+            let field;
+            let fieldKey;
+            if (Array.isArray(table.sortState)) {
+                if (table.sortState.length !== 0) {
+                    ({ order, field, fieldKey } = table.sortState?.[0]);
+                }
+            }
+            else {
+                ({ order, field, fieldKey } = table.sortState);
+            }
+            if (order && field && order !== 'normal') {
+                const sortFunc = table._getSortFuncFromHeaderOption(undefined, field, fieldKey);
+                let hd;
+                if (fieldKey) {
+                    hd = table.internalProps.layoutMap.headerObjects.find((col) => col && col.fieldKey === fieldKey);
+                }
+                else {
+                    hd = table.internalProps.layoutMap.headerObjects.find((col) => col && col.field === field);
+                }
+                table.dataSource.sort(hd.field, order, sortFunc ?? defaultOrderFn);
+            }
+        }
+    }
 
     let Icon$1 = class Icon extends Image$3 {
         role;
@@ -52543,7 +52677,7 @@
         else {
             const define = table.getBodyColumnDefine(col, row);
             if (define?.tree) {
-                const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByCell(col, row));
+                const indexArr = table.dataSource.getIndexKey(table.getRecordShowIndexByCell(col, row));
                 cellHierarchyIndent =
                     Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none
                         ? (indexArr.length - 1) * (layoutMap.hierarchyIndent ?? 0)
@@ -55249,7 +55383,7 @@
         }
         else {
             rowStart = row + 1;
-            rowEnd = scene.bodyRowEnd - scene.table.bottomFrozenRowCount;
+            rowEnd = scene.bodyRowEnd;
         }
         for (let rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
             for (let colIndex = 0; colIndex < scene.table.colCount; colIndex++) {
@@ -57654,7 +57788,7 @@
                 deltaRow = prepareDeltaRow;
                 const define = table.getBodyColumnDefine(col, row);
                 if (define?.tree) {
-                    const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByCell(col, row));
+                    const indexArr = table.dataSource.getIndexKey(table.getRecordShowIndexByCell(col, row));
                     cellHierarchyIndent =
                         Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none
                             ? (indexArr.length - 1) * (layoutMap.hierarchyIndent ?? 0)
@@ -58193,6 +58327,10 @@
             colHeaderColGroup && updateColGroupContent(colHeaderColGroup, proxy);
             const bottomColGroup = proxy.table.scenegraph.getColGroupInBottom(col);
             bottomColGroup && updateColGroupContent(bottomColGroup, proxy);
+            const rightTopColGroup = proxy.table.scenegraph.getColGroupInRightTopCorner(col);
+            rightTopColGroup && updateColGroupContent(rightTopColGroup, proxy);
+            const rightBottomColGroup = proxy.table.scenegraph.getColGroupInRightBottomCorner(col);
+            rightBottomColGroup && updateColGroupContent(rightBottomColGroup, proxy);
         }
     }
     function updateAllColPosition(distStartColY, count, direction, proxy) {
@@ -58628,7 +58766,7 @@
             this.xLimitRight = totalWidth - totalBodyWidth / 2;
             const widthLimit = this.table.tableNoFrameWidth * 5;
             this.screenColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth);
-            this.firstScreenColLimit = this.bodyLeftCol + Math.min(this.colLimit, Math.ceil(widthLimit / defaultColWidth));
+            this.firstScreenColLimit = Math.max(15, this.bodyLeftCol + Math.min(this.colLimit, Math.ceil(widthLimit / defaultColWidth)));
             this.colUpdatePos = this.bodyRightCol;
         }
         setParamsForRow() {
@@ -58646,7 +58784,7 @@
             this.yLimitBottom = totalHeight - totalBodyHeight / 2;
             const heightLimit = this.table.tableNoFrameHeight * 5;
             this.screenRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight);
-            this.firstScreenRowLimit = this.bodyTopRow + Math.min(this.rowLimit, Math.ceil(heightLimit / defaultRowHeight));
+            this.firstScreenRowLimit = Math.max(30, this.bodyTopRow + Math.min(this.rowLimit, Math.ceil(heightLimit / defaultRowHeight)));
             this.rowUpdatePos = this.bodyBottomRow;
         }
         resize() {
@@ -58845,6 +58983,30 @@
             }
             this.rowUpdatePos = distRow + 1;
         }
+        updateBottomFrozenCellGroups() {
+            const startRow = this.table.rowCount - this.table.bottomFrozenRowCount;
+            const endRow = this.table.rowCount - 1;
+            if (this.table.heightMode === 'autoHeight') {
+                computeRowsHeight(this.table, startRow, endRow, false);
+            }
+            updateRowContent(startRow, endRow, this);
+            if (this.table.heightMode === 'autoHeight') {
+                updateAutoRow(this.bodyLeftCol, this.bodyRightCol, startRow, endRow, this.table, this.rowUpdateDirection);
+                updateAutoRow(0, this.table.frozenColCount - 1, startRow, endRow, this.table, this.rowUpdateDirection);
+                updateAutoRow(this.table.colCount - this.table.rightFrozenColCount, this.table.colCount - 1, startRow, endRow, this.table, this.rowUpdateDirection);
+            }
+        }
+        updateRightFrozenCellGroups() {
+            const startCol = this.table.colCount - this.table.rightFrozenColCount;
+            const endCol = this.table.colCount - 1;
+            if (this.table.widthMode === 'autoWidth') {
+                computeColsWidth(this.table, startCol, endCol, false);
+            }
+            updateColContent(startCol, endCol, this);
+            if (this.table.heightMode === 'autoHeight') {
+                updateAutoColumn(startCol, endCol, this.table, this.colUpdateDirection);
+            }
+        }
         async updateColCellGroupsAsync() {
             this.updateColGroups(this.taskRowCount);
         }
@@ -59446,8 +59608,9 @@
 
     function updateRow(removeCells, addCells, updateCells, table) {
         const scene = table.scenegraph;
-        const removeRows = deduplication(removeCells.map(cell => cell.row)).sort((a, b) => b - a);
-        const addRows = deduplication(addCells.map(cell => cell.row)).sort((a, b) => a - b);
+        const removeRows = deduplication$1(removeCells.map(cell => cell.row)).sort((a, b) => b - a);
+        const addRows = deduplication$1(addCells.map(cell => cell.row)).sort((a, b) => a - b);
+        const updateRows = deduplication$1(updateCells.map(cell => cell.row)).sort((a, b) => a - b);
         removeRows.forEach(row => {
             removeRow(row, scene);
         });
@@ -59462,31 +59625,30 @@
         let updateAfter;
         addRows.forEach(row => {
             const needUpdateAfter = addRow(row, scene);
-            updateAfter = updateAfter || needUpdateAfter;
+            updateAfter = updateAfter ?? needUpdateAfter;
             scene.table.rowHeightsMap.adjustOrder(row, row + 1, scene.table.rowHeightsMap.count() - row);
         });
         resetRowNumberAndY(scene);
-        updateCells.forEach(cell => {
-            if (!cell) {
-                return;
-            }
-            const mergeInfo = getCellMergeInfo(scene.table, cell.col, cell.row);
-            if (mergeInfo) {
-                for (let col = mergeInfo.start.col; col <= mergeInfo.end.col; col++) {
-                    for (let row = mergeInfo.start.row; row <= mergeInfo.end.row; row++) {
-                        updateCell$1(col, row, scene.table, false);
+        for (let col = 0; col < table.colCount; col++) {
+            updateRows.forEach(r => {
+                const mergeInfo = getCellMergeInfo(scene.table, col, r);
+                if (mergeInfo) {
+                    for (let col = mergeInfo.start.col; col <= mergeInfo.end.col; col++) {
+                        for (let row = mergeInfo.start.row; row <= mergeInfo.end.row; row++) {
+                            updateCell$1(col, row, scene.table, false);
+                        }
                     }
                 }
-            }
-            else {
-                updateCell$1(cell.col, cell.row, scene.table, false);
-            }
-        });
+                else {
+                    updateCell$1(col, r, scene.table, false);
+                }
+            });
+        }
         if (isNumber$7(updateAfter)) {
             for (let col = 0; col < table.colCount; col++) {
                 for (let row = updateAfter; row < table.rowCount; row++) {
                     const cellGroup = scene.highPerformanceGetCell(col, row, true);
-                    cellGroup.needUpdate = true;
+                    cellGroup && (cellGroup.needUpdate = true);
                 }
             }
             scene.proxy.rowUpdatePos = updateAfter;
@@ -59498,14 +59660,29 @@
             }
             scene.proxy.rowUpdateDirection = 'up';
             scene.proxy.updateCellGroups(scene.proxy.screenRowCount * 2);
+            updateBottomFrozeCellGroups();
             scene.proxy.progress();
         }
         else if (removeRows.length) {
             scene.proxy.updateCellGroups(scene.proxy.screenRowCount * 2);
+            updateBottomFrozeCellGroups();
             scene.proxy.progress();
         }
         const newTotalHeight = table.getRowsHeight(table.frozenRowCount, table.rowCount - 1 - table.bottomFrozenRowCount);
         scene.updateContainerHeight(scene.table.frozenRowCount, newTotalHeight - scene.bodyGroup.attribute.height);
+        function updateBottomFrozeCellGroups() {
+            if (addRows?.[addRows?.length - 1] >= table.rowCount - table.bottomFrozenRowCount ||
+                updateRows?.[updateRows?.length - 1] >= table.rowCount - table.bottomFrozenRowCount ||
+                removeRows?.[0] >= table.rowCount - table.bottomFrozenRowCount) {
+                for (let col = 0; col < table.colCount; col++) {
+                    for (let row = table.rowCount - table.bottomFrozenRowCount; row < table.rowCount; row++) {
+                        const cellGroup = scene.highPerformanceGetCell(col, row, true);
+                        cellGroup && (cellGroup.needUpdate = true);
+                    }
+                }
+                scene.proxy.updateBottomFrozenCellGroups();
+            }
+        }
     }
     function removeRow(row, scene) {
         removeCellGroup(row, scene);
@@ -59545,7 +59722,7 @@
         }
         return row;
     }
-    function deduplication(array) {
+    function deduplication$1(array) {
         const result = [];
         for (let i = 0; i < array.length; i++) {
             if (result.indexOf(array[i]) === -1) {
@@ -59555,84 +59732,125 @@
         return result;
     }
     function resetRowNumber(scene) {
-        for (let col = 0; col < scene.table.colCount; col++) {
-            const headerColGroup = scene.getColGroup(col, true);
-            const colGroup = scene.getColGroup(col, false);
-            if (!headerColGroup || !colGroup) {
-                continue;
-            }
-            let rowIndex = headerColGroup.firstChild?.row;
-            headerColGroup.forEachChildren((cellGroup) => {
-                cellGroup.row = rowIndex;
-                const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
-                if (merge) {
-                    cellGroup.mergeStartCol = merge.start.col;
-                    cellGroup.mergeStartRow = merge.start.row;
-                    cellGroup.mergeEndCol = merge.end.col;
-                    cellGroup.mergeEndRow = merge.end.row;
-                }
+        scene.bodyGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.bodyRowStart;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex);
                 rowIndex++;
             });
-            rowIndex = colGroup.firstChild?.row;
-            colGroup.forEachChildren((cellGroup) => {
-                cellGroup.row = rowIndex;
-                const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
-                if (merge) {
-                    cellGroup.mergeStartCol = merge.start.col;
-                    cellGroup.mergeStartRow = merge.start.row;
-                    cellGroup.mergeEndCol = merge.end.col;
-                    cellGroup.mergeEndRow = merge.end.row;
-                }
+        });
+        scene.rowHeaderGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.bodyRowStart;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex);
+                rowIndex++;
+            });
+        });
+        scene.rightFrozenGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.bodyRowStart;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex);
+                rowIndex++;
+            });
+        });
+        scene.bottomFrozenGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex);
+                rowIndex++;
+            });
+        });
+        scene.leftBottomCornerGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex);
+                rowIndex++;
+            });
+        });
+        scene.rightBottomCornerGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex);
                 rowIndex++;
             });
+        });
+        function processCell(cellGroup, rowIndex) {
+            cellGroup.row = rowIndex;
+            const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
+            if (merge) {
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeEndCol = merge.end.col;
+                cellGroup.mergeEndCol = merge.end.col;
+            }
         }
     }
     function resetRowNumberAndY(scene) {
-        scene.table;
-        let newTotalHeight = 0;
-        for (let col = 0; col < scene.table.colCount; col++) {
-            const headerColGroup = scene.getColGroup(col, true);
-            const colGroup = scene.getColGroup(col, false);
-            const bottomGroup = scene.getColGroupInBottom(col) ||
-                scene.getColGroupInLeftBottomCorner(col) ||
-                scene.getColGroupInRightTopCorner(col);
-            if (!headerColGroup || !colGroup) {
-                continue;
-            }
-            let rowIndex = headerColGroup.firstChild?.row;
+        scene.bodyGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.bodyRowStart;
+            let y = scene.getCellGroupY(rowIndex);
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex, y);
+                rowIndex++;
+                y += cellGroup.attribute.height;
+            });
+        });
+        scene.rowHeaderGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.bodyRowStart;
+            let y = scene.getCellGroupY(rowIndex);
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex, y);
+                rowIndex++;
+                y += cellGroup.attribute.height;
+            });
+        });
+        scene.rightFrozenGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.bodyRowStart;
+            let y = scene.getCellGroupY(rowIndex);
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex, y);
+                rowIndex++;
+                y += cellGroup.attribute.height;
+            });
+        });
+        scene.bottomFrozenGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.table.rowCount - scene.table.bottomFrozenRowCount;
             let y = 0;
-            rowIndex = colGroup.firstChild?.row;
-            y = scene.getCellGroupY(rowIndex);
-            colGroup.forEachChildren((cellGroup) => {
-                cellGroup.row = rowIndex;
-                const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
-                if (merge) {
-                    cellGroup.mergeStartCol = merge.start.col;
-                    cellGroup.mergeStartRow = merge.start.row;
-                    cellGroup.mergeEndCol = merge.end.col;
-                    cellGroup.mergeEndRow = merge.end.row;
-                }
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex, y);
                 rowIndex++;
-                if (cellGroup.role !== 'cell') {
-                    return;
-                }
-                cellGroup.setAttribute('y', y);
                 y += cellGroup.attribute.height;
             });
-            newTotalHeight = y;
-            bottomGroup?.forEachChildren((cellGroup) => {
-                cellGroup.row = rowIndex;
-                const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
-                if (merge) {
-                    cellGroup.mergeStartCol = merge.start.col;
-                    cellGroup.mergeStartRow = merge.start.row;
-                    cellGroup.mergeEndCol = merge.end.col;
-                    cellGroup.mergeEndRow = merge.end.row;
-                }
+        });
+        scene.leftBottomCornerGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+            let y = 0;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex, y);
                 rowIndex++;
+                y += cellGroup.attribute.height;
             });
+        });
+        scene.rightBottomCornerGroup.forEachChildren((colGroup) => {
+            let rowIndex = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+            let y = 0;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup, rowIndex, y);
+                rowIndex++;
+                y += cellGroup.attribute.height;
+            });
+        });
+        function processCell(cellGroup, rowIndex, y) {
+            cellGroup.row = rowIndex;
+            cellGroup.setAttribute('y', y);
+            const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
+            if (merge) {
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeEndCol = merge.end.col;
+                cellGroup.mergeEndCol = merge.end.col;
+            }
         }
-        return newTotalHeight;
     }
     function addRowCellGroup(row, scene) {
         for (let col = 0; col < scene.table.colCount; col++) {
@@ -60780,6 +60998,342 @@
         return cellGroup;
     }
 
+    function updateCol(removeCells, addCells, updateCells, table) {
+        const scene = table.scenegraph;
+        const removeCols = deduplication(removeCells.map(cell => cell.col)).sort((a, b) => b - a);
+        const addCols = deduplication(addCells.map(cell => cell.col)).sort((a, b) => a - b);
+        const updateCols = deduplication(updateCells.map(cell => cell.col)).sort((a, b) => a - b);
+        removeCols.forEach(col => {
+            removeCol(col, scene);
+        });
+        removeCols.forEach(col => {
+            scene.table.colWidthsMap.adjustOrder(col + 1, col, scene.table.colWidthsMap.count() - col - 1);
+            scene.table.colWidthsMap.del(scene.table.colWidthsMap.count() - 1);
+        });
+        if (removeCols.length) {
+            resetColNumber(scene);
+        }
+        scene.table._clearColRangeWidthsMap();
+        let updateAfter;
+        addCols.forEach(col => {
+            const needUpdateAfter = addCol(col, scene);
+            resetColNumber(scene);
+            updateAfter = updateAfter ?? needUpdateAfter;
+            scene.table.colWidthsMap.adjustOrder(col, col + 1, scene.table.colWidthsMap.count() - col);
+        });
+        resetColNumberAndX(scene);
+        updateCols.forEach(col => {
+            for (let row = 0; row < table.rowCount; row++) {
+                const mergeInfo = getCellMergeInfo(scene.table, col, row);
+                if (mergeInfo) {
+                    for (let col = mergeInfo.start.col; col <= mergeInfo.end.col; col++) {
+                        for (let col = mergeInfo.start.col; col <= mergeInfo.end.col; col++) {
+                            updateCell$1(col, row, scene.table, false);
+                        }
+                    }
+                }
+                else {
+                    updateCell$1(col, row, scene.table, false);
+                }
+            }
+        });
+        if (isNumber$7(updateAfter)) {
+            for (let col = updateAfter; col < table.colCount; col++) {
+                for (let row = 0; row < table.rowCount; row++) {
+                    const cellGroup = scene.highPerformanceGetCell(col, row, true);
+                    cellGroup && (cellGroup.needUpdate = true);
+                }
+            }
+            scene.proxy.colUpdatePos = updateAfter;
+        }
+        if (addCols.length) {
+            if (!isNumber$7(updateAfter)) {
+                const minCol = Math.min(...addCols);
+                scene.proxy.colUpdatePos = minCol;
+            }
+            scene.proxy.colUpdateDirection = 'left';
+            scene.proxy.updateColGroups(scene.proxy.screenColCount * 2);
+            updateRightFrozeCellGroups();
+            scene.proxy.progress();
+        }
+        else if (removeCols.length) {
+            scene.proxy.updateColGroups(scene.proxy.screenColCount * 2);
+            updateRightFrozeCellGroups();
+            scene.proxy.progress();
+        }
+        const newTotalWidth = table.getColsWidth(table.frozenColCount, table.colCount - 1);
+        scene.updateContainerWidth(scene.table.frozenColCount, newTotalWidth - scene.bodyGroup.attribute.width);
+        function updateRightFrozeCellGroups() {
+            if (addCols?.[addCols?.length - 1] >= table.colCount - table.rightFrozenColCount ||
+                updateCols?.[updateCols?.length - 1] >= table.colCount - table.rightFrozenColCount ||
+                removeCols?.[0] >= table.colCount - table.rightFrozenColCount) {
+                for (let col = table.colCount - table.rightFrozenColCount; col < table.colCount; col++) {
+                    for (let row = 0; row < table.rowCount; row++) {
+                        const cellGroup = scene.highPerformanceGetCell(col, row, true);
+                        cellGroup && (cellGroup.needUpdate = true);
+                    }
+                }
+                scene.proxy.updateRightFrozenCellGroups();
+            }
+        }
+    }
+    function removeCol(col, scene) {
+        const proxy = scene.proxy;
+        if (col >= scene.table.rowHeaderLevelCount) {
+            if (col >= scene.table.colCount - scene.table.rightFrozenColCount) ;
+            else {
+                const colGroup = scene.getColGroup(col, false);
+                if (colGroup && colGroup.parent === scene.bodyGroup) {
+                    scene.bodyGroup.removeChild(colGroup);
+                }
+                const bottomColGroup = scene.getColGroupInBottom(col);
+                if (bottomColGroup && bottomColGroup.parent === scene.bottomFrozenGroup) {
+                    scene.bottomFrozenGroup.removeChild(bottomColGroup);
+                }
+            }
+        }
+        if (col >= proxy.colStart && col <= proxy.colEnd) {
+            proxy.colEnd--;
+            proxy.currentCol--;
+        }
+        proxy.bodyRightCol--;
+        const totalActualBodyColCount = Math.min(proxy.colLimit, proxy.bodyRightCol - proxy.bodyLeftCol + 1);
+        proxy.totalActualBodyColCount = totalActualBodyColCount;
+        proxy.totalCol = proxy.colStart + totalActualBodyColCount - 1;
+    }
+    function addCol(col, scene) {
+        const proxy = scene.proxy;
+        proxy.bodyRightCol++;
+        const totalActualBodyColCount = Math.min(proxy.colLimit, proxy.bodyRightCol - proxy.bodyLeftCol + 1);
+        proxy.totalActualBodyColCount = totalActualBodyColCount;
+        proxy.totalCol = proxy.colStart + totalActualBodyColCount - 1;
+        if (col < proxy.colStart) {
+            return undefined;
+        }
+        else if (col > proxy.colEnd) {
+            if (proxy.colEnd - proxy.colStart + 1 < proxy.colLimit) {
+                proxy.colEnd++;
+                proxy.currentCol++;
+                addColGroup(col, scene);
+                return col;
+            }
+            return undefined;
+        }
+        if (proxy.colEnd - proxy.colStart + 1 < proxy.colLimit) {
+            proxy.colEnd++;
+            proxy.currentCol++;
+            addColGroup(col, scene);
+            return col;
+        }
+        return col;
+    }
+    function deduplication(array) {
+        const result = [];
+        for (let i = 0; i < array.length; i++) {
+            if (result.indexOf(array[i]) === -1) {
+                result.push(array[i]);
+            }
+        }
+        return result;
+    }
+    function resetColNumber(scene) {
+        let colIndex = scene.bodyColStart;
+        scene.bodyGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colIndex++;
+        });
+        colIndex = scene.bodyColStart;
+        scene.colHeaderGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colIndex++;
+        });
+        colIndex = scene.bodyColStart;
+        scene.bottomFrozenGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colIndex++;
+        });
+        function processCell(cellGroup) {
+            cellGroup.col = colIndex;
+            const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
+            if (merge) {
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeEndCol = merge.end.col;
+                cellGroup.mergeEndCol = merge.end.col;
+            }
+            if (cellGroup.role !== 'cell') {
+                return;
+            }
+        }
+    }
+    function resetColNumberAndX(scene) {
+        let colIndex = scene.bodyColStart;
+        let x = scene.getCellGroupX(colIndex);
+        scene.bodyGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colGroup.setAttribute('x', x);
+            x += colGroup.attribute.width;
+            colIndex++;
+        });
+        colIndex = scene.bodyColStart;
+        x = scene.getCellGroupX(colIndex);
+        scene.colHeaderGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colGroup.setAttribute('x', x);
+            x += colGroup.attribute.width;
+            colIndex++;
+        });
+        colIndex = scene.bodyColStart;
+        x = scene.getCellGroupX(colIndex);
+        scene.bottomFrozenGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colGroup.setAttribute('x', x);
+            x += colGroup.attribute.width;
+            colIndex++;
+        });
+        colIndex = scene.table.colCount - scene.table.rightFrozenColCount;
+        x = 0;
+        scene.rightFrozenGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colGroup.setAttribute('x', x);
+            x += colGroup.attribute.width;
+            colIndex++;
+        });
+        colIndex = scene.table.colCount - scene.table.rightFrozenColCount;
+        x = 0;
+        scene.rightTopCornerGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colGroup.setAttribute('x', x);
+            x += colGroup.attribute.width;
+            colIndex++;
+        });
+        colIndex = scene.table.colCount - scene.table.rightFrozenColCount;
+        x = 0;
+        scene.rightBottomCornerGroup.forEachChildren((colGroup) => {
+            colGroup.col = colIndex;
+            colGroup?.forEachChildren((cellGroup) => {
+                processCell(cellGroup);
+            });
+            colGroup.setAttribute('x', x);
+            x += colGroup.attribute.width;
+            colIndex++;
+        });
+        function processCell(cellGroup) {
+            cellGroup.col = colIndex;
+            const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
+            if (merge) {
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeStartCol = merge.start.col;
+                cellGroup.mergeEndCol = merge.end.col;
+                cellGroup.mergeEndCol = merge.end.col;
+            }
+            if (cellGroup.role !== 'cell') {
+                return;
+            }
+        }
+    }
+    function addColGroup(col, scene) {
+        if (scene.colHeaderGroup && scene.table.columnHeaderLevelCount > 0) {
+            const columnGroup = new Group$1({
+                x: 0,
+                y: 0,
+                width: scene.table.getColWidth(col),
+                height: 0,
+                clip: false,
+                pickable: false
+            });
+            columnGroup.role = 'column';
+            columnGroup.col = col;
+            const colAfter = scene.getColGroup(col, true);
+            if (colAfter) {
+                scene.colHeaderGroup.insertBefore(columnGroup, colAfter);
+            }
+            else {
+                scene.colHeaderGroup.appendChild(columnGroup);
+            }
+            generateCellGroup(columnGroup, col, 0, scene.table.columnHeaderLevelCount - 1);
+        }
+        if (scene.bodyGroup) {
+            const columnGroup = new Group$1({
+                x: 0,
+                y: 0,
+                width: scene.table.getColWidth(col),
+                height: 0,
+                clip: false,
+                pickable: false
+            });
+            columnGroup.role = 'column';
+            columnGroup.col = col;
+            const colAfter = scene.getColGroup(col, false);
+            if (colAfter) {
+                scene.bodyGroup.insertBefore(columnGroup, colAfter);
+            }
+            else {
+                scene.bodyGroup.appendChild(columnGroup);
+            }
+            generateCellGroup(columnGroup, col, scene.bodyRowStart, scene.bodyRowEnd);
+        }
+        if (scene.bottomFrozenGroup && scene.table.bottomFrozenRowCount > 0) {
+            const columnGroup = new Group$1({
+                x: 0,
+                y: 0,
+                width: scene.table.getColWidth(col),
+                height: 0,
+                clip: false,
+                pickable: false
+            });
+            columnGroup.role = 'column';
+            columnGroup.col = col;
+            const colAfter = scene.getColGroupInBottom(col);
+            if (colAfter) {
+                scene.bottomFrozenGroup.insertBefore(columnGroup, colAfter);
+            }
+            else {
+                scene.bottomFrozenGroup.appendChild(columnGroup);
+            }
+            generateCellGroup(columnGroup, col, scene.table.rowCount - scene.table.bottomFrozenRowCount, scene.table.rowCount - 1);
+        }
+        function generateCellGroup(group, col, rowStart, rowEnd) {
+            for (let row = rowStart; row <= rowEnd; row++) {
+                const cellGroup = new Group$1({
+                    x: 0,
+                    y: 0,
+                    width: scene.table.getColWidth(col),
+                    height: scene.table.getRowHeight(row)
+                });
+                cellGroup.role = 'cell';
+                cellGroup.col = col;
+                cellGroup.row = row;
+                cellGroup.needUpdate = true;
+                group.appendChild(cellGroup);
+            }
+        }
+    }
+
     loadPoptip();
     container$1.load(splitModule);
     container$1.load(textMeasureModule);
@@ -60895,16 +61449,16 @@
             return this.tableGroup.attribute?.y ?? 0;
         }
         get bodyRowStart() {
-            if (this.transpose || this.isPivot) {
-                return this.table.columnHeaderLevelCount;
-            }
             return this.proxy.rowStart ?? 0;
         }
         get bodyRowEnd() {
-            if (this.transpose || this.isPivot) {
-                return this.table.rowCount - 1;
-            }
-            return this.proxy.rowEnd ?? 0;
+            return this.proxy.rowEnd ?? this.table.rowCount - 1;
+        }
+        get bodyColStart() {
+            return this.proxy.colStart ?? 0;
+        }
+        get bodyColEnd() {
+            return this.proxy.colEnd ?? this.table.colCount - 1;
         }
         initSceneGraph() {
             this.isPivot = this.table.isPivotTable();
@@ -61189,6 +61743,13 @@
         updateCellSelectBorder(newStartCol, newStartRow, newEndCol, newEndRow) {
             updateCellSelectBorder(this, newStartCol, newStartRow, newEndCol, newEndRow);
         }
+        recreateAllSelectRangeComponents() {
+            deleteAllSelectBorder(this);
+            this.table.stateManager.select.ranges.forEach((cellRange) => {
+                updateCellSelectBorder(this, cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row);
+            });
+            moveSelectingRangeComponentsToSelectedRangeComponents(this);
+        }
         updateColWidth(col, detaX, skipUpdateContainer) {
             updateColWidth(this, col, Math.round(detaX));
             if (!skipUpdateContainer) {
@@ -61837,6 +62398,17 @@
             this.component.updateScrollBar();
             this.updateNextFrame();
         }
+        updateCol(removeCells, addCells, updateCells = []) {
+            updateCol(removeCells, addCells, updateCells, this.table);
+            this.recalculateColWidths();
+            this.recalculateRowHeights();
+            this.table.stateManager.checkFrozen();
+            if (!this.isPivot && !this.transpose) {
+                this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
+            }
+            this.component.updateScrollBar();
+            this.updateNextFrame();
+        }
         getColumnGroupX(col) {
             if (col < this.table.rowHeaderLevelCount) {
                 return this.table.getColsWidth(0, col - 1);
@@ -61861,6 +62433,18 @@
             }
             return 0;
         }
+        getCellGroupX(col) {
+            if (col < this.table.rowHeaderLevelCount) {
+                return this.table.getColsWidth(0, col - 1);
+            }
+            else if (col < this.table.colCount - this.table.rightFrozenColCount) {
+                return this.table.getColsWidth(this.table.rowHeaderLevelCount, col - 1);
+            }
+            else if (col < this.table.colCount) {
+                return this.table.getColsWidth(this.table.colCount - this.table.rightFrozenColCount, col - 1);
+            }
+            return 0;
+        }
     }
 
     function checkCellInSelect(col, row, cellRanges) {
@@ -62650,7 +63234,7 @@
     }
     function updateResizeColForAll(detaX, state) {
         const layout = state.table.internalProps.layoutMap;
-        for (let col = state.table.options.frozenColCount; col < state.table.colCount - state.table.rightFrozenColCount; col++) {
+        for (let col = state.table.frozenColCount; col < state.table.colCount - state.table.rightFrozenColCount; col++) {
             if (!(state.table.internalProps.transpose || (state.table.isPivotTable() && !layout.indicatorsAsCol))) {
                 const cellDefine = layout.getBody(col, state.table.columnHeaderLevelCount);
                 if (cellDefine?.disableColumnResize) {
@@ -62750,6 +63334,63 @@
             this.setSelectState();
             this.setFrozenState();
         }
+        updateOptionSetState() {
+            this._updateOptionSetState();
+            this.setHoverState();
+            this.setSelectState();
+            this.setFrozenState();
+        }
+        _updateOptionSetState() {
+            this.interactionState = InteractionState.default;
+            this.hoverIcon = {
+                col: -1,
+                row: -1,
+                icon: null
+            };
+            this.columnResize = {
+                col: -1,
+                x: 0,
+                resizing: false
+            };
+            this.columnMove = {
+                colSource: -1,
+                colTarget: -1,
+                rowSource: -1,
+                rowTarget: -1,
+                x: 0,
+                y: 0,
+                moving: false
+            };
+            this.menu = {
+                x: -1,
+                y: -1,
+                isShow: false,
+                itemList: [],
+                bounds: new Bounds(),
+                highlightIndex: -1,
+                dropDownMenuHighlight: []
+            };
+            this.sort = {
+                col: -1,
+                row: -1,
+                order: 'normal'
+            };
+            this.frozen = {
+                col: -1
+            };
+            this.tablePosition = {
+                absoluteX: 0,
+                absoluteY: 0
+            };
+            this.drill = {
+                col: -1,
+                row: -1
+            };
+            this.sparkLine = {
+                col: -1,
+                row: -1
+            };
+        }
         _initState() {
             this.interactionState = InteractionState.default;
             this.select = {
@@ -63348,7 +63989,7 @@
             }
         }
         setCheckedState(col, row, field, checked) {
-            const recordIndex = this.table.getRecordIndexByCell(col, row);
+            const recordIndex = this.table.getRecordShowIndexByCell(col, row);
             if (recordIndex >= 0) {
                 const dataIndex = this.table.dataSource.getIndexKey(recordIndex);
                 if (this.checkedState[dataIndex]) {
@@ -63383,7 +64024,7 @@
                 }
                 return this.headerCheckedState[field];
             }
-            const recordIndex = this.table.getRecordIndexByCell(col, row);
+            const recordIndex = this.table.getRecordShowIndexByCell(col, row);
             if (recordIndex >= 0) {
                 const dataIndex = this.table.dataSource.getIndexKey(recordIndex);
                 if (isValid$5(this.checkedState[dataIndex]?.[field])) {
@@ -65710,7 +66351,6 @@
                 }
                 if (rootElementTop + rootElementHeight > containerHeight) {
                     rootElementTop = containerHeight - rootElementHeight;
-                    rootElementLeft += rootElementWidth - 2;
                 }
                 if (rootElementTop < 0) {
                     rootElementTop = rootElementTop / 2;
@@ -67780,7 +68420,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.15.5";
+        version = "0.16.1";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -68895,7 +69535,7 @@
             internalProps.title?.release();
             internalProps.layoutMap.release();
             this.scenegraph.clearCells();
-            this.stateManager.initState();
+            this.stateManager.updateOptionSetState();
             this._updateSize();
             this.eventManager.updateEventBinder();
             if (options.legends) {
@@ -69268,7 +69908,7 @@
             if (this.internalProps.layoutMap.isHeader(col, row)) {
                 return undefined;
             }
-            return this.internalProps.dataSource?.get(this.getRecordIndexByCell(col, row));
+            return this.internalProps.dataSource?.get(this.getRecordShowIndexByCell(col, row));
         }
         getRecordByRowCol(col, row) {
             return this.getRecordByCell(col, row);
@@ -69404,7 +70044,7 @@
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 return false;
             }
-            const index = table.getRecordIndexByCell(col, row);
+            const index = table.getRecordShowIndexByCell(col, row);
             return table.internalProps.dataSource.hasField(index, field);
         }
         _getCellStyle(col, row) {
@@ -71464,7 +72104,7 @@
             const { field } = table.internalProps.layoutMap.getBody(col, row);
             return table.getRawFieldData(field, col, row);
         }
-        getRecordIndexByCell(col, row) {
+        getRecordShowIndexByCell(col, row) {
             const { layoutMap } = this.internalProps;
             return layoutMap.getRecordIndexByCell(col, row);
         }
@@ -71490,7 +72130,7 @@
         }
         getCellOriginRecord(col, row) {
             const table = this;
-            const index = table.getRecordIndexByCell(col, row);
+            const index = table.getRecordShowIndexByCell(col, row);
             if (index > -1) {
                 return table.dataSource.get(index);
             }
@@ -71498,7 +72138,7 @@
         }
         getCellRawRecord(col, row) {
             const table = this;
-            const index = table.getRecordIndexByCell(col, row);
+            const index = table.getRecordShowIndexByCell(col, row);
             if (index > -1) {
                 return table.dataSource.getRaw(index);
             }
@@ -71606,6 +72246,9 @@
                     (table.internalProps.dataSource?.length ?? 0) * layoutMap.bodyRowSpanCount + layoutMap.headerLevelCount;
                 table.frozenRowCount = 0;
                 this.internalProps.frozenColCount = layoutMap.headerLevelCount ?? 0;
+                if (table.bottomFrozenRowCount !== (this.options.bottomFrozenRowCount ?? 0)) {
+                    table.bottomFrozenRowCount = this.options.bottomFrozenRowCount ?? 0;
+                }
                 if (table.rightFrozenColCount !== (this.options.rightFrozenColCount ?? 0)) {
                     table.rightFrozenColCount = this.options.rightFrozenColCount ?? 0;
                 }
@@ -71633,7 +72276,7 @@
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 return null;
             }
-            const index = table.getRecordIndexByCell(col, row);
+            const index = table.getRecordShowIndexByCell(col, row);
             return table.internalProps.dataSource.getField(index, field, col, row, this);
         }
         getRawFieldData(field, col, row) {
@@ -71644,7 +72287,7 @@
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 return null;
             }
-            const index = table.getRecordIndexByCell(col, row);
+            const index = table.getRecordShowIndexByCell(col, row);
             return table.internalProps.dataSource.getRawField(index, field, col, row, this);
         }
         moveHeaderPosition(source, target) {
@@ -71751,7 +72394,7 @@
             if (!define.tree) {
                 return HierarchyState.none;
             }
-            const index = this.getRecordIndexByCell(col, row);
+            const index = this.getRecordShowIndexByCell(col, row);
             return this.dataSource.getHierarchyState(index);
         }
         toggleHierarchyState(col, row) {
@@ -71778,7 +72421,7 @@
             }
         }
         _refreshHierarchyState(col, row) {
-            const index = this.getRecordIndexByCell(col, row);
+            const index = this.getRecordShowIndexByCell(col, row);
             const diffDataIndices = this.dataSource.toggleHierarchyState(index);
             const diffPositions = this.internalProps.layoutMap.toggleHierarchyState(diffDataIndices);
             this.refreshRowColCount();
@@ -71878,7 +72521,7 @@
             const field = define?.field;
             const cellType = define?.cellType;
             if (isValid$5(field) && cellType === 'checkbox') {
-                const dataIndex = this.dataSource.getIndexKey(this.getRecordIndexByCell(col, row));
+                const dataIndex = this.dataSource.getIndexKey(this.getRecordShowIndexByCell(col, row));
                 return this.stateManager.checkedState[dataIndex][field];
             }
             return undefined;
@@ -71935,7 +72578,7 @@
         setRecordChildren(records, col, row) {
             const record = this.getCellOriginRecord(col, row);
             record.children = records;
-            const index = this.getRecordIndexByCell(col, row);
+            const index = this.getRecordShowIndexByCell(col, row);
             this.dataSource.setRecord(record, index);
             this._refreshHierarchyState(col, row);
         }
@@ -71972,7 +72615,7 @@
             return editorDefine;
         }
         changeCellValue(col, row, value) {
-            const recordIndex = this.getRecordIndexByCell(col, row);
+            const recordIndex = this.getRecordShowIndexByCell(col, row);
             const { field } = this.internalProps.layoutMap.getBody(col, row);
             this.dataSource.changeFieldValue(value, recordIndex, field, col, row, this);
             this.scenegraph.updateCellContent(col, row);
@@ -72004,6 +72647,226 @@
             });
             this.scenegraph.updateNextFrame();
         }
+        addRecord(record, recordIndex) {
+            if (this.sortState) {
+                this.dataSource.addRecordForSorted(record);
+                sortRecords(this);
+                this.refreshRowColCount();
+                this.scenegraph.clearCells();
+                this.scenegraph.createSceneGraph();
+            }
+            else {
+                if (recordIndex === undefined || recordIndex > this.dataSource.sourceLength) {
+                    recordIndex = this.dataSource.sourceLength;
+                }
+                const headerCount = this.transpose ? this.rowHeaderLevelCount : this.columnHeaderLevelCount;
+                this.dataSource.addRecord(record, recordIndex);
+                const oldRowCount = this.rowCount;
+                this.refreshRowColCount();
+                const newRowCount = this.transpose ? this.colCount : this.rowCount;
+                if (this.pagination) {
+                    const { perPageCount, currentPage } = this.pagination;
+                    const startIndex = perPageCount * (currentPage || 0);
+                    const endIndex = startIndex + perPageCount;
+                    if (recordIndex < endIndex) {
+                        if (recordIndex < endIndex - perPageCount) {
+                            this.scenegraph.clearCells();
+                            this.scenegraph.createSceneGraph();
+                        }
+                        else {
+                            const rowNum = recordIndex - (endIndex - perPageCount) + headerCount;
+                            if (oldRowCount - headerCount === this.pagination.perPageCount) {
+                                const updateRows = [];
+                                for (let row = rowNum; row < newRowCount; row++) {
+                                    if (this.transpose) {
+                                        updateRows.push({ col: row, row: 0 });
+                                    }
+                                    else {
+                                        updateRows.push({ col: 0, row });
+                                    }
+                                }
+                                this.transpose
+                                    ? this.scenegraph.updateCol([], [], updateRows)
+                                    : this.scenegraph.updateRow([], [], updateRows);
+                            }
+                            else {
+                                const addRows = [];
+                                for (let row = rowNum; row < Math.min(newRowCount, rowNum + 1); row++) {
+                                    if (this.transpose) {
+                                        addRows.push({ col: row, row: 0 });
+                                    }
+                                    else {
+                                        addRows.push({ col: 0, row });
+                                    }
+                                }
+                                this.transpose ? this.scenegraph.updateCol([], addRows, []) : this.scenegraph.updateRow([], addRows, []);
+                            }
+                        }
+                    }
+                }
+                else {
+                    const addRows = [];
+                    for (let row = recordIndex + headerCount; row < recordIndex + headerCount + 1; row++) {
+                        if (this.transpose) {
+                            addRows.push({ col: row, row: 0 });
+                        }
+                        else {
+                            addRows.push({ col: 0, row });
+                        }
+                    }
+                    this.transpose ? this.scenegraph.updateCol([], addRows, []) : this.scenegraph.updateRow([], addRows, []);
+                }
+            }
+        }
+        addRecords(records, recordIndex) {
+            if (this.sortState) {
+                this.dataSource.addRecordsForSorted(records);
+                sortRecords(this);
+                this.refreshRowColCount();
+                this.scenegraph.clearCells();
+                this.scenegraph.createSceneGraph();
+            }
+            else {
+                if (recordIndex === undefined || recordIndex > this.dataSource.sourceLength) {
+                    recordIndex = this.dataSource.sourceLength;
+                }
+                else if (recordIndex < 0) {
+                    recordIndex = 0;
+                }
+                const headerCount = this.transpose ? this.rowHeaderLevelCount : this.columnHeaderLevelCount;
+                this.dataSource.addRecords(records, recordIndex);
+                const oldRowCount = this.transpose ? this.colCount : this.rowCount;
+                this.refreshRowColCount();
+                const newRowCount = this.transpose ? this.colCount : this.rowCount;
+                if (this.pagination) {
+                    const { perPageCount, currentPage } = this.pagination;
+                    const startIndex = perPageCount * (currentPage || 0);
+                    const endIndex = startIndex + perPageCount;
+                    if (recordIndex < endIndex) {
+                        if (recordIndex < endIndex - perPageCount) {
+                            this.scenegraph.clearCells();
+                            this.scenegraph.createSceneGraph();
+                        }
+                        else {
+                            const rowNum = recordIndex - (endIndex - perPageCount) + headerCount;
+                            if (oldRowCount - headerCount === this.pagination.perPageCount) {
+                                const updateRows = [];
+                                for (let row = rowNum; row < newRowCount; row++) {
+                                    if (this.transpose) {
+                                        updateRows.push({ col: row, row: 0 });
+                                    }
+                                    else {
+                                        updateRows.push({ col: 0, row });
+                                    }
+                                }
+                                this.transpose
+                                    ? this.scenegraph.updateCol([], [], updateRows)
+                                    : this.scenegraph.updateRow([], [], updateRows);
+                            }
+                            else {
+                                const addRows = [];
+                                for (let row = rowNum; row < Math.min(newRowCount, rowNum + (Array.isArray(records) ? records.length : 1)); row++) {
+                                    if (this.transpose) {
+                                        addRows.push({ col: row, row: 0 });
+                                    }
+                                    else {
+                                        addRows.push({ col: 0, row });
+                                    }
+                                }
+                                this.transpose ? this.scenegraph.updateCol([], addRows, []) : this.scenegraph.updateRow([], addRows, []);
+                            }
+                        }
+                    }
+                }
+                else {
+                    const addRows = [];
+                    for (let row = recordIndex + headerCount; row < recordIndex + headerCount + (Array.isArray(records) ? records.length : 1); row++) {
+                        if (this.transpose) {
+                            addRows.push({ col: row, row: 0 });
+                        }
+                        else {
+                            addRows.push({ col: 0, row });
+                        }
+                    }
+                    this.transpose ? this.scenegraph.updateCol([], addRows, []) : this.scenegraph.updateRow([], addRows, []);
+                }
+            }
+        }
+        deleteRecords(recordIndexs) {
+            if (recordIndexs?.length > 0) {
+                if (this.sortState) {
+                    this.dataSource.deleteRecordsForSorted(recordIndexs);
+                    sortRecords(this);
+                    this.refreshRowColCount();
+                    this.scenegraph.clearCells();
+                    this.scenegraph.createSceneGraph();
+                }
+                else {
+                    const deletedRecordIndexs = this.dataSource.deleteRecords(recordIndexs);
+                    if (deletedRecordIndexs.length === 0) {
+                        return;
+                    }
+                    const oldRowCount = this.transpose ? this.colCount : this.rowCount;
+                    this.refreshRowColCount();
+                    const newRowCount = this.transpose ? this.colCount : this.rowCount;
+                    const recordIndexsMinToMax = deletedRecordIndexs.sort((a, b) => a - b);
+                    const minRecordIndex = recordIndexsMinToMax[0];
+                    if (this.pagination) {
+                        const { perPageCount, currentPage } = this.pagination;
+                        const startIndex = perPageCount * (currentPage || 0);
+                        const endIndex = startIndex + perPageCount;
+                        if (minRecordIndex < endIndex) {
+                            if (minRecordIndex < endIndex - perPageCount) {
+                                this.scenegraph.clearCells();
+                                this.scenegraph.createSceneGraph();
+                            }
+                            else {
+                                const minRowNum = minRecordIndex -
+                                    (endIndex - perPageCount) +
+                                    (this.transpose ? this.rowHeaderLevelCount : this.columnHeaderLevelCount);
+                                const updateRows = [];
+                                const delRows = [];
+                                for (let row = minRowNum; row < newRowCount; row++) {
+                                    if (this.transpose) {
+                                        updateRows.push({ col: row, row: 0 });
+                                    }
+                                    else {
+                                        updateRows.push({ col: 0, row });
+                                    }
+                                }
+                                if (newRowCount < oldRowCount) {
+                                    for (let row = newRowCount; row < oldRowCount; row++) {
+                                        if (this.transpose) {
+                                            delRows.push({ col: row, row: 0 });
+                                        }
+                                        else {
+                                            delRows.push({ col: 0, row });
+                                        }
+                                    }
+                                }
+                                this.transpose
+                                    ? this.scenegraph.updateCol(delRows, [], updateRows)
+                                    : this.scenegraph.updateRow(delRows, [], updateRows);
+                            }
+                        }
+                    }
+                    else {
+                        const delRows = [];
+                        for (let index = 0; index < recordIndexsMinToMax.length; index++) {
+                            const recordIndex = recordIndexsMinToMax[index];
+                            const rowNum = recordIndex + (this.transpose ? this.rowHeaderLevelCount : this.columnHeaderLevelCount);
+                            if (this.transpose) {
+                                delRows.push({ col: rowNum, row: 0 });
+                            }
+                            else {
+                                delRows.push({ col: 0, row: rowNum });
+                            }
+                        }
+                        this.transpose ? this.scenegraph.updateCol(delRows, [], []) : this.scenegraph.updateRow(delRows, [], []);
+                    }
+                }
+            }
+        }
     }
 
     class DimensionTree {
@@ -76243,7 +77106,7 @@
                 });
             }
         }
-        getRecordIndexByCell(col, row) {
+        getRecordShowIndexByCell(col, row) {
             return undefined;
         }
         getTableIndexByRecordIndex(recordIndex) {
@@ -76876,7 +77739,7 @@
                 });
             }
         }
-        getRecordIndexByCell(col, row) {
+        getRecordShowIndexByCell(col, row) {
             return undefined;
         }
         getTableIndexByRecordIndex(recordIndex) {
@@ -77978,7 +78841,7 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.15.5";
+    const version = "0.16.1";
     function getIcons() {
         return get$2();
     }