@visactor/vtable 0.9.3-alpha.7 → 0.10.0

package/dist/vtable.js

@@ -28300,153 +28300,6 @@
       params[params.W = 1] = "W", params[params.H = 2] = "H", params[params.WH = 3] = "WH";
     }(params || (params = {}));
 
-    class Group extends Group$1 {
-        role;
-        col;
-        row;
-        mergeCol;
-        mergeRow;
-        rowNumber;
-        colHeight;
-        border;
-        needUpdate;
-        clear() {
-            this.removeAllChild();
-        }
-        getChildByName(name, deep) {
-            let result = null;
-            this.forEachChildren((child) => {
-                if (child.name === name) {
-                    result = child;
-                    return true;
-                }
-                return false;
-            });
-            if (deep) {
-                this.forEachChildren((child) => {
-                    if (child.getChildByName) {
-                        const target = child.getChildByName(name, true);
-                        if (target) {
-                            result = target;
-                            return true;
-                        }
-                    }
-                    return false;
-                });
-            }
-            return result;
-        }
-        get width() {
-            let width = this.AABBBounds.width();
-            if (width === Infinity || width === -Infinity) {
-                width = 0;
-            }
-            return Math.max(width, this.attribute.width ?? 0);
-        }
-        get height() {
-            let height = this.AABBBounds.height();
-            if (height === Infinity || height === -Infinity) {
-                height = 0;
-            }
-            return Math.max(height, this.attribute.height ?? 0);
-        }
-        setDeltaWidth(deltaX) {
-            this.setAttribute('width', (this.attribute.width ?? 0) + deltaX);
-            if (this.border) {
-                this.border.setAttribute('width', this.border.attribute.width + deltaX);
-            }
-        }
-        setDeltaHeight(deltaY) {
-            this.setAttribute('height', (this.attribute.height ?? 0) + deltaY);
-            if (this.border) {
-                this.border.setAttribute('height', this.border.attribute.height + deltaY);
-            }
-        }
-        setDeltaX(deltaX) {
-            this.setAttribute('x', this.attribute.x + deltaX);
-        }
-        setDeltaY(deltaY) {
-            this.setAttribute('y', this.attribute.y + deltaY);
-        }
-        forEachChildrenSkipChild(cb, skipChildName = 'border-rect', reverse = false) {
-            if (reverse) {
-                let child = this._lastChild;
-                let i = 0;
-                while (child) {
-                    if (child.name !== skipChildName) {
-                        const breakTag = cb(child, i++);
-                        if (breakTag) {
-                            return;
-                        }
-                    }
-                    child = child._prev;
-                }
-            }
-            else {
-                let child = this._firstChild;
-                let i = 0;
-                while (child) {
-                    if (child.name !== skipChildName) {
-                        const breakTag = cb(child, i++);
-                        if (breakTag) {
-                            return;
-                        }
-                    }
-                    child = child._next;
-                }
-            }
-        }
-        getColGroup(col) {
-            let c = this._firstChild;
-            if (!c) {
-                return null;
-            }
-            for (let i = 0; i < this.childrenCount; i++) {
-                if (c.col === col) {
-                    return c;
-                }
-                c = c._next;
-            }
-            return null;
-        }
-        getRowGroup(row) {
-            let c = this._firstChild;
-            if (!c) {
-                return null;
-            }
-            for (let i = 0; i < this.childrenCount; i++) {
-                if (c.row === row) {
-                    return c;
-                }
-                c = c._next;
-            }
-            return null;
-        }
-        getChildAt(index) {
-            const child = super.getChildAt(index);
-            if (child && child.name === 'border-rect') {
-                return child._next;
-            }
-            return child;
-        }
-        updateColumnRowNumber(row) {
-            if (!this.rowNumber) {
-                this.rowNumber = row;
-            }
-            else {
-                this.rowNumber = Math.max(this.rowNumber, row);
-            }
-        }
-        updateColumnHeight(cellHeight) {
-            if (!this.colHeight) {
-                this.colHeight = cellHeight;
-            }
-            else {
-                this.colHeight += cellHeight;
-            }
-        }
-    }
-
     function getCellMergeInfo(table, col, row) {
         if (!table.isHeader(col, row) && table.getBodyColumnDefine(col, row)?.mergeCell !== true) {
             return false;
@@ -36651,6 +36504,19 @@
             attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
             this.component = new LineAxis(merge$2({}, axisStylrAttrs, attrs));
             this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
+            this.component.originAxis = this;
+        }
+        resize(width, height) {
+            this.width = width;
+            this.height = height;
+            this.updateScaleRange();
+            this.computeData();
+            const axisStylrAttrs = getAxisAttributes(this.option);
+            const attrs = this.getUpdateAttribute();
+            attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
+            this.component.setAttributes(merge$2({}, axisStylrAttrs, attrs));
+            this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
+            this.overlap();
         }
         overlap() {
             doOverlap(this.component, this);
@@ -38234,55 +38100,202 @@
         return extend(builtins, icons);
     }
 
-    function calcKeepAspectRatioSize(width, height, maxWidth, maxHeight) {
-        let newWidth = width;
-        let newHeight = height;
-        if (newWidth > maxWidth) {
-            newWidth = maxWidth;
-            newHeight = (newWidth * height) / width;
+    class Group extends Group$1 {
+        role;
+        col;
+        row;
+        mergeCol;
+        mergeRow;
+        rowNumber;
+        colHeight;
+        border;
+        needUpdate;
+        clear() {
+            this.removeAllChild();
         }
-        if (newHeight > maxHeight) {
-            newHeight = maxHeight;
-            newWidth = (newHeight * width) / height;
+        getChildByName(name, deep) {
+            let result = null;
+            this.forEachChildren((child) => {
+                if (child.name === name) {
+                    result = child;
+                    return true;
+                }
+                return false;
+            });
+            if (deep) {
+                this.forEachChildren((child) => {
+                    if (child.getChildByName) {
+                        const target = child.getChildByName(name, true);
+                        if (target) {
+                            result = target;
+                            return true;
+                        }
+                    }
+                    return false;
+                });
+            }
+            return result;
         }
-        return {
-            width: newWidth,
-            height: newHeight
-        };
-    }
-
-    function calcStartPosition(left, top, width, height, contentWidth, contentHeight, textAlign = 'left', textBaseline = 'middle', margin = [0, 0, 0, 0], paddingLeft = 0, paddingRight = 0, paddingTop = 0, paddingBottom = 0) {
-        const right = left + width;
-        const bottom = top + height;
-        let x = left + margin[3] + paddingLeft;
-        if (textAlign === 'right' || textAlign === 'end') {
-            x = right - contentWidth - margin[1] - paddingRight;
+        get width() {
+            let width = this.AABBBounds.width();
+            if (width === Infinity || width === -Infinity) {
+                width = 0;
+            }
+            return Math.max(width, this.attribute.width ?? 0);
         }
-        else if (textAlign === 'center') {
-            x = left + (width - contentWidth + paddingLeft - paddingRight) / 2;
+        get height() {
+            let height = this.AABBBounds.height();
+            if (height === Infinity || height === -Infinity) {
+                height = 0;
+            }
+            return Math.max(height, this.attribute.height ?? 0);
         }
-        let y = top + margin[0] + paddingTop;
-        if (textBaseline === 'bottom' || textBaseline === 'alphabetic' || textBaseline === 'ideographic') {
-            y = bottom - contentHeight - margin[2] - paddingBottom;
+        setDeltaWidth(deltaX) {
+            this.setAttribute('width', (this.attribute.width ?? 0) + deltaX);
+            if (this.border) {
+                this.border.setAttribute('width', this.border.attribute.width + deltaX);
+            }
         }
-        else if (textBaseline === 'middle') {
-            y = top + (height - contentHeight + paddingTop - paddingBottom) / 2;
+        setDeltaHeight(deltaY) {
+            this.setAttribute('height', (this.attribute.height ?? 0) + deltaY);
+            if (this.border) {
+                this.border.setAttribute('height', this.border.attribute.height + deltaY);
+            }
         }
-        return { x, y };
-    }
-
-    function getProp(name, cellStyle, col, row, _table) {
-        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
-        if (typeof prop === 'function') {
-            const arg = {
-                col,
-                row,
-                table: _table,
-                value: _table.getCellValue(col, row),
-                dataValue: _table.getCellOriginValue(col, row),
-                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
-            };
-            return prop(arg);
+        setDeltaX(deltaX) {
+            this.setAttribute('x', this.attribute.x + deltaX);
+        }
+        setDeltaY(deltaY) {
+            this.setAttribute('y', this.attribute.y + deltaY);
+        }
+        forEachChildrenSkipChild(cb, skipChildName = 'border-rect', reverse = false) {
+            if (reverse) {
+                let child = this._lastChild;
+                let i = 0;
+                while (child) {
+                    if (child.name !== skipChildName) {
+                        const breakTag = cb(child, i++);
+                        if (breakTag) {
+                            return;
+                        }
+                    }
+                    child = child._prev;
+                }
+            }
+            else {
+                let child = this._firstChild;
+                let i = 0;
+                while (child) {
+                    if (child.name !== skipChildName) {
+                        const breakTag = cb(child, i++);
+                        if (breakTag) {
+                            return;
+                        }
+                    }
+                    child = child._next;
+                }
+            }
+        }
+        getColGroup(col) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
+            }
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.col === col) {
+                    return c;
+                }
+                c = c._next;
+            }
+            return null;
+        }
+        getRowGroup(row) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
+            }
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.row === row) {
+                    return c;
+                }
+                c = c._next;
+            }
+            return null;
+        }
+        getChildAt(index) {
+            const child = super.getChildAt(index);
+            if (child && child.name === 'border-rect') {
+                return child._next;
+            }
+            return child;
+        }
+        updateColumnRowNumber(row) {
+            if (!this.rowNumber) {
+                this.rowNumber = row;
+            }
+            else {
+                this.rowNumber = Math.max(this.rowNumber, row);
+            }
+        }
+        updateColumnHeight(cellHeight) {
+            if (!this.colHeight) {
+                this.colHeight = cellHeight;
+            }
+            else {
+                this.colHeight += cellHeight;
+            }
+        }
+    }
+
+    function calcKeepAspectRatioSize(width, height, maxWidth, maxHeight) {
+        let newWidth = width;
+        let newHeight = height;
+        if (newWidth > maxWidth) {
+            newWidth = maxWidth;
+            newHeight = (newWidth * height) / width;
+        }
+        if (newHeight > maxHeight) {
+            newHeight = maxHeight;
+            newWidth = (newHeight * width) / height;
+        }
+        return {
+            width: newWidth,
+            height: newHeight
+        };
+    }
+
+    function calcStartPosition(left, top, width, height, contentWidth, contentHeight, textAlign = 'left', textBaseline = 'middle', margin = [0, 0, 0, 0], paddingLeft = 0, paddingRight = 0, paddingTop = 0, paddingBottom = 0) {
+        const right = left + width;
+        const bottom = top + height;
+        let x = left + margin[3] + paddingLeft;
+        if (textAlign === 'right' || textAlign === 'end') {
+            x = right - contentWidth - margin[1] - paddingRight;
+        }
+        else if (textAlign === 'center') {
+            x = left + (width - contentWidth + paddingLeft - paddingRight) / 2;
+        }
+        let y = top + margin[0] + paddingTop;
+        if (textBaseline === 'bottom' || textBaseline === 'alphabetic' || textBaseline === 'ideographic') {
+            y = bottom - contentHeight - margin[2] - paddingBottom;
+        }
+        else if (textBaseline === 'middle') {
+            y = top + (height - contentHeight + paddingTop - paddingBottom) / 2;
+        }
+        return { x, y };
+    }
+
+    function getProp(name, cellStyle, col, row, _table) {
+        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
+        if (typeof prop === 'function') {
+            const arg = {
+                col,
+                row,
+                table: _table,
+                value: _table.getCellValue(col, row),
+                dataValue: _table.getCellOriginValue(col, row),
+                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+            };
+            return prop(arg);
         }
         return prop;
     }
@@ -38332,7 +38345,7 @@
         cellGroup.role = 'cell';
         cellGroup.col = col;
         cellGroup.row = row;
-        columnGroup.addChild(cellGroup);
+        columnGroup?.addChild(cellGroup);
         const value = table.getCellValue(col, row);
         const image = createImage({
             x: padding[3],
@@ -38903,7 +38916,7 @@
             cellGroup.role = 'cell';
             cellGroup.col = col;
             cellGroup.row = row;
-            columnGroup.addChild(cellGroup);
+            columnGroup?.addChild(cellGroup);
         }
         const chartGroup = createSparkLine(col, row, width, height, padding, table);
         if (chartGroup) {
@@ -40420,6 +40433,9 @@
         else if (type === 'image' || type === 'video') {
             updateImageCellContentWhileResize(cell, col, row, scene.table);
         }
+        else if (cell.firstChild?.name === 'axis') {
+            cell.firstChild?.originAxis.resize(cell.attribute.width, cell.attribute.height);
+        }
         else {
             const style = scene.table._getCellStyle(col, row);
             updateCellContentHeight(cell, distHeight, detaY, scene.table.heightMode === 'autoHeight', getQuadProps(style.padding), style.textAlign, style.textBaseline);
@@ -40453,111 +40469,21 @@
 
     function updateColWidth(scene, col, detaX) {
         const autoRowHeight = scene.table.heightMode === 'autoHeight';
-        let needRerangeRow = false;
         const colOrCornerHeaderColumn = scene.getColGroup(col, true);
-        const oldColOrCornerHeaderColumnWidth = colOrCornerHeaderColumn?.attribute.width;
-        colOrCornerHeaderColumn?.setAttribute('width', oldColOrCornerHeaderColumnWidth + detaX);
-        colOrCornerHeaderColumn?.forEachChildren((cell, index) => {
-            const isHeightChange = updateCellWidth(scene, cell, col, cell.row, oldColOrCornerHeaderColumnWidth, detaX, index < scene.table.columnHeaderLevelCount, autoRowHeight);
-            if (isHeightChange) {
-                const mergeInfo = getCellMergeInfo(scene.table, cell.col, cell.row);
-                if (mergeInfo && mergeInfo.end.row - mergeInfo.start.row) {
-                    for (let row = mergeInfo.start.row; row <= mergeInfo.end.row; row++) {
-                        resetRowHeight(scene, row);
-                    }
-                }
-                else {
-                    resetRowHeight(scene, cell.row);
-                }
-                needRerangeRow = true;
-            }
-        });
-        if (needRerangeRow) {
-            let newTotalHeight = 0;
-            for (let col = 0; col < scene.table.colCount; col++) {
-                const colGroup = scene.getColGroup(col, true);
-                let y = 0;
-                colGroup.forEachChildren((cellGroup) => {
-                    if (cellGroup.role !== 'cell') {
-                        return;
-                    }
-                    cellGroup.setAttribute('y', y);
-                    y += cellGroup.attribute.height;
-                });
-                newTotalHeight = y;
-            }
-            scene.updateContainerHeight(0, newTotalHeight - scene.colHeaderGroup.attribute.height);
+        if (colOrCornerHeaderColumn) {
+            updateColunmWidth(colOrCornerHeaderColumn, detaX, autoRowHeight, 'col-corner', scene);
         }
-        needRerangeRow = false;
         const rowHeaderOrBodyColumn = scene.getColGroup(col);
-        const oldRowHeaderOrBodyColumn = rowHeaderOrBodyColumn.attribute.width;
-        rowHeaderOrBodyColumn?.setAttribute('width', oldRowHeaderOrBodyColumn + detaX);
-        rowHeaderOrBodyColumn?.forEachChildren((cell, index) => {
-            const isHeightChange = updateCellWidth(scene, cell, cell.col, cell.row, oldRowHeaderOrBodyColumn, detaX, col < scene.table.rowHeaderLevelCount, autoRowHeight);
-            if (isHeightChange) {
-                const mergeInfo = getCellMergeInfo(scene.table, cell.col, cell.row);
-                if (mergeInfo && mergeInfo.end.row - mergeInfo.start.row) {
-                    for (let row = mergeInfo.start.row; row <= mergeInfo.end.row; row++) {
-                        resetRowHeight(scene, row);
-                    }
-                }
-                else {
-                    resetRowHeight(scene, cell.row);
-                }
-                needRerangeRow = true;
-            }
-        });
-        if (needRerangeRow) {
-            let newTotalHeight = 0;
-            for (let col = 0; col < scene.table.colCount; col++) {
-                const colGroup = scene.getColGroup(col, false);
-                let y = 0;
-                colGroup.forEachChildren((cellGroup) => {
-                    if (cellGroup.role !== 'cell') {
-                        return;
-                    }
-                    cellGroup.setAttribute('y', y);
-                    y += cellGroup.attribute.height;
-                });
-                newTotalHeight = y;
-            }
-            scene.updateContainerHeight(scene.table.frozenRowCount, newTotalHeight - scene.bodyGroup.attribute.height);
+        if (rowHeaderOrBodyColumn) {
+            updateColunmWidth(rowHeaderOrBodyColumn, detaX, autoRowHeight, 'row-body', scene);
+        }
+        const leftBottomColumn = scene.getColGroupInLeftBottomCorner(col);
+        if (leftBottomColumn) {
+            updateColunmWidth(leftBottomColumn, detaX, autoRowHeight, 'left-bottom', scene);
         }
         const bottomColumn = scene.getColGroupInBottom(col);
         if (bottomColumn) {
-            const oldBottomColumnWidth = bottomColumn.attribute.width;
-            bottomColumn?.setAttribute('width', oldBottomColumnWidth + detaX);
-            bottomColumn?.forEachChildren((cell, index) => {
-                const isHeightChange = updateCellWidth(scene, cell, cell.col, cell.row, oldBottomColumnWidth, detaX, col < scene.table.rowHeaderLevelCount, autoRowHeight);
-                if (isHeightChange) {
-                    const mergeInfo = getCellMergeInfo(scene.table, cell.col, cell.row);
-                    if (mergeInfo && mergeInfo.end.row - mergeInfo.start.row) {
-                        for (let row = mergeInfo.start.row; row <= mergeInfo.end.row; row++) {
-                            resetRowHeight(scene, row);
-                        }
-                    }
-                    else {
-                        resetRowHeight(scene, cell.row);
-                    }
-                    needRerangeRow = true;
-                }
-            });
-            if (needRerangeRow) {
-                let newTotalHeight = 0;
-                for (let col = 0; col < scene.table.colCount; col++) {
-                    const colGroup = scene.getColGroup(col, false);
-                    let y = 0;
-                    colGroup.forEachChildren((cellGroup) => {
-                        if (cellGroup.role !== 'cell') {
-                            return;
-                        }
-                        cellGroup.setAttribute('y', y);
-                        y += cellGroup.attribute.height;
-                    });
-                    newTotalHeight = y;
-                }
-                scene.updateContainerHeight(scene.table.frozenRowCount, newTotalHeight - scene.bodyGroup.attribute.height);
-            }
+            updateColunmWidth(bottomColumn, detaX, autoRowHeight, 'bottom', scene);
         }
         if (col < scene.frozenColCount) {
             scene.cornerHeaderGroup.forEachChildrenSkipChild((column, index) => {
@@ -40582,15 +40508,81 @@
                     column.setAttribute('x', column.attribute.x + detaX);
                 }
             });
-            if (bottomColumn) {
-                scene.bottomFrozenGroup.forEachChildrenSkipChild((column, index) => {
-                    if (column.col > col) {
-                        column.setAttribute('x', column.attribute.x + detaX);
+        }
+        if (leftBottomColumn) {
+            scene.leftBottomCornerGroup.forEachChildrenSkipChild((column, index) => {
+                if (column.col > col) {
+                    column.setAttribute('x', column.attribute.x + detaX);
+                }
+            });
+        }
+        if (bottomColumn) {
+            scene.bottomFrozenGroup.forEachChildrenSkipChild((column, index) => {
+                if (column.col > col) {
+                    column.setAttribute('x', column.attribute.x + detaX);
+                }
+            });
+        }
+        scene.table.setColWidth(col, rowHeaderOrBodyColumn.attribute.width, true);
+    }
+    function updateColunmWidth(columnGroup, detaX, autoRowHeight, mode, scene) {
+        let needRerangeRow = false;
+        const oldColumnWidth = columnGroup?.attribute.width ?? 0;
+        columnGroup?.setAttribute('width', oldColumnWidth + detaX);
+        columnGroup?.forEachChildren((cell, index) => {
+            const isHeightChange = updateCellWidth(scene, cell, cell.col, cell.row, oldColumnWidth, detaX, mode === 'row-body' ? cell.col < scene.table.rowHeaderLevelCount : true, autoRowHeight);
+            if (isHeightChange) {
+                const mergeInfo = getCellMergeInfo(scene.table, cell.col, cell.row);
+                if (mergeInfo && mergeInfo.end.row - mergeInfo.start.row) {
+                    for (let row = mergeInfo.start.row; row <= mergeInfo.end.row; row++) {
+                        resetRowHeight(scene, row);
+                    }
+                }
+                else {
+                    resetRowHeight(scene, cell.row);
+                }
+                needRerangeRow = true;
+            }
+        });
+        if (needRerangeRow) {
+            let newTotalHeight = 0;
+            let colGroup;
+            let oldContainerHeight;
+            let row;
+            for (let col = 0; col < scene.table.colCount; col++) {
+                if (mode === 'col-corner') {
+                    row = 0;
+                    colGroup = scene.getColGroup(col, true);
+                    oldContainerHeight = scene.colHeaderGroup.attribute.height ?? 0;
+                }
+                else if (mode === 'row-body') {
+                    row = scene.table.frozenRowCount;
+                    colGroup = scene.getColGroup(col, false);
+                    oldContainerHeight = scene.bodyGroup.attribute.height ?? 0;
+                }
+                else if (mode === 'bottom') {
+                    row = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+                    colGroup = scene.getColGroupInBottom(col);
+                    oldContainerHeight = scene.bottomFrozenGroup.attribute.height ?? 0;
+                }
+                else if (mode === 'left-bottom') {
+                    row = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+                    colGroup = scene.getColGroupInLeftBottomCorner(col);
+                    oldContainerHeight = scene.leftBottomCornerGroup.attribute.height ?? 0;
+                }
+                let y = 0;
+                colGroup.forEachChildren((cellGroup) => {
+                    if (cellGroup.role !== 'cell') {
+                        cellGroup.setAttribute('y', y);
+                        return;
                     }
+                    cellGroup.setAttribute('y', y);
+                    y += cellGroup.attribute.height ?? 0;
                 });
+                newTotalHeight = y;
             }
+            scene.updateContainerHeight(row, newTotalHeight - oldContainerHeight);
         }
-        scene.table.setColWidth(col, rowHeaderOrBodyColumn.attribute.width, true);
     }
     function updateCellWidth(scene, cell, col, row, width, detaX, isHeader, autoRowHeight) {
         let cellGroup;
@@ -40655,6 +40647,9 @@
                 axis.overlap();
             }
         }
+        else if (cell.firstChild?.name === 'axis') {
+            cell.firstChild?.originAxis.resize(cell.attribute.width, cell.attribute.height);
+        }
         else {
             const style = scene.table._getCellStyle(col, row);
             isHeightChange = updateCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline, scene);
@@ -41801,18 +41796,101 @@
         }
     }
 
-    const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
-        type;
-        numberType = CHART_NUMBER_TYPE;
-        drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
-            const groupAttribute = getTheme(chart, params?.theme).group;
-            const { dataId, data } = chart.attribute;
-            const viewBox = chart.getViewBox();
-            const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
-            const { chartInstance, active, cacheCanvas, activeChartInstance } = chart;
-            if (!active && cacheCanvas) {
-                context.drawImage(cacheCanvas, x, y, width, height);
+    const chartRenderKeys = [];
+    const chartRenderQueueList = [];
+    let batchRenderChartCount = 5;
+    let isHandlingChartQueue = false;
+    function setBatchRenderChartCount(count) {
+        if (isValid$1(count)) {
+            batchRenderChartCount = count;
+        }
+    }
+    function IsHandlingChartQueue() {
+        return isHandlingChartQueue;
+    }
+    function renderChart(chart) {
+        const { axes, dataId, data } = chart.attribute;
+        const { chartInstance } = chart;
+        const viewBox = chart.getViewBox();
+        axes.forEach((axis, index) => {
+            if (axis.type === 'linear') {
+                const chartAxis = chartInstance._chart._components[index];
+                chartAxis._domain = {
+                    min: axis.range?.min ?? 0,
+                    max: axis.range?.max ?? 0
+                };
+            }
+            else if (axis.type === 'band') {
+                const chartAxis = chartInstance._chart._components[index];
+                chartAxis._spec.domain = axis.domain.slice(0);
+                chartAxis.updateScaleDomain();
+            }
+        });
+        chartInstance.updateViewBox({
+            x1: viewBox.x1 - chart.getRootNode().table.scrollLeft,
+            x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
+            y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
+            y2: viewBox.y2 - chart.getRootNode().table.scrollTop
+        }, false, false);
+        if (typeof dataId === 'string') {
+            chartInstance.updateDataSync(dataId, data ?? []);
+        }
+        else {
+            const dataBatch = [];
+            for (const dataIdStr in dataId) {
+                const dataIdAndField = dataId[dataIdStr];
+                dataBatch.push({
+                    id: dataIdStr,
+                    data: dataIdAndField
+                        ? data?.filter((item) => {
+                            return item.hasOwnProperty(dataIdAndField);
+                        }) ?? []
+                        : data ?? []
+                });
+                if (!chartInstance.updateDataInBatchesSync) {
+                    chartInstance.updateDataSync(dataIdStr, dataIdAndField
+                        ? data?.filter((item) => {
+                            return item.hasOwnProperty(dataIdAndField);
+                        }) ?? []
+                        : data ?? []);
+                }
+            }
+            chartInstance.updateDataInBatchesSync?.(dataBatch);
+        }
+        const sg = chartInstance.getStage();
+        chart.cacheCanvas = sg.toCanvas();
+    }
+    function startRenderChartQueue(table) {
+        isHandlingChartQueue = true;
+        if (chartRenderQueueList.length > 0) {
+            requestAnimationFrame(() => {
+                const chartsToRender = chartRenderQueueList.splice(0, batchRenderChartCount);
+                chartRenderKeys.splice(0, batchRenderChartCount);
+                chartsToRender.forEach(chart => {
+                    renderChart(chart);
+                    chart.addUpdateBoundTag();
+                });
+                table.render();
+                startRenderChartQueue(table);
+            });
+        }
+        else {
+            isHandlingChartQueue = false;
+        }
+    }
+
+    const ChartRender = Symbol.for('ChartRender');
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
+        type;
+        numberType = CHART_NUMBER_TYPE;
+        drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
+            const groupAttribute = getTheme(chart, params?.theme).group;
+            const { dataId, data } = chart.attribute;
+            chart.getViewBox();
+            const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
+            const { chartInstance, active, cacheCanvas, activeChartInstance } = chart;
+            if (!active && cacheCanvas) {
+                context.drawImage(cacheCanvas, x, y, width, height);
             }
             else if (activeChartInstance) {
                 if (typeof dataId === 'string') {
@@ -41830,42 +41908,18 @@
                 }
             }
             else {
-                const { axes } = chart.attribute;
-                axes.forEach((axis, index) => {
-                    if (axis.type === 'linear') {
-                        const chartAxis = chartInstance._chart._components[index];
-                        chartAxis._domain = {
-                            min: axis.range?.min ?? 0,
-                            max: axis.range?.max ?? 0
-                        };
+                if (chart.getRootNode().table.internalProps.renderChartAsync) {
+                    if (chartRenderKeys.indexOf(`${chart.parent.col}+${chart.parent.row}`) === -1) {
+                        chartRenderKeys.push(`${chart.parent.col}+${chart.parent.row}`);
+                        chartRenderQueueList.push(chart);
                     }
-                    else if (axis.type === 'band') {
-                        const chartAxis = chartInstance._chart._components[index];
-                        chartAxis._spec.domain = axis.domain.slice(0);
-                        chartAxis.updateScaleDomain();
+                    if (!IsHandlingChartQueue()) {
+                        startRenderChartQueue(chart.getRootNode().table);
                     }
-                });
-                chartInstance.updateViewBox({
-                    x1: viewBox.x1 - chart.getRootNode().table.scrollLeft,
-                    x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
-                    y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
-                    y2: viewBox.y2 - chart.getRootNode().table.scrollTop
-                }, false);
-                if (typeof dataId === 'string') {
-                    chartInstance.updateDataSync(dataId, data ?? []);
                 }
                 else {
-                    for (const dataIdStr in dataId) {
-                        const dataIdAndField = dataId[dataIdStr];
-                        chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                            ? data?.filter((item) => {
-                                return item.hasOwnProperty(dataIdAndField);
-                            }) ?? []
-                            : data ?? []);
-                    }
+                    renderChart(chart);
                 }
-                const sg = chartInstance.getStage();
-                chart.cacheCanvas = sg.toCanvas();
             }
         }
         draw(chart, renderService, drawContext, params) {
@@ -41888,26 +41942,7 @@
             else {
                 this.drawShape(chart, context, 0, 0, drawContext);
             }
-            const chartAttribute = getTheme(chart, params?.theme).group;
-            const { scrollX = chartAttribute.scrollX, scrollY = chartAttribute.scrollY } = chart.attribute;
-            if (scrollX || scrollY) {
-                context.translate(scrollX, scrollY);
-            }
-            let p;
-            if (params && params.drawingCb) {
-                p = params.drawingCb();
-            }
-            if (p && p.then) {
-                p.then(() => {
-                    if (clip) {
-                        context.restore();
-                    }
-                    else {
-                        context.highPerformanceRestore();
-                    }
-                });
-            }
-            else if (clip) {
+            if (clip) {
                 context.restore();
             }
             else {
@@ -42567,10 +42602,10 @@
                 if (isArray$3(rowDimensionKey)) {
                     rowDimensionKey = rowDimensionKey[0];
                 }
-                const data = layout.dataset.collectedValues[rowDimensionKey];
+                const data = layout.dataset.collectedValues[rowDimensionKey] ?? [];
                 const recordRow = layout.getRecordIndexByRow(row);
                 const rowPath = layout.getRowKeysPath()[recordRow];
-                const domain = data[rowPath[rowPath.length - 1]];
+                const domain = data[rowPath[rowPath.length - 1]] ?? [];
                 const axisOption = getAxisOption(col, row, 'left', layout);
                 if (axisOption?.visible === false) {
                     return;
@@ -42668,7 +42703,7 @@
                 if (isArray$3(columnDimensionKey)) {
                     columnDimensionKey = columnDimensionKey[0];
                 }
-                const data = layout.dataset.collectedValues[columnDimensionKey];
+                const data = layout.dataset.collectedValues[columnDimensionKey] ?? [];
                 const recordCol = layout.getRecordIndexByCol(col);
                 const colPath = layout.getColKeysPath()[recordCol];
                 const domain = data?.[colPath[colPath.length - 1]] ?? [];
@@ -43491,7 +43526,7 @@
             cellGroup.role = 'cell';
             cellGroup.col = col;
             cellGroup.row = row;
-            columnGroup.addChild(cellGroup);
+            columnGroup?.addChild(cellGroup);
         }
         cellGroup.AABBBounds.width();
         const chartGroup = new Chart({
@@ -43547,7 +43582,7 @@
         cellGroup.role = 'cell';
         cellGroup.col = col;
         cellGroup.row = row;
-        columnGroup.addChild(cellGroup);
+        columnGroup?.addChild(cellGroup);
         if (customElementsGroup) {
             cellGroup.appendChild(customElementsGroup);
         }
@@ -43611,7 +43646,7 @@
         cellGroup.role = 'cell';
         cellGroup.col = col;
         cellGroup.row = row;
-        columnGroup.addChild(cellGroup);
+        columnGroup?.addChild(cellGroup);
         const value = table.getCellValue(col, row);
         const video = document.createElement('video');
         video.addEventListener('loadeddata', () => {
@@ -43824,6 +43859,7 @@
             if (!addNew) {
                 oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
                 oldCellGroup.parent.removeChild(oldCellGroup);
+                updateCell$1(range.start.col, range.start.row, table, false);
             }
         }
         else {
@@ -43964,7 +44000,7 @@
                 cellGroup.row = row;
                 cellGroup.mergeCol = range.start.col;
                 cellGroup.mergeRow = range.start.row;
-                columnGroup.addChild(cellGroup);
+                columnGroup?.addChild(cellGroup);
                 columnGroup.updateColumnRowNumber(row);
                 columnGroup.updateColumnHeight(height);
                 range = table.getCellRange(col, row);
@@ -44033,6 +44069,7 @@
     }
 
     async function createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin, proxy) {
+        const { leftBottomCornerGroup, rightTopCornerGroup, rightBottomCornerGroup } = proxy.table.scenegraph;
         proxy.setParamsForRow();
         proxy.setParamsForColumn();
         proxy.table.internalProps._colWidthsMap.clear();
@@ -44059,11 +44096,20 @@
         createColGroup(colHeaderGroup, xOrigin, yOrigin, proxy.table.rowHeaderLevelCount, Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount), 0, proxy.table.columnHeaderLevelCount - 1, 'columnHeader', proxy.table);
         createColGroup(rowHeaderGroup, xOrigin, yOrigin, 0, proxy.table.rowHeaderLevelCount - 1, proxy.table.columnHeaderLevelCount, Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount), 'rowHeader', proxy.table);
         if (proxy.table.bottomFrozenRowCount > 0) {
+            if (!proxy.table.isPivotChart()) {
+                createColGroup(leftBottomCornerGroup, xOrigin, yOrigin, 0, proxy.table.rowHeaderLevelCount - 1, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount + 1, proxy.table.rowCount - 1, 'rowHeader', proxy.table);
+            }
             createColGroup(bottomFrozenGroup, xOrigin, yOrigin, proxy.table.rowHeaderLevelCount, Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount), proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount + 1, proxy.table.rowCount - 1, 'body', proxy.table);
         }
         if (proxy.table.rightFrozenColCount > 0) {
+            if (!proxy.table.isPivotChart()) {
+                createColGroup(rightTopCornerGroup, xOrigin, yOrigin, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, proxy.table.colCount - 1, 0, proxy.table.columnHeaderLevelCount - 1, 'columnHeader', proxy.table);
+            }
             createColGroup(rightFrozenGroup, xOrigin, yOrigin, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, proxy.table.colCount - 1, proxy.table.columnHeaderLevelCount, Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount), 'body', proxy.table);
         }
+        if (proxy.table.bottomFrozenRowCount > 0 && proxy.table.rightFrozenColCount > 0 && !proxy.table.isPivotChart()) {
+            createColGroup(rightBottomCornerGroup, xOrigin, yOrigin, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, proxy.table.colCount - 1, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount + 1, proxy.table.rowCount - 1, 'body', proxy.table);
+        }
         createColGroup(bodyGroup, xOrigin, yOrigin, proxy.table.rowHeaderLevelCount, Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount), proxy.table.columnHeaderLevelCount, Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount), 'body', proxy.table);
         if (!bodyGroup.firstChild) {
             proxy.currentRow = proxy.totalRow;
@@ -44088,34 +44134,171 @@
         }
     }
 
+    function checkFirstRowMerge(row, proxy) {
+        for (let col = 0; col < proxy.table.colCount; col++) {
+            if ((col >= proxy.table.rowHeaderLevelCount && col < proxy.colStart) ||
+                (col > proxy.colEnd && col < proxy.table.colCount - proxy.table.rightFrozenColCount)) {
+                continue;
+            }
+            const range = getCellMergeInfo(proxy.table, col, row);
+            if (range && range.start.row !== row) {
+                const oldCellGroup = proxy.highPerformanceGetCell(col, row, true);
+                const newCellGroup = updateCell$1(range.start.col, range.start.row, proxy.table, true);
+                newCellGroup.col = col;
+                newCellGroup.row = row;
+                newCellGroup.setAttribute('y', proxy.table.getRowsHeight(proxy.table.columnHeaderLevelCount, range.start.row - 1));
+                oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
+                oldCellGroup.parent.removeChild(oldCellGroup);
+                oldCellGroup.needUpdate = false;
+                newCellGroup.needUpdate = false;
+                if (proxy.cellCache.get(col)) {
+                    proxy.cellCache.set(col, newCellGroup);
+                }
+            }
+        }
+    }
+    function checkFirstColMerge(col, scrolling, proxy) {
+        for (let row = 0; row < proxy.table.rowCount; row++) {
+            if ((row >= proxy.table.columnHeaderLevelCount && row < proxy.rowStart) ||
+                (row > proxy.rowEnd && row < proxy.table.rowCount - proxy.table.bottomFrozenRowCount)) {
+                continue;
+            }
+            const range = getCellMergeInfo(proxy.table, col, row);
+            if (range && range.start.col !== col) {
+                if (scrolling && checkHasColMerge(range.start.col, range.end.col, row, proxy)) {
+                    continue;
+                }
+                const oldCellGroup = proxy.highPerformanceGetCell(col, row, true);
+                const newCellGroup = updateCell$1(range.start.col, range.start.row, proxy.table, true);
+                newCellGroup.col = col;
+                newCellGroup.row = row;
+                newCellGroup.setAttribute('x', proxy.table.getColsWidth(proxy.table.rowHeaderLevelCount, range.start.col - 1) - oldCellGroup.parent.attribute.x);
+                oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
+                oldCellGroup.parent.removeChild(oldCellGroup);
+                oldCellGroup.needUpdate = false;
+                newCellGroup.needUpdate = false;
+                if (proxy.cellCache.get(col)) {
+                    proxy.cellCache.set(col, newCellGroup);
+                }
+            }
+        }
+    }
+    function checkHasColMerge(colStart, colEnd, row, proxy) {
+        for (let col = colStart; col <= colEnd; col++) {
+            if (proxy.highPerformanceGetCell(col, row, true).role !== 'shadow-cell' &&
+                proxy.highPerformanceGetCell(col, row, true).role !== 'empty') {
+                return true;
+            }
+        }
+        return false;
+    }
+    function getFirstChild(containerGroup) {
+        let child = containerGroup.firstChild;
+        while (child.type !== 'group') {
+            child = child._next;
+        }
+        return child;
+    }
+    function getLastChild(containerGroup) {
+        let child = containerGroup.lastChild;
+        while (child.type !== 'group') {
+            child = child._prev;
+        }
+        return child;
+    }
+    function getPrevGroup(group) {
+        let child = group._prev;
+        while (child && child.type !== 'group') {
+            child = child._prev;
+        }
+        return child;
+    }
+    function getNextGroup(group) {
+        let child = group._next;
+        while (child && child.type !== 'group') {
+            child = child._next;
+        }
+        return child;
+    }
+
+    function updateAutoColumn(colStart, colEnd, table, direction = 'left') {
+        for (let col = colStart; col <= colEnd; col++) {
+            const bodyColGroup = table.scenegraph.getColGroup(col);
+            if (bodyColGroup) {
+                moveColumnGroup(bodyColGroup, table, direction);
+            }
+            const columnHeaderColGroup = table.scenegraph.getColGroup(col, true);
+            if (columnHeaderColGroup) {
+                moveColumnGroup(columnHeaderColGroup, table, direction);
+            }
+            const bottomColGroup = table.scenegraph.getColGroupInBottom(col);
+            if (bottomColGroup) {
+                moveColumnGroup(bottomColGroup, table, direction);
+            }
+        }
+        const totalActualBodyColumnCount = Math.min(table.scenegraph.proxy.colLimit, table.scenegraph.proxy.bodyRightCol - table.scenegraph.proxy.bodyLeftCol + 1);
+        const totalBodyWidth = table.getColsWidth(table.rowHeaderLevelCount, table.rowHeaderLevelCount + totalActualBodyColumnCount);
+        const totalWidth = table.getColsWidth(table.rowHeaderLevelCount, table.colCount - 1);
+        table.scenegraph.proxy.xLimitLeft = totalBodyWidth / 2;
+        table.scenegraph.proxy.xLimitRight = totalWidth - totalBodyWidth / 2;
+    }
+    function moveColumnGroup(colGroup, table, direction = 'left') {
+        if (direction === 'left') {
+            let x;
+            const prevCellGroup = getPrevGroup(colGroup);
+            if (prevCellGroup) {
+                x = prevCellGroup.attribute.x + table.getColWidth(colGroup._prev.col);
+            }
+            else {
+                x = table.getColsWidth(table.rowHeaderLevelCount, colGroup.col - 1);
+            }
+            colGroup.setAttribute('x', x);
+        }
+        else {
+            let x;
+            const nextCellGroup = getNextGroup(colGroup);
+            if (nextCellGroup) {
+                x = nextCellGroup.attribute.x - table.getColWidth(colGroup.col);
+            }
+            else {
+                x = table.getColsWidth(table.rowHeaderLevelCount, colGroup.col - 1);
+            }
+            colGroup.setAttribute('x', x);
+        }
+    }
+
     async function dynamicSetX(x, proxy) {
         const screenLeft = proxy.table.getTargetColAt(x + proxy.table.scenegraph.rowHeaderGroup.attribute.width);
         if (!screenLeft) {
             return;
         }
-        proxy.screenLeftCol = screenLeft.col;
+        const screenLeftCol = screenLeft.col;
+        const screenLeftX = screenLeft.left;
+        proxy.screenLeftCol = screenLeftCol;
         const deltaCol = proxy.screenLeftCol - proxy.referenceCol;
         if (deltaCol > 0) {
-            proxy.table.scenegraph.setBodyAndColHeaderX(-x);
-            await moveColumn(deltaCol, 'left', proxy.screenLeftCol, proxy);
+            moveColumn(deltaCol, 'left', proxy.screenLeftCol, screenLeftX, proxy);
+            proxy.table.scenegraph.setBodyAndColHeaderX(-x + proxy.deltaX);
         }
         else if (deltaCol < 0) {
-            proxy.table.scenegraph.setBodyAndColHeaderX(-x);
-            await moveColumn(-deltaCol, 'right', proxy.screenLeftCol, proxy);
+            moveColumn(-deltaCol, 'right', proxy.screenLeftCol, screenLeftX, proxy);
+            proxy.table.scenegraph.setBodyAndColHeaderX(-x + proxy.deltaX);
         }
         else {
-            proxy.table.scenegraph.setBodyAndColHeaderX(-x);
+            proxy.table.scenegraph.setBodyAndColHeaderX(-x + proxy.deltaX);
         }
         proxy.table.scenegraph.updateNextFrame();
     }
-    async function moveColumn(count, direction, screenLeftCol, proxy) {
+    async function moveColumn(count, direction, screenLeftCol, screenLeftX, proxy) {
         if (direction === 'left' && proxy.colEnd + count > proxy.bodyRightCol) {
             count = proxy.bodyRightCol - proxy.colEnd;
         }
         else if (direction === 'right' && proxy.colStart - count < proxy.bodyLeftCol) {
             count = proxy.colStart - proxy.bodyLeftCol;
         }
-        proxy.table.scenegraph.bodyGroup;
+        if (count <= 0) {
+            return;
+        }
         if (count < proxy.colEnd - proxy.colStart) {
             const startCol = direction === 'left' ? proxy.colStart : proxy.colEnd - count + 1;
             const endCol = direction === 'left' ? proxy.colStart + count - 1 : proxy.colEnd;
@@ -44123,18 +44306,22 @@
             const distEndCol = direction === 'left' ? proxy.colEnd + count : proxy.colStart - 1;
             computeColsWidth(proxy.table, distStartCol, distEndCol);
             updatePartColPosition(startCol, endCol, direction, proxy);
-            const syncLeftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - proxy.screenColCount * 1);
-            const syncRightCol = Math.min(proxy.bodyRightCol, screenLeftCol + proxy.screenColCount * 2);
+            const syncLeftCol = distStartCol;
+            const syncRightCol = distEndCol;
             proxy.colStart = direction === 'left' ? proxy.colStart + count : proxy.colStart - count;
             proxy.colEnd = direction === 'left' ? proxy.colEnd + count : proxy.colEnd - count;
-            checkFirstColMerge(distStartCol, proxy);
+            checkFirstColMerge(distStartCol, true, proxy);
             updateColContent(syncLeftCol, syncRightCol, proxy);
+            updateAutoColumn(syncLeftCol, syncRightCol, proxy.table, direction);
+            const colGroup = proxy.table.scenegraph.getColGroup(screenLeftCol);
+            const deltaX = screenLeftX - (colGroup.attribute.x + proxy.table.getFrozenColsWidth() + proxy.table.scenegraph.proxy.deltaX);
+            proxy.table.scenegraph.proxy.deltaX += deltaX;
             proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count;
             proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count;
             proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2);
             proxy.colUpdatePos = distStartCol;
             proxy.colUpdateDirection = direction;
-            proxy.table.scenegraph.stage.render();
+            proxy.table.scenegraph.updateNextFrame();
             await proxy.progress();
         }
         else {
@@ -44142,19 +44329,21 @@
             const distEndCol = direction === 'left' ? proxy.colEnd + count : proxy.colEnd - count;
             computeColsWidth(proxy.table, distStartCol, distEndCol);
             const distStartColY = proxy.table.getColsWidth(proxy.bodyLeftCol, distStartCol - 1);
-            console.log('distStartColY', proxy.bodyLeftCol, distStartCol - 1, distStartColY);
             updateAllColPosition(distStartColY, count, direction, proxy);
-            const syncLeftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - proxy.screenRowCount * 1);
-            const syncRightCol = Math.min(proxy.bodyRightCol, screenLeftCol + proxy.screenRowCount * 2);
+            const syncLeftCol = distStartCol;
+            const syncRightCol = distEndCol;
             proxy.colStart = distStartCol;
             proxy.colEnd = distEndCol;
-            checkFirstColMerge(distStartCol, proxy);
+            checkFirstColMerge(distStartCol, false, proxy);
             updateColContent(syncLeftCol, syncRightCol, proxy);
+            updateAutoColumn(syncLeftCol, syncRightCol, proxy.table, distEndCol > proxy.bodyRightCol - (proxy.colEnd - proxy.colStart + 1) ? 'right' : 'left');
+            proxy.table.scenegraph.proxy.deltaX = 0;
             proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count;
             proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count;
             proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2);
             proxy.colUpdatePos = proxy.colStart;
             proxy.colUpdateDirection = distEndCol > proxy.bodyRightCol - (proxy.colEnd - proxy.colStart + 1) ? 'right' : 'left';
+            proxy.table.scenegraph.updateNextFrame();
             await proxy.progress();
         }
     }
@@ -44177,6 +44366,7 @@
             cellGroup = newCellGroup._next;
         }
         colGroup.needUpdate = false;
+        colGroup.setAttribute('width', proxy.table.getColWidth(colGroup.col));
     }
     function updatePartColPosition(startCol, endCol, direction, proxy) {
         for (let col = startCol; col <= endCol; col++) {
@@ -44184,34 +44374,38 @@
                 updateColPosition(proxy.table.scenegraph.bodyGroup, direction, proxy);
             }
             if (proxy.table.scenegraph.colHeaderGroup.childrenCount > 0) {
-                updateColPosition(proxy.table.scenegraph.bodyGroup, direction, proxy);
+                updateColPosition(proxy.table.scenegraph.colHeaderGroup, direction, proxy);
             }
             if (proxy.table.scenegraph.bottomFrozenGroup.childrenCount > 0) {
-                updateColPosition(proxy.table.scenegraph.bodyGroup, direction, proxy);
+                updateColPosition(proxy.table.scenegraph.bottomFrozenGroup, direction, proxy);
             }
         }
     }
     function updateColPosition(containerGroup, direction, proxy) {
         if (direction === 'left') {
-            const colGroup = containerGroup.firstChild;
-            updateColGroupPosition(colGroup, containerGroup.lastChild.col + 1, containerGroup.lastChild.attribute.x + containerGroup.lastChild.attribute.width);
+            const colGroup = getFirstChild(containerGroup);
+            const lastChild = getLastChild(containerGroup);
+            updateColGroupPosition(colGroup, lastChild.col + 1, lastChild.attribute.x + proxy.table.getColWidth(lastChild.col));
             containerGroup.appendChild(colGroup);
+            if (containerGroup.border) {
+                containerGroup.appendChild(containerGroup.border);
+            }
         }
         else {
-            const colGroup = containerGroup.lastChild;
-            updateColGroupPosition(colGroup, containerGroup.firstChild.col - 1, containerGroup.firstChild.attribute.x -
-                proxy.table.getColWidth(containerGroup.firstChild.col - 1));
+            const colGroup = getLastChild(containerGroup);
+            const firstChild = getFirstChild(containerGroup);
+            updateColGroupPosition(colGroup, firstChild.col - 1, firstChild.attribute.x - proxy.table.getColWidth(firstChild.col - 1));
             containerGroup.insertBefore(colGroup, containerGroup.firstChild);
         }
     }
     function updateColContent(syncLeftCol, syncRightCol, proxy) {
         for (let col = syncLeftCol; col <= syncRightCol; col++) {
             const colGroup = proxy.table.scenegraph.getColGroup(col);
-            updateColGroupContent(colGroup, proxy);
+            colGroup && updateColGroupContent(colGroup, proxy);
             const colHeaderColGroup = proxy.table.scenegraph.getColGroup(col, true);
-            updateColGroupContent(colHeaderColGroup, proxy);
+            colHeaderColGroup && updateColGroupContent(colHeaderColGroup, proxy);
             const bottomColGroup = proxy.table.scenegraph.getColGroupInBottom(col);
-            updateColGroupContent(bottomColGroup, proxy);
+            bottomColGroup && updateColGroupContent(bottomColGroup, proxy);
         }
     }
     function updateAllColPosition(distStartColY, count, direction, proxy) {
@@ -44237,29 +44431,6 @@
             }
         });
     }
-    function checkFirstColMerge(col, proxy) {
-        for (let row = 0; row < proxy.table.rowCount; row++) {
-            if ((row >= proxy.table.columnHeaderLevelCount && row < proxy.rowStart) ||
-                (row > proxy.rowEnd && row < proxy.table.rowCount - proxy.table.bottomFrozenRowCount)) {
-                continue;
-            }
-            const range = getCellMergeInfo(proxy.table, col, row);
-            if (range && range.start.row !== row) {
-                const oldCellGroup = proxy.highPerformanceGetCell(col, row, true);
-                const newCellGroup = updateCell$1(range.start.col, range.start.row, proxy.table, true);
-                newCellGroup.col = col;
-                newCellGroup.row = row;
-                newCellGroup.setAttribute('x', proxy.table.getColsWidth(proxy.table.rowHeaderLevelCount, range.start.col - 1));
-                oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
-                oldCellGroup.parent.removeChild(oldCellGroup);
-                oldCellGroup.needUpdate = false;
-                newCellGroup.needUpdate = false;
-                if (proxy.cellCache.get(col)) {
-                    proxy.cellCache.set(col, newCellGroup);
-                }
-            }
-        }
-    }
 
     function updateAutoRow(colStart, colEnd, rowStart, rowEnd, table, direction = 'up') {
         if (direction === 'up') {
@@ -44486,29 +44657,6 @@
             }
         }
     }
-    function checkFirstRowMerge(row, proxy) {
-        for (let col = 0; col < proxy.table.colCount; col++) {
-            if ((col >= proxy.table.rowHeaderLevelCount && col < proxy.colStart) ||
-                (col > proxy.colEnd && col < proxy.table.colCount - proxy.table.rightFrozenColCount)) {
-                continue;
-            }
-            const range = getCellMergeInfo(proxy.table, col, row);
-            if (range && range.start.row !== row) {
-                const oldCellGroup = proxy.highPerformanceGetCell(col, row, true);
-                const newCellGroup = updateCell$1(range.start.col, range.start.row, proxy.table, true);
-                newCellGroup.col = col;
-                newCellGroup.row = row;
-                newCellGroup.setAttribute('y', proxy.table.getRowsHeight(proxy.table.columnHeaderLevelCount, range.start.row - 1));
-                oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
-                oldCellGroup.parent.removeChild(oldCellGroup);
-                oldCellGroup.needUpdate = false;
-                newCellGroup.needUpdate = false;
-                if (proxy.cellCache.get(col)) {
-                    proxy.cellCache.set(col, newCellGroup);
-                }
-            }
-        }
-    }
 
     class SceneProxy {
         table;
@@ -44530,7 +44678,7 @@
         rowUpdateDirection;
         screenTopRow = 0;
         deltaY = 0;
-        colLimit = 1000;
+        colLimit = 100;
         bodyLeftCol;
         bodyRightCol;
         totalCol;
@@ -44546,6 +44694,7 @@
         referenceCol;
         screenLeftCol = 0;
         colUpdateDirection;
+        deltaX = 0;
         cellCache = new Map();
         constructor(table) {
             this.table = table;
@@ -44684,6 +44833,12 @@
         createColGroup(onceCount) {
             const endCol = Math.min(this.totalCol, this.currentCol + onceCount);
             computeColsWidth(this.table, this.currentCol + 1, endCol);
+            for (let row = 0; row < this.table.rowCount; row++) {
+                const cellGroup = this.highPerformanceGetCell(this.currentCol, row);
+                if (isNumber(cellGroup.mergeCol) && cellGroup.mergeCol > this.currentCol) {
+                    this.table.scenegraph.updateCellContent(cellGroup.col, cellGroup.row);
+                }
+            }
             if (this.table.columnHeaderLevelCount) {
                 const lastColumnGroup = (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group
                     ? this.table.scenegraph.colHeaderGroup.lastChild
@@ -45435,25 +45590,296 @@
             });
         }
     }
-    function checkHaveTextStick(table) {
-        const headerObjects = table.internalProps.layoutMap.headerObjects;
-        const columnObjects = table.internalProps.layoutMap.columnObjects;
-        for (let i = 0; i < headerObjects.length; i++) {
-            const header = headerObjects[i];
-            if (header && header.style?.textStick) {
-                console.log('checkHaveTextStick', true);
-                return true;
+    function checkHaveTextStick(table) {
+        const headerObjects = table.internalProps.layoutMap.headerObjects;
+        const columnObjects = table.internalProps.layoutMap.columnObjects;
+        for (let i = 0; i < headerObjects.length; i++) {
+            const header = headerObjects[i];
+            if (header && header.style?.textStick) {
+                console.log('checkHaveTextStick', true);
+                return true;
+            }
+        }
+        for (let i = 0; i < columnObjects.length; i++) {
+            const column = columnObjects[i];
+            if (column && column.style?.textStick) {
+                console.log('checkHaveTextStick', true);
+                return true;
+            }
+        }
+        console.log('checkHaveTextStick', false);
+        return false;
+    }
+
+    function dealFrozen(scene) {
+        if (scene.table.frozenColCount > scene.table.rowHeaderLevelCount) {
+            scene.rowHeaderGroup.setAttribute('height', scene.bodyGroup.attribute.height);
+            scene.rowHeaderGroup.setAttribute('y', scene.bodyGroup.attribute.y);
+            scene.cornerHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height);
+            for (let i = 0; i < scene.table.frozenColCount - scene.table.rowHeaderLevelCount; i++) {
+                moveColumnFromBodyToRowHeader(scene);
+                moveColumnFromColHeaderToCornerHeader(scene);
+            }
+        }
+        else if (scene.table.frozenColCount < scene.table.rowHeaderLevelCount) {
+            for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.table.frozenColCount; i++) {
+                moveColumnFromRowHeaderToBody(scene);
+                moveColumnFromCornerHeaderToColHeader(scene);
+            }
+        }
+        scene.bodyGroup.setAttribute('x', scene.rowHeaderGroup.attribute.width);
+        scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
+        scene.updateContainer();
+        scene.updateBorderSizeAndPosition();
+        if (!scene.isPivot && !scene.transpose) {
+            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
+        }
+        scene.hasFrozen = true;
+        scene.frozenColCount = scene.table.frozenColCount;
+        scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
+    }
+    function resetFrozen(scene) {
+        if (scene.frozenColCount > scene.table.rowHeaderLevelCount) {
+            for (let i = 0; i < scene.frozenColCount - scene.table.rowHeaderLevelCount; i++) {
+                moveColumnFromRowHeaderToBody(scene);
+                moveColumnFromCornerHeaderToColHeader(scene);
+            }
+        }
+        else if (scene.frozenColCount < scene.table.rowHeaderLevelCount) {
+            scene.rowHeaderGroup.setAttribute('height', scene.bodyGroup.attribute.height);
+            scene.rowHeaderGroup.setAttribute('y', scene.bodyGroup.attribute.y);
+            scene.cornerHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height);
+            for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.frozenColCount; i++) {
+                moveColumnFromBodyToRowHeader(scene);
+                moveColumnFromColHeaderToCornerHeader(scene);
+            }
+        }
+        scene.bodyGroup.setAttribute('x', scene.rowHeaderGroup.attribute.width);
+        scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
+        scene.updateContainer();
+        scene.updateBorderSizeAndPosition();
+        if (!scene.isPivot && !scene.transpose) {
+            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
+        }
+        scene.hasFrozen = true;
+        scene.frozenColCount = scene.table.rowHeaderLevelCount;
+        scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
+    }
+    function moveColumnFromBodyToRowHeader(scene) {
+        const column = scene.bodyGroup.firstChild instanceof Group ? scene.bodyGroup.firstChild : null;
+        if (column) {
+            scene.rowHeaderGroup.appendChild(column);
+            scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width + column.attribute.width);
+            scene.bodyGroup.setAttribute('width', scene.bodyGroup.attribute.width - column.attribute.width);
+        }
+    }
+    function moveColumnFromColHeaderToCornerHeader(scene) {
+        const headerColumn = scene.colHeaderGroup.firstChild instanceof Group ? scene.colHeaderGroup.firstChild : null;
+        if (headerColumn) {
+            scene.cornerHeaderGroup.appendChild(headerColumn);
+            scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width + headerColumn.attribute.width);
+            scene.colHeaderGroup.setAttribute('width', scene.colHeaderGroup.attribute.width - headerColumn.attribute.width);
+        }
+    }
+    function moveColumnFromRowHeaderToBody(scene) {
+        const column = scene.rowHeaderGroup.lastChild instanceof Group
+            ? scene.rowHeaderGroup.lastChild
+            : scene.rowHeaderGroup.lastChild?._prev;
+        if (column) {
+            insertBefore(scene.bodyGroup, column, scene.bodyGroup.firstChild);
+            scene.bodyGroup.setAttribute('width', scene.bodyGroup.attribute.width + column.attribute.width);
+            scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width - column.attribute.width);
+        }
+    }
+    function moveColumnFromCornerHeaderToColHeader(scene) {
+        const headerColumn = scene.cornerHeaderGroup.lastChild instanceof Group
+            ? scene.cornerHeaderGroup.lastChild
+            : scene.cornerHeaderGroup.lastChild?._prev;
+        if (headerColumn) {
+            insertBefore(scene.colHeaderGroup, headerColumn, scene.colHeaderGroup.firstChild);
+            scene.colHeaderGroup.setAttribute('width', scene.colHeaderGroup.attribute.width + headerColumn.attribute.width);
+            scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width - headerColumn.attribute.width);
+        }
+    }
+    function dealRightFrozen(distRightFrozenCol, scene) {
+        const { table, proxy, rightTopCornerGroup, rightFrozenGroup, rightBottomCornerGroup, bottomFrozenGroup, bodyGroup, colHeaderGroup } = scene;
+        const currentRightFrozenCol = scene.table.rightFrozenColCount;
+        if (distRightFrozenCol > currentRightFrozenCol) {
+            for (let col = table.colCount - currentRightFrozenCol - 1; col >= table.colCount - distRightFrozenCol; col--) {
+                const colGroup = scene.getColGroup(col);
+                insertBefore(rightFrozenGroup, colGroup, rightFrozenGroup.firstChild);
+                const headerColGroup = scene.getColGroup(col, true);
+                insertBefore(rightTopCornerGroup, headerColGroup, rightTopCornerGroup.firstChild);
+                const bottomColGroup = scene.getColGroupInBottom(col);
+                insertBefore(rightBottomCornerGroup, bottomColGroup, rightBottomCornerGroup.firstChild);
+            }
+            let x = 0;
+            rightFrozenGroup.forEachChildren((columnGroup) => {
+                columnGroup.setAttribute('x', x);
+                x += columnGroup.attribute.width;
+            });
+            x = 0;
+            rightTopCornerGroup.forEachChildren((columnGroup) => {
+                columnGroup.setAttribute('x', x);
+                x += columnGroup.attribute.width;
+            });
+            x = 0;
+            rightBottomCornerGroup.forEachChildren((columnGroup) => {
+                columnGroup.setAttribute('x', x);
+                x += columnGroup.attribute.width;
+            });
+        }
+        else if (distRightFrozenCol < currentRightFrozenCol) {
+            for (let col = table.colCount - currentRightFrozenCol; col < table.colCount - distRightFrozenCol; col++) {
+                const colGroup = scene.getColGroup(col);
+                colGroup.setAttribute('x', bodyGroup.lastChild.attribute.x + table.getColWidth(bodyGroup.lastChild.col));
+                bodyGroup.appendChild(colGroup);
+                const headerColGroup = scene.getColGroupInRightTopCorner(col);
+                headerColGroup.setAttribute('x', colHeaderGroup.lastChild.attribute.x + table.getColWidth(colHeaderGroup.lastChild.col));
+                colHeaderGroup.appendChild(headerColGroup);
+                const bottomColGroup = scene.getColGroupInRightBottomCorner(col);
+                bottomColGroup.setAttribute('x', bottomFrozenGroup.lastChild.attribute.x +
+                    table.getColWidth(bottomFrozenGroup.lastChild.col));
+                bottomFrozenGroup.appendChild(bottomColGroup);
+            }
+            let x = 0;
+            rightFrozenGroup.forEachChildren((columnGroup) => {
+                columnGroup.setAttribute('x', x);
+                x += columnGroup.attribute.width;
+            });
+            x = 0;
+            rightTopCornerGroup.forEachChildren((columnGroup) => {
+                columnGroup.setAttribute('x', x);
+                x += columnGroup.attribute.width;
+            });
+            x = 0;
+            rightBottomCornerGroup.forEachChildren((columnGroup) => {
+                columnGroup.setAttribute('x', x);
+                x += columnGroup.attribute.width;
+            });
+        }
+        rightFrozenGroup.setAttribute('width', table.getColsWidth(table.colCount - distRightFrozenCol, table.colCount - 1));
+        rightTopCornerGroup.setAttribute('width', table.getColsWidth(table.colCount - distRightFrozenCol, table.colCount - 1));
+        rightBottomCornerGroup.setAttribute('width', table.getColsWidth(table.colCount - distRightFrozenCol, table.colCount - 1));
+        table.internalProps.rightFrozenColCount = distRightFrozenCol;
+        scene.updateContainer();
+        scene.component.updateScrollBar();
+        scene.updateNextFrame();
+    }
+    function dealBottomFrozen(distBottomFrozenRow, scene) {
+        const { table, proxy, bottomFrozenGroup, leftBottomCornerGroup, rightBottomCornerGroup } = scene;
+        if (!bottomFrozenGroup.childrenCount) {
+            if (!proxy.table.isPivotChart()) {
+                createColGroup(leftBottomCornerGroup, 0, 0, 0, table.rowHeaderLevelCount - 1, 0, -1, 'rowHeader', table);
+                createColGroup(rightBottomCornerGroup, 0, 0, table.colCount - table.rightFrozenColCount, table.colCount - 1, 0, -1, 'body', table);
             }
+            createColGroup(bottomFrozenGroup, 0, 0, proxy.colStart, proxy.colEnd, 0, -1, 'body', table);
         }
-        for (let i = 0; i < columnObjects.length; i++) {
-            const column = columnObjects[i];
-            if (column && column.style?.textStick) {
-                console.log('checkHaveTextStick', true);
-                return true;
+        const currentBottomFrozenRow = scene.table.bottomFrozenRowCount;
+        if (distBottomFrozenRow > currentBottomFrozenRow) {
+            for (let col = 0; col < table.rowHeaderLevelCount; col++) {
+                const bottomFrozenColumnGroup = scene.getColGroupInLeftBottomCorner(col);
+                for (let row = table.rowCount - currentBottomFrozenRow - 1; row >= table.rowCount - distBottomFrozenRow; row--) {
+                    const cellGroup = scene.getCell(col, row, true);
+                    insertBefore(bottomFrozenColumnGroup, cellGroup, bottomFrozenColumnGroup.firstChild);
+                }
+                let y = 0;
+                bottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                    cellGroup.setAttribute('y', y);
+                    y += table.getRowHeight(cellGroup.row);
+                });
+            }
+            for (let col = proxy.colStart; col <= proxy.colEnd; col++) {
+                const bottomFrozenColumnGroup = scene.getColGroupInBottom(col);
+                for (let row = table.rowCount - currentBottomFrozenRow - 1; row >= table.rowCount - distBottomFrozenRow; row--) {
+                    const cellGroup = scene.getCell(col, row, true);
+                    insertBefore(bottomFrozenColumnGroup, cellGroup, bottomFrozenColumnGroup.firstChild);
+                }
+                let y = 0;
+                bottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                    cellGroup.setAttribute('y', y);
+                    y += table.getRowHeight(cellGroup.row);
+                });
+            }
+            if (table.rightFrozenColCount > 0) {
+                for (let col = table.colCount - table.rightFrozenColCount; col < table.colCount; col++) {
+                    const bottomFrozenColumnGroup = scene.getColGroupInRightBottomCorner(col);
+                    for (let row = table.rowCount - currentBottomFrozenRow - 1; row >= table.rowCount - distBottomFrozenRow; row--) {
+                        const cellGroup = scene.getCell(col, row, true);
+                        insertBefore(bottomFrozenColumnGroup, cellGroup, bottomFrozenColumnGroup.firstChild);
+                    }
+                    let y = 0;
+                    bottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                        cellGroup.setAttribute('y', y);
+                        y += table.getRowHeight(cellGroup.row);
+                    });
+                }
             }
         }
-        console.log('checkHaveTextStick', false);
-        return false;
+        else if (distBottomFrozenRow < currentBottomFrozenRow) {
+            for (let col = 0; col < table.rowHeaderLevelCount; col++) {
+                const columnGroup = scene.getColGroup(col);
+                for (let row = table.rowCount - currentBottomFrozenRow; row < table.rowCount - distBottomFrozenRow; row++) {
+                    const cellGroup = scene.getCell(col, row, true);
+                    cellGroup.setAttribute('y', columnGroup.lastChild.attribute.y + table.getRowHeight(columnGroup.lastChild.row));
+                    columnGroup.appendChild(cellGroup);
+                }
+                const bottomFrozenColumnGroup = scene.getColGroupInLeftBottomCorner(col);
+                let y = 0;
+                bottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                    cellGroup.setAttribute('y', y);
+                    y += table.getRowHeight(cellGroup.row);
+                });
+            }
+            for (let col = proxy.colStart; col <= proxy.colEnd; col++) {
+                const columnGroup = scene.getColGroup(col);
+                for (let row = table.rowCount - currentBottomFrozenRow; row < table.rowCount - distBottomFrozenRow; row++) {
+                    const cellGroup = scene.getCell(col, row, true);
+                    cellGroup.setAttribute('y', columnGroup.lastChild.attribute.y + table.getRowHeight(columnGroup.lastChild.row));
+                    columnGroup.appendChild(cellGroup);
+                }
+                const bottomFrozenColumnGroup = scene.getColGroupInBottom(col);
+                let y = 0;
+                bottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                    cellGroup.setAttribute('y', y);
+                    y += table.getRowHeight(cellGroup.row);
+                });
+            }
+            if (table.rightFrozenColCount > 0) {
+                for (let col = table.colCount - table.rightFrozenColCount; col < table.colCount; col++) {
+                    const columnGroup = scene.getColGroup(col);
+                    for (let row = table.rowCount - currentBottomFrozenRow; row < table.rowCount - distBottomFrozenRow; row++) {
+                        const cellGroup = scene.getCell(col, row, true);
+                        cellGroup.setAttribute('y', columnGroup.lastChild.attribute.y + table.getRowHeight(columnGroup.lastChild.row));
+                        columnGroup.appendChild(cellGroup);
+                    }
+                    const bottomFrozenColumnGroup = scene.getColGroupInRightBottomCorner(col);
+                    let y = 0;
+                    bottomFrozenColumnGroup.forEachChildren((cellGroup) => {
+                        cellGroup.setAttribute('y', y);
+                        y += table.getRowHeight(cellGroup.row);
+                    });
+                }
+            }
+        }
+        bottomFrozenGroup.setAttribute('height', table.getRowsHeight(table.rowCount - distBottomFrozenRow, table.rowCount - 1));
+        leftBottomCornerGroup.setAttribute('height', table.getRowsHeight(table.rowCount - distBottomFrozenRow, table.rowCount - 1));
+        rightBottomCornerGroup.setAttribute('height', table.getRowsHeight(table.rowCount - distBottomFrozenRow, table.rowCount - 1));
+        table.internalProps.bottomFrozenRowCount = distBottomFrozenRow;
+        scene.updateContainer();
+        scene.component.updateScrollBar();
+        scene.updateNextFrame();
+    }
+    function insertBefore(container, newNode, targetGroup) {
+        if (!newNode || !container) {
+            return;
+        }
+        if (targetGroup) {
+            container.insertBefore(newNode, targetGroup);
+        }
+        else {
+            container.appendChild(newNode);
+        }
     }
 
     function updateChartSize(scenegraph, col) {
@@ -45515,7 +45941,7 @@
             if ((datum === null || datum?.length === 0 || Object.keys(datum).length === 0) && preSelectItemsCount === 0) {
                 return;
             }
-            table._selectedDataItemsInChart = [];
+            const newSelectedDataItemsInChart = [];
             if (Array.isArray(datum)) {
                 datum.forEach((dataItem) => {
                     if (dataItem && dataItem.key !== 0 && Object.keys(dataItem).length > 0) {
@@ -45525,7 +45951,7 @@
                                 selectedState[itemKey] = dataItem[itemKey];
                             }
                         }
-                        table._selectedDataItemsInChart.push(selectedState);
+                        newSelectedDataItemsInChart.push(selectedState);
                     }
                 });
             }
@@ -45536,13 +45962,14 @@
                         selectedState[itemKey] = datum[itemKey];
                     }
                 }
-                table._selectedDataItemsInChart.push(selectedState);
+                newSelectedDataItemsInChart.push(selectedState);
             }
-            if (table._selectedDataItemsInChart.length === 0 && preSelectItemsCount === 0) {
-                return;
+            if (!isEqual(table._selectedDataItemsInChart, newSelectedDataItemsInChart)) {
+                table._selectedDataItemsInChart = newSelectedDataItemsInChart;
+                table.internalProps.layoutMap.updateDataStateToChartInstance();
+                clearChartCacheImage(scenegraph);
+                table.scenegraph.updateNextFrame();
             }
-            table.internalProps.layoutMap.updateDataStateToChartInstance();
-            clearChartCacheImage(scenegraph);
         }
     }
     function updateTableAxes(containerGroup, table) {
@@ -45571,108 +45998,7 @@
         });
     }
 
-    function dealFrozen(scene) {
-        if (scene.table.frozenColCount > scene.table.rowHeaderLevelCount) {
-            scene.rowHeaderGroup.setAttribute('height', scene.bodyGroup.attribute.height);
-            scene.rowHeaderGroup.setAttribute('y', scene.bodyGroup.attribute.y);
-            scene.cornerHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height);
-            for (let i = 0; i < scene.table.frozenColCount - scene.table.rowHeaderLevelCount; i++) {
-                moveColumnFromBodyToRowHeader(scene);
-                moveColumnFromColHeaderToCornerHeader(scene);
-            }
-        }
-        else if (scene.table.frozenColCount < scene.table.rowHeaderLevelCount) {
-            for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.table.frozenColCount; i++) {
-                moveColumnFromRowHeaderToBody(scene);
-                moveColumnFromCornerHeaderToColHeader(scene);
-            }
-        }
-        scene.bodyGroup.setAttribute('x', scene.rowHeaderGroup.attribute.width);
-        scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
-        scene.updateContainer();
-        scene.updateBorderSizeAndPosition();
-        if (!scene.isPivot && !scene.transpose) {
-            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
-        }
-        scene.hasFrozen = true;
-        scene.frozenColCount = scene.table.frozenColCount;
-        scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
-    }
-    function resetFrozen(scene) {
-        if (scene.frozenColCount > scene.table.rowHeaderLevelCount) {
-            for (let i = 0; i < scene.frozenColCount - scene.table.rowHeaderLevelCount; i++) {
-                moveColumnFromRowHeaderToBody(scene);
-                moveColumnFromCornerHeaderToColHeader(scene);
-            }
-        }
-        else if (scene.frozenColCount < scene.table.rowHeaderLevelCount) {
-            scene.rowHeaderGroup.setAttribute('height', scene.bodyGroup.attribute.height);
-            scene.rowHeaderGroup.setAttribute('y', scene.bodyGroup.attribute.y);
-            scene.cornerHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height);
-            for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.frozenColCount; i++) {
-                moveColumnFromBodyToRowHeader(scene);
-                moveColumnFromColHeaderToCornerHeader(scene);
-            }
-        }
-        scene.bodyGroup.setAttribute('x', scene.rowHeaderGroup.attribute.width);
-        scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
-        scene.updateContainer();
-        scene.updateBorderSizeAndPosition();
-        if (!scene.isPivot && !scene.transpose) {
-            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
-        }
-        scene.hasFrozen = true;
-        scene.frozenColCount = scene.table.rowHeaderLevelCount;
-        scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
-    }
-    function moveColumnFromBodyToRowHeader(scene) {
-        const column = scene.bodyGroup.firstChild instanceof Group ? scene.bodyGroup.firstChild : null;
-        if (column) {
-            scene.rowHeaderGroup.appendChild(column);
-            scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width + column.attribute.width);
-            scene.bodyGroup.setAttribute('width', scene.bodyGroup.attribute.width - column.attribute.width);
-        }
-    }
-    function moveColumnFromColHeaderToCornerHeader(scene) {
-        const headerColumn = scene.colHeaderGroup.firstChild instanceof Group ? scene.colHeaderGroup.firstChild : null;
-        if (headerColumn) {
-            scene.cornerHeaderGroup.appendChild(headerColumn);
-            scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width + headerColumn.attribute.width);
-            scene.colHeaderGroup.setAttribute('width', scene.colHeaderGroup.attribute.width - headerColumn.attribute.width);
-        }
-    }
-    function moveColumnFromRowHeaderToBody(scene) {
-        const column = scene.rowHeaderGroup.lastChild instanceof Group
-            ? scene.rowHeaderGroup.lastChild
-            : scene.rowHeaderGroup.lastChild?._prev;
-        if (column) {
-            if (scene.bodyGroup.firstChild) {
-                scene.bodyGroup.insertBefore(column, scene.bodyGroup.firstChild);
-            }
-            else {
-                scene.bodyGroup.appendChild(column);
-            }
-            scene.bodyGroup.setAttribute('width', scene.bodyGroup.attribute.width + column.attribute.width);
-            scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width - column.attribute.width);
-        }
-    }
-    function moveColumnFromCornerHeaderToColHeader(scene) {
-        const headerColumn = scene.cornerHeaderGroup.lastChild instanceof Group
-            ? scene.cornerHeaderGroup.lastChild
-            : scene.cornerHeaderGroup.lastChild?._prev;
-        if (headerColumn) {
-            if (scene.colHeaderGroup.firstChild) {
-                scene.colHeaderGroup.insertBefore(headerColumn, scene.colHeaderGroup.firstChild);
-            }
-            else {
-                scene.bodyGroup.appendChild(headerColumn);
-            }
-            scene.colHeaderGroup.setAttribute('width', scene.colHeaderGroup.attribute.width + headerColumn.attribute.width);
-            scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width - headerColumn.attribute.width);
-        }
-    }
-
-    function createCornerCell(frameTheme) {
+    function createCornerCell(cellGroup, frameTheme) {
         const { bgColor, borderColor, borderLineWidth, borderLineDash } = frameTheme;
         const rectAttributes = {
             x: 0,
@@ -45694,9 +46020,71 @@
             rectAttributes.strokeArrayWidth = getQuadProps(borderLineWidth);
             rectAttributes.lineWidth = 1;
         }
-        const cornerCellGroup = new Group(rectAttributes);
-        cornerCellGroup.role = 'corner-frozen';
-        return cornerCellGroup;
+        cellGroup.setAttributes(rectAttributes);
+        cellGroup.role = 'corner-frozen';
+        return cellGroup;
+    }
+
+    function initSceneGraph(scene) {
+        const width = scene.table.tableNoFrameWidth;
+        const height = scene.table.tableNoFrameHeight;
+        scene.tableGroup = new Group({ x: 0, y: 0, width, height, clip: true, pickable: false });
+        scene.tableGroup.role = 'table';
+        const colHeaderGroup = createContainerGroup(0, 0);
+        colHeaderGroup.role = 'col-header';
+        scene.colHeaderGroup = colHeaderGroup;
+        const cornerHeaderGroup = createContainerGroup(0, 0);
+        cornerHeaderGroup.role = 'corner-header';
+        scene.cornerHeaderGroup = cornerHeaderGroup;
+        const rowHeaderGroup = createContainerGroup(0, 0);
+        rowHeaderGroup.role = 'row-header';
+        scene.rowHeaderGroup = rowHeaderGroup;
+        const bodyGroup = createContainerGroup(width, 0);
+        bodyGroup.role = 'body';
+        scene.bodyGroup = bodyGroup;
+        const rightFrozenGroup = createContainerGroup(0, 0);
+        rightFrozenGroup.role = 'right-frozen';
+        scene.rightFrozenGroup = rightFrozenGroup;
+        const bottomFrozenGroup = createContainerGroup(0, 0);
+        bottomFrozenGroup.role = 'bottom-frozen';
+        scene.bottomFrozenGroup = bottomFrozenGroup;
+        const componentGroup = createContainerGroup(0, 0);
+        componentGroup.role = 'component';
+        scene.componentGroup = componentGroup;
+        const rightTopCornerGroup = createContainerGroup(0, 0);
+        rightTopCornerGroup.role = 'corner-right-top-header';
+        scene.rightTopCornerGroup = rightTopCornerGroup;
+        const rightBottomCornerGroup = createContainerGroup(0, 0);
+        rightBottomCornerGroup.role = 'corner-right-bottom-header';
+        scene.rightBottomCornerGroup = rightBottomCornerGroup;
+        const leftBottomCornerGroup = createContainerGroup(0, 0);
+        leftBottomCornerGroup.role = 'corner-left-bottom-header';
+        scene.leftBottomCornerGroup = leftBottomCornerGroup;
+        if (scene.table.isPivotChart()) {
+            createCornerCell(rightTopCornerGroup, scene.table.theme.cornerRightTopCellStyle || scene.table.theme.cornerHeaderStyle);
+            createCornerCell(leftBottomCornerGroup, scene.table.theme.cornerLeftBottomCellStyle || scene.table.theme.cornerHeaderStyle);
+            createCornerCell(rightBottomCornerGroup, scene.table.theme.cornerRightBottomCellStyle || scene.table.theme.cornerHeaderStyle);
+        }
+        scene.tableGroup.addChild(bodyGroup);
+        scene.tableGroup.addChild(rightFrozenGroup);
+        scene.tableGroup.addChild(bottomFrozenGroup);
+        scene.tableGroup.addChild(rowHeaderGroup);
+        scene.tableGroup.addChild(colHeaderGroup);
+        scene.tableGroup.addChild(rightBottomCornerGroup);
+        scene.tableGroup.addChild(rightTopCornerGroup);
+        scene.tableGroup.addChild(leftBottomCornerGroup);
+        scene.tableGroup.addChild(cornerHeaderGroup);
+        scene.tableGroup.addChild(componentGroup);
+    }
+    function createContainerGroup(width, height) {
+        return new Group({
+            x: 0,
+            y: 0,
+            width,
+            height,
+            clip: false,
+            pickable: false
+        });
     }
 
     container.load(splitModule);
@@ -45709,9 +46097,9 @@
         bodyGroup;
         rightFrozenGroup;
         bottomFrozenGroup;
-        rightTopCellGroup;
-        leftBottomCellGroup;
-        rightBottomCellGroup;
+        rightTopCornerGroup;
+        leftBottomCornerGroup;
+        rightBottomCornerGroup;
         componentGroup;
         selectedRangeComponents;
         selectingRangeComponents;
@@ -45778,94 +46166,7 @@
         initSceneGraph() {
             this.isPivot = this.table.isPivotTable();
             this.transpose = this.table.options.transpose;
-            const width = this.table.tableNoFrameWidth;
-            const height = this.table.tableNoFrameHeight;
-            this.tableGroup = new Group({ x: 0, y: 0, width, height, clip: true, pickable: false });
-            this.tableGroup.role = 'table';
-            const colHeaderGroup = new Group({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0,
-                clip: false,
-                pickable: false
-            });
-            colHeaderGroup.role = 'col-header';
-            this.colHeaderGroup = colHeaderGroup;
-            const cornerHeaderGroup = new Group({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0,
-                clip: false,
-                pickable: false
-            });
-            cornerHeaderGroup.role = 'corner-header';
-            this.cornerHeaderGroup = cornerHeaderGroup;
-            const rowHeaderGroup = new Group({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0,
-                clip: false,
-                pickable: false
-            });
-            rowHeaderGroup.role = 'row-header';
-            this.rowHeaderGroup = rowHeaderGroup;
-            const bodyGroup = new Group({
-                x: 0,
-                y: 0,
-                width,
-                height: 0,
-                clip: false,
-                pickable: false
-            });
-            bodyGroup.role = 'body';
-            this.bodyGroup = bodyGroup;
-            const rightFrozenGroup = new Group({
-                x: 0,
-                y: 0,
-                width,
-                height: 0,
-                clip: false,
-                pickable: false
-            });
-            rightFrozenGroup.role = 'right-frozen';
-            this.rightFrozenGroup = rightFrozenGroup;
-            const bottomFrozenGroup = new Group({
-                x: 0,
-                y: 0,
-                width,
-                height: 0,
-                clip: false,
-                pickable: false
-            });
-            bottomFrozenGroup.role = 'bottom-frozen';
-            this.bottomFrozenGroup = bottomFrozenGroup;
-            const componentGroup = new Group({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0,
-                clip: false,
-                pickable: false,
-                childrenPickable: true
-            });
-            componentGroup.role = 'component';
-            this.componentGroup = componentGroup;
-            this.rightTopCellGroup = createCornerCell(this.table.theme.cornerRightTopCellStyle || this.table.theme.cornerHeaderStyle);
-            this.leftBottomCellGroup = createCornerCell(this.table.theme.cornerLeftBottomCellStyle || this.table.theme.cornerHeaderStyle);
-            this.rightBottomCellGroup = createCornerCell(this.table.theme.cornerRightBottomCellStyle || this.table.theme.cornerHeaderStyle);
-            this.tableGroup.addChild(bodyGroup);
-            this.tableGroup.addChild(rightFrozenGroup);
-            this.tableGroup.addChild(bottomFrozenGroup);
-            this.tableGroup.addChild(rowHeaderGroup);
-            this.tableGroup.addChild(colHeaderGroup);
-            this.tableGroup.addChild(this.rightBottomCellGroup);
-            this.tableGroup.addChild(this.rightTopCellGroup);
-            this.tableGroup.addChild(this.leftBottomCellGroup);
-            this.tableGroup.addChild(cornerHeaderGroup);
-            this.tableGroup.addChild(componentGroup);
+            initSceneGraph(this);
         }
         clearCells() {
             this.clear = true;
@@ -45877,9 +46178,9 @@
             this.bodyGroup.clear();
             this.bottomFrozenGroup.clear();
             this.rightFrozenGroup.clear();
-            this.rightTopCellGroup.clear();
-            this.rightBottomCellGroup.clear();
-            this.leftBottomCellGroup.clear();
+            this.rightTopCornerGroup.clear();
+            this.rightBottomCornerGroup.clear();
+            this.leftBottomCornerGroup.clear();
             this.colHeaderGroup.setAttributes({
                 x: 0,
                 y: 0,
@@ -45916,21 +46217,21 @@
                 width: 0,
                 height: 0
             });
-            this.rightTopCellGroup.setAttributes({
+            this.rightTopCornerGroup.setAttributes({
                 x: 0,
                 y: 0,
                 width: 0,
                 height: 0,
                 visible: false
             });
-            this.leftBottomCellGroup.setAttributes({
+            this.leftBottomCornerGroup.setAttributes({
                 x: 0,
                 y: 0,
                 width: 0,
                 height: 0,
                 visible: false
             });
-            this.rightTopCellGroup.setAttributes({
+            this.rightBottomCornerGroup.setAttributes({
                 x: 0,
                 y: 0,
                 width: 0,
@@ -46008,7 +46309,23 @@
         }
         getCell(col, row, getShadow) {
             let cell;
-            if (this.table.rightFrozenColCount > 0 && col > this.table.colCount - 1 - this.table.rightFrozenColCount) {
+            if (this.table.rightFrozenColCount > 0 &&
+                col >= this.table.colCount - this.table.rightFrozenColCount &&
+                row < this.table.frozenRowCount) {
+                cell = this.rightBottomCornerGroup.getColGroup(col)?.getRowGroup(row);
+            }
+            else if (this.table.bottomFrozenRowCount > 0 &&
+                row >= this.table.rowCount - this.table.bottomFrozenRowCount &&
+                col < this.table.frozenColCount) {
+                cell = this.leftBottomCornerGroup.getColGroup(col)?.getRowGroup(row);
+            }
+            else if (this.table.rightFrozenColCount > 0 &&
+                this.table.bottomFrozenRowCount > 0 &&
+                col >= this.table.colCount - this.table.rightFrozenColCount &&
+                row >= this.table.rowCount - this.table.bottomFrozenRowCount) {
+                cell = this.rightBottomCornerGroup.getColGroup(col)?.getRowGroup(row);
+            }
+            else if (this.table.rightFrozenColCount > 0 && col > this.table.colCount - 1 - this.table.rightFrozenColCount) {
                 cell = this.rightFrozenGroup.getColGroup(col)?.getRowGroup(row);
             }
             else if (this.table.bottomFrozenRowCount > 0 && row > this.table.rowCount - 1 - this.table.bottomFrozenRowCount) {
@@ -46056,6 +46373,24 @@
             }
             return undefined;
         }
+        getColGroupInLeftBottomCorner(col) {
+            if (this.table.bottomFrozenRowCount > 0) {
+                return this.leftBottomCornerGroup.getColGroup(col);
+            }
+            return undefined;
+        }
+        getColGroupInRightTopCorner(col) {
+            if (this.table.rightFrozenColCount > 0) {
+                return this.rightTopCornerGroup.getColGroup(col);
+            }
+            return undefined;
+        }
+        getColGroupInRightBottomCorner(col) {
+            if (this.table.rightFrozenColCount > 0 && this.table.bottomFrozenRowCount > 0) {
+                return this.rightBottomCornerGroup.getColGroup(col);
+            }
+            return undefined;
+        }
         getCellSize(col, row) {
             const cell = this.getCell(col, row);
             const mergeInfo = getCellMergeInfo(this.table, col, row);
@@ -46251,7 +46586,7 @@
             this.tableGroup.setAttributes({
                 width: Math.min(this.table.tableNoFrameWidth, Math.max(this.colHeaderGroup.attribute.width, this.bodyGroup.attribute.width, 0) +
                     Math.max(this.cornerHeaderGroup.attribute.width, this.rowHeaderGroup.attribute.width, 0) +
-                    this.rightBottomCellGroup.attribute.width),
+                    this.rightBottomCornerGroup.attribute.width),
                 height: Math.min(this.table.tableNoFrameHeight, (this.colHeaderGroup.attribute.height ?? 0) +
                     (this.bodyGroup.attribute.height ?? 0) +
                     this.bottomFrozenGroup.attribute.height)
@@ -46264,13 +46599,13 @@
             }
             if (this.table.bottomFrozenRowCount > 0) {
                 this.bottomFrozenGroup.setAttribute('y', this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height);
-                this.leftBottomCellGroup.setAttributes({
+                this.leftBottomCornerGroup.setAttributes({
                     visible: true,
                     y: this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height,
                     height: this.bottomFrozenGroup.attribute.height,
                     width: this.table.getFrozenColsWidth()
                 });
-                this.rightBottomCellGroup.setAttributes({
+                this.rightBottomCornerGroup.setAttributes({
                     visible: true,
                     y: this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height,
                     height: this.bottomFrozenGroup.attribute.height
@@ -46278,13 +46613,13 @@
             }
             if (this.table.rightFrozenColCount > 0) {
                 this.rightFrozenGroup.setAttribute('x', this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width);
-                this.rightTopCellGroup.setAttributes({
+                this.rightTopCornerGroup.setAttributes({
                     visible: true,
                     x: this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width,
                     width: this.rightFrozenGroup.attribute.width,
                     height: this.table.getFrozenRowsHeight()
                 });
-                this.rightBottomCellGroup.setAttributes({
+                this.rightBottomCornerGroup.setAttributes({
                     visible: true,
                     x: this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width,
                     width: this.rightFrozenGroup.attribute.width
@@ -46311,12 +46646,17 @@
             this.updateNextFrame();
         }
         updateContainerHeight(row, detaY) {
-            if (row < this.frozenRowCount) {
+            if (row < this.table.frozenRowCount) {
                 this.colHeaderGroup.setDeltaHeight(detaY);
                 this.cornerHeaderGroup.setDeltaHeight(detaY);
                 this.rowHeaderGroup.setDeltaY(detaY);
                 this.bodyGroup.setDeltaY(detaY);
             }
+            else if (row >= this.table.rowCount - this.table.bottomFrozenRowCount) {
+                this.leftBottomCornerGroup.setDeltaHeight(detaY);
+                this.bottomFrozenGroup.setDeltaHeight(detaY);
+                this.rightBottomCornerGroup.setDeltaHeight(detaY);
+            }
             else {
                 this.rowHeaderGroup.setDeltaHeight(detaY);
                 this.bodyGroup.setDeltaHeight(detaY);
@@ -46597,6 +46937,20 @@
             this.dealFrozen();
             this.component.updateScrollBar();
         }
+        dealWidthRightFrozen(rightFrozenColCount) {
+            if (this.clear) {
+                this.table.internalProps.rightFrozenColCount = rightFrozenColCount;
+                return;
+            }
+            dealRightFrozen(rightFrozenColCount, this);
+        }
+        dealWidthBottomFrozen(bottomFrozenRowCount) {
+            if (this.clear) {
+                this.table.internalProps.bottomFrozenRowCount = bottomFrozenRowCount;
+                return;
+            }
+            dealBottomFrozen(bottomFrozenRowCount, this);
+        }
         updateBorderSizeAndPosition() {
             if (this.bodyGroup.border) {
                 this.bodyGroup.appendChild(this.bodyGroup.border);
@@ -46901,7 +47255,7 @@
         if (col === -1 || row === -1) {
             cellPos.col = -1;
             cellPos.row = -1;
-            if (updateScenegraph) {
+            if (updateScenegraph && (prevHoverCellCol !== col || prevHoverCellRow !== row)) {
                 state.table.scenegraph.updateNextFrame();
             }
             return;
@@ -48242,6 +48596,23 @@
     function drillClick(table) {
         table.fireListeners(PIVOT_TABLE_EVENT_TYPE.DRILLMENU_CLICK, table.stateManeger.drill);
     }
+    function checkHaveDrill(table) {
+        const rowsDefine = table.internalProps.layoutMap.rowsDefine;
+        const columnsDefine = table.internalProps.layoutMap.columnsDefine;
+        for (let i = 0; i < rowsDefine.length; i++) {
+            const row = rowsDefine[i];
+            if (typeof row !== 'string' && (row.drillDown || row.drillUp)) {
+                return true;
+            }
+        }
+        for (let i = 0; i < columnsDefine.length; i++) {
+            const column = columnsDefine[i];
+            if (typeof column !== 'string' && (column.drillDown || column.drillUp)) {
+                return true;
+            }
+        }
+        return false;
+    }
 
     function bindSparklineHoverEvent(table) {
         let hasSparkLine = false;
@@ -49026,6 +49397,9 @@
             return;
         }
         table.scenegraph.tableGroup.addEventListener('click', (e) => {
+            if (table.stateManeger.columnMove.moving || table.stateManeger.columnResize.resizing) {
+                return;
+            }
             if (e.target.name === 'axis-label') {
                 const eventArgsSet = getCellEventArgsSet(e);
                 const { col, row } = eventArgsSet.eventArgs;
@@ -49058,7 +49432,7 @@
                 clearChartCacheImage(table.scenegraph);
                 table.scenegraph.updateNextFrame();
             }
-            else if (table._selectedDimensionInChart) {
+            else if (table._selectedDimensionInChart?.length) {
                 table._selectedDimensionInChart.length = 0;
                 const layout = table.internalProps.layoutMap;
                 layout.updateDataStateToChartInstance();
@@ -49201,7 +49575,7 @@
                     }
                 }
             });
-            if (this.table.isPivotTable()) {
+            if (this.table.isPivotTable() && checkHaveDrill(this.table)) {
                 bindDrillEvent(this.table);
             }
             bindSparklineHoverEvent(this.table);
@@ -51772,19 +52146,19 @@
             if (this.legendComponent) {
                 this.legendComponent.addEventListener(LegendEvent.legendItemClick, (e) => {
                     const selectedData = get$4(e, 'detail.currentSelected');
-                    this.table.scenegraph.updateNextFrame();
                     this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_CLICK, { model: this, value: selectedData, event: e });
                 });
                 this.legendComponent.addEventListener(LegendEvent.legendItemHover, (e) => {
                     const detail = get$4(e, 'detail');
-                    this.table.scenegraph.updateNextFrame();
                     this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_HOVER, { model: this, value: detail, event: e });
                 });
                 this.legendComponent.addEventListener(LegendEvent.legendItemUnHover, (e) => {
                     const detail = get$4(e, 'detail');
-                    this.table.scenegraph.updateNextFrame();
                     this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_UNHOVER, { model: this, value: detail, event: e });
                 });
+                this.legendComponent.addEventListener('legendItemAttributeUpdate', (e) => {
+                    this.table.scenegraph.updateNextFrame();
+                });
             }
         }
         getLegendBounds() {
@@ -51959,13 +52333,11 @@
         stateManeger;
         eventManeger;
         _pixelRatio;
-        bottomFrozenRowCount = 0;
-        rightFrozenColCount = 0;
         static get EVENT_TYPE() {
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.3-alpha.7";
+        version = "0.10.0";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51976,7 +52348,7 @@
             if (!container) {
                 throw new Error("vtable's container is undefined");
             }
-            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio } = options;
+            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount } = options;
             this.container = container;
             this.options = options;
             this.options.container = container;
@@ -52021,6 +52393,8 @@
             internalProps.keyboardOptions = keyboardOptions;
             internalProps.columnResizeMode = columnResizeMode;
             internalProps.dragHeaderMode = dragHeaderMode;
+            internalProps.renderChartAsync = renderChartAsync;
+            setBatchRenderChartCount(renderChartAsyncBatchCount);
             internalProps._rowHeightsMap = new NumberMap();
             internalProps._rowRangeHeightsMap = new Map();
             internalProps._colRangeWidthsMap = new Map();
@@ -52169,6 +52543,18 @@
         set frozenRowCount(frozenRowCount) {
             this.internalProps.frozenRowCount = frozenRowCount;
         }
+        get rightFrozenColCount() {
+            return this.internalProps.rightFrozenColCount ?? 0;
+        }
+        set rightFrozenColCount(rightFrozenColCount) {
+            this.scenegraph.dealWidthRightFrozen(rightFrozenColCount);
+        }
+        get bottomFrozenRowCount() {
+            return this.internalProps.bottomFrozenRowCount ?? 0;
+        }
+        set bottomFrozenRowCount(bottomFrozenRowCount) {
+            this.scenegraph.dealWidthBottomFrozen(bottomFrozenRowCount);
+        }
         get defaultRowHeight() {
             return this.internalProps.defaultRowHeight;
         }
@@ -52902,7 +53288,7 @@
         }
         updateOption(options) {
             this.options = options;
-            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, customRender } = options;
+            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, customRender, renderChartAsync, renderChartAsyncBatchCount } = options;
             if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
                 this.internalProps.pixelRatio = pixelRatio;
             }
@@ -52940,6 +53326,8 @@
             internalProps.keyboardOptions = keyboardOptions;
             internalProps.columnResizeMode = columnResizeMode;
             internalProps.dragHeaderMode = dragHeaderMode;
+            internalProps.renderChartAsync = renderChartAsync;
+            setBatchRenderChartCount(renderChartAsyncBatchCount);
             internalProps.cellTextOverflows = {};
             internalProps._rowHeightsMap = new NumberMap();
             internalProps._rowRangeHeightsMap = new Map();
@@ -53521,7 +53909,9 @@
                 dataValue: this.getCellOriginValue(col, row),
                 cellHeaderPaths: this.getCellHeaderPaths(col, row)
             }, styleClass, this.options.autoWrapText);
-            this.bodyStyleCache.set(cacheKey, cacheStyle);
+            if (!isFunction(style)) {
+                this.bodyStyleCache.set(cacheKey, cacheStyle);
+            }
             return cacheStyle;
         }
         clearCellStyleCache() {
@@ -54104,7 +54494,9 @@
             if (isArray$3(rowDimensionKey)) {
                 rowDimensionKey = rowDimensionKey[0];
             }
-            const data = layout.dataset.cacheCollectedValues[rowDimensionKey] || layout.dataset.collectedValues[rowDimensionKey];
+            const data = layout.dataset.cacheCollectedValues[rowDimensionKey] ||
+                layout.dataset.collectedValues[rowDimensionKey] ||
+                [];
             const recordRow = layout.getRecordIndexByRow(row);
             const rowPath = layout.getRowKeysPath()[recordRow];
             const domain = data[rowPath[rowPath.length - 1]];
@@ -54155,7 +54547,9 @@
             if (isArray$3(columnDimensionKey)) {
                 columnDimensionKey = columnDimensionKey[0];
             }
-            const data = layout.dataset.cacheCollectedValues[columnDimensionKey] || layout.dataset.collectedValues[columnDimensionKey];
+            const data = layout.dataset.cacheCollectedValues[columnDimensionKey] ||
+                layout.dataset.collectedValues[columnDimensionKey] ||
+                [];
             const recordCol = layout.getRecordIndexByCol(col);
             const colPath = layout.getColKeysPath()[recordCol];
             const domain = data?.[colPath[colPath.length - 1]] ?? [];
@@ -55056,6 +55450,7 @@
                     (table.internalProps.dataSource?.length ?? 0) * layoutMap.bodyRowCount + layoutMap.headerLevelCount;
                 table.frozenRowCount = 0;
                 table.frozenColCount = layoutMap.headerLevelCount;
+                table.rightFrozenColCount = this.options.rightFrozenColCount ?? 0;
             }
             else {
                 table.colCount = layoutMap.colCount ?? 0;
@@ -55063,6 +55458,8 @@
                     (table.internalProps.dataSource?.length ?? 0) * layoutMap.bodyRowCount + layoutMap.headerLevelCount;
                 table.frozenColCount = table.options.frozenColCount ?? 0;
                 table.frozenRowCount = layoutMap.headerLevelCount;
+                table.bottomFrozenRowCount = this.options.bottomFrozenRowCount ?? 0;
+                table.rightFrozenColCount = this.options.rightFrozenColCount ?? 0;
             }
         }
         getFieldData(field, col, row) {
@@ -57874,7 +58271,7 @@
                             });
                             return !!match;
                         }
-                        else if (this._table._selectedDimensionInChart.length) {
+                        else if (this._table._selectedDimensionInChart?.length) {
                             const match = this._table._selectedDimensionInChart.every(item => {
                                 if (datum[item.key] !== item.value) {
                                     return false;
@@ -57899,7 +58296,7 @@
                             });
                             return !match;
                         }
-                        else if (this._table._selectedDimensionInChart.length) {
+                        else if (this._table._selectedDimensionInChart?.length) {
                             const match = this._table._selectedDimensionInChart.every(item => {
                                 if (datum[item.key] !== item.value) {
                                     return false;
@@ -59632,8 +60029,8 @@
             table.rowCount = layoutMap.rowCount ?? 0;
             table.frozenColCount = layoutMap.rowHeaderLevelCount;
             table.frozenRowCount = layoutMap.headerLevelCount;
-            table.bottomFrozenRowCount = layoutMap?.bottomFrozenRowCount ?? 0;
-            table.rightFrozenColCount = layoutMap?.rightFrozenColCount ?? 0;
+            table.bottomFrozenRowCount = this.options.bottomFrozenRowCount ?? 0;
+            table.rightFrozenColCount = this.options.rightFrozenColCount ?? 0;
         }
         _getSortFuncFromHeaderOption(columns, field, fieldKey) {
             return undefined;
@@ -61168,7 +61565,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.3-alpha.7";
+    const version = "0.10.0";
     function getIcons() {
         return get$1();
     }