@visactor/vtable 0.9.3-alpha.6 → 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) {
@@ -39137,34 +39150,35 @@
                 fontSize: DEFAULT_TEXT_FONT_SIZE
             },
             getTextBounds: useNaiveCanvas ? undefined : getTextBounds,
-            specialCharSet: `-/: .,@%'"~${TextMeasure.ALPHABET_CHAR_SET}${TextMeasure.ALPHABET_CHAR_SET.toUpperCase()}`,
+            specialCharSet: `{}()//&-/: .,@%'"~${TextMeasure.ALPHABET_CHAR_SET}${TextMeasure.ALPHABET_CHAR_SET.toUpperCase()}`,
             ...(option ?? {})
         }, textSpec);
     };
     const fastTextMeasureCache = new Map();
-    function getFastTextMeasure(fontSize, fontFamily) {
-        const key = `${fontSize}-${fontFamily}`;
+    function getFastTextMeasure(fontSize, fontWeight, fontFamily) {
+        const key = `${fontSize}-${fontWeight}-${fontFamily}`;
         const cache = fastTextMeasureCache.get(key);
         if (cache) {
             return cache;
         }
         const fastTextMeasure = initTextMeasure({
             fontSize,
-            fontFamily
+            fontFamily,
+            fontWeight
         });
         fastTextMeasureCache.set(key, fastTextMeasure);
         return fastTextMeasure;
     }
     class TextMeasureTool {
         measureText(text, options) {
-            const { fontSize, fontFamily } = options;
-            const fastTextMeasure = getFastTextMeasure(fontSize, fontFamily);
+            const { fontSize, fontFamily, fontWeight } = options;
+            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily);
             const textMeasure = fastTextMeasure.measure(text);
             return textMeasure;
         }
         measureTextWidth(text, options) {
-            const { fontSize, fontFamily = 'sans-serif' } = options;
-            const fastTextMeasure = getFastTextMeasure(fontSize, fontFamily);
+            const { fontSize, fontFamily = 'sans-serif', fontWeight = 'normal' } = options;
+            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily);
             const textMeasure = fastTextMeasure.measure(text);
             return textMeasure.width;
         }
@@ -39245,7 +39259,7 @@
             let width;
             let str;
             const attribute = this.attribute;
-            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontFamily = textTheme.fontFamily, stroke = textTheme.stroke, lineHeight = attribute.lineHeight ?? attribute.fontSize ?? textTheme.fontSize, lineWidth = textTheme.lineWidth } = attribute;
+            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontFamily = textTheme.fontFamily, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = attribute.lineHeight ?? attribute.fontSize ?? textTheme.fontSize, lineWidth = textTheme.lineWidth } = attribute;
             if (!this.shouldUpdateShape() && this.cache) {
                 width = this.cache.clipedWidth;
                 const dx = textDrawOffsetX(textAlign, width);
@@ -39272,7 +39286,7 @@
                 this.cache.clipedWidth = width;
             }
             else {
-                width = textMeasure.measureTextWidth(text.toString(), { fontSize, fontFamily });
+                width = textMeasure.measureTextWidth(text.toString(), { fontSize, fontFamily, fontWeight });
                 this.cache.clipedText = text.toString();
                 this.cache.clipedWidth = width;
             }
@@ -39287,7 +39301,7 @@
         }
         updateMultilineAABBBounds(text) {
             const textTheme = getTheme(this).text;
-            const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, lineHeight = this.attribute.lineHeight ?? this.attribute.fontSize ?? textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, heightLimit = -1, lineClamp = textTheme.lineClamp, autoWrapText = textTheme.autoWrapText } = this.attribute;
+            const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, fontWeight = textTheme.fontWeight, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, lineHeight = this.attribute.lineHeight ?? this.attribute.fontSize ?? textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, heightLimit = -1, lineClamp = textTheme.lineClamp, autoWrapText = textTheme.autoWrapText } = this.attribute;
             if (!this.shouldUpdateShape() && this.cache?.layoutData) {
                 const bbox = this.cache.layoutData.bbox;
                 this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
@@ -39336,7 +39350,7 @@
                         const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth);
                         if (str !== '' && clip.str === '') {
                             clip.str = str.substring(0, 1);
-                            clip.width = textMeasure.measureTextWidth(clip.str, { fontSize, fontFamily });
+                            clip.width = textMeasure.measureTextWidth(clip.str, { fontSize, fontFamily, fontWeight });
                         }
                         linesLayout.push({
                             str: clip.str,
@@ -40419,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);
@@ -40452,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) => {
@@ -40581,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;
@@ -40654,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);
@@ -40664,6 +40660,9 @@
         let maxHeight = 0;
         for (let col = 0; col < scene.table.colCount; col++) {
             const cell = scene.highPerformanceGetCell(col, row);
+            if (cell.role === 'empty') {
+                return;
+            }
             let cellHeight = getCleanCellHeight(cell, scene);
             const mergeInfo = getCellMergeInfo(scene.table, col, row);
             if (mergeInfo && mergeInfo.end.row - mergeInfo.start.row) {
@@ -40674,6 +40673,9 @@
         for (let col = 0; col < scene.table.colCount; col++) {
             let distHeight = maxHeight;
             const cell = scene.highPerformanceGetCell(col, row);
+            if (cell.role === 'empty') {
+                return;
+            }
             const mergeInfo = getCellMergeInfo(scene.table, col, row);
             if (mergeInfo && mergeInfo.end.row - mergeInfo.start.row) {
                 for (let rowIndex = mergeInfo.start.row; rowIndex <= mergeInfo.end.row; rowIndex++) {
@@ -41794,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') {
@@ -41823,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) {
@@ -41881,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 {
@@ -42337,10 +42379,12 @@
         drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke) {
             if (group.role === 'cell') {
                 const table = group.stage.table;
-                const hoverColor = getCellHoverColor(group, table);
-                if (hoverColor) {
-                    group.oldColor = group.attribute.fill;
-                    group.attribute.fill = hoverColor;
+                if (table.stateManeger.interactionState !== InteractionState.scrolling) {
+                    const hoverColor = getCellHoverColor(group, table);
+                    if (hoverColor) {
+                        group.oldColor = group.attribute.fill;
+                        group.attribute.fill = hoverColor;
+                    }
                 }
             }
         }
@@ -42558,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;
@@ -42659,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]] ?? [];
@@ -42743,6 +42787,7 @@
                     }
                     labelWidth = Math.max(labelWidth, table.measureText(text, {
                         fontSize: attribute.label?.style?.fontSize,
+                        fontWeight: attribute.label?.style?.fontWeight,
                         fontFamily: attribute.label?.style?.fontFamily
                     }).width);
                 });
@@ -42759,6 +42804,7 @@
                     }
                     labelWidth = Math.max(labelWidth, table.measureText(text, {
                         fontSize: attribute.label?.style?.fontSize,
+                        fontWeight: attribute.label?.style?.fontWeight,
                         fontFamily: attribute.label?.style?.fontFamily
                     }).width + 2);
                 });
@@ -42771,6 +42817,7 @@
                 titleWidth =
                     table.measureText(attribute.title.text, {
                         fontSize: attribute.title?.style?.fontSize,
+                        fontWeight: attribute.title?.style?.fontWeight,
                         fontFamily: attribute.title?.style?.fontFamily
                     }).height + 2;
             }
@@ -42778,6 +42825,7 @@
                 titleWidth =
                     table.measureText(attribute.title.text, {
                         fontSize: attribute.title?.style?.fontSize,
+                        fontWeight: attribute.title?.style?.fontWeight,
                         fontFamily: attribute.title?.style?.fontFamily
                     }).width + 2;
             }
@@ -42848,6 +42896,7 @@
     }
 
     function computeColsWidth(table, colStart, colEnd, update) {
+        typeof window !== 'undefined' ? window.performance.now() : 0;
         colStart = colStart ?? 0;
         colEnd = colEnd ?? table.colCount - 1;
         if (colStart === 0 && colEnd === table.colCount - 1) {
@@ -43127,12 +43176,14 @@
         const paddingWidth = padding[1] + padding[3];
         const fontSize = getProp('fontSize', actStyle, col, row, table);
         const fontFamily = getProp('fontFamily', actStyle, col, row, table);
+        const fontWeight = getProp('fontWeight', actStyle, col, row, table);
         const lines = validToString(cellValue).split('\n') || [];
         if (lines.length >= 1) {
             lines.forEach((line) => {
                 const width = table.measureText(line.slice(0, table.options.maxCharactersNumber || 200), {
                     fontSize,
-                    fontFamily
+                    fontFamily,
+                    fontWeight
                 }).width;
                 maxWidth = Math.max((width + paddingWidth + 4 + iconWidth) / spanCol, maxWidth);
             });
@@ -43164,19 +43215,14 @@
         height: 0,
         textConfig: []
     });
-    function computeRowsHeight(table, rowStart, rowEnd) {
-        const time = typeof window !== 'undefined' ? window.performance.now() : 0;
+    function computeRowsHeight(table, rowStart, rowEnd, isClearRowRangeHeightsMap = true) {
+        typeof window !== 'undefined' ? window.performance.now() : 0;
         if (table.heightMode === 'autoHeight' || table.heightMode === 'adaptive') {
             rowStart = rowStart ?? 0;
             rowEnd = rowEnd ?? table.rowCount - 1;
-            if (rowStart === 0 && rowEnd === table.rowCount - 1) {
+            if ((rowStart === 0 && rowEnd === table.rowCount - 1) || isClearRowRangeHeightsMap) {
                 table._clearRowRangeHeightsMap();
             }
-            else {
-                for (let row = rowStart; row <= rowEnd; row++) {
-                    table._clearRowRangeHeightsMap(row);
-                }
-            }
             for (let row = rowStart; row < table.columnHeaderLevelCount; row++) {
                 const height = computeRowHeight(row, 0, table.colCount - 1, table);
                 table.setRowHeight(row, height);
@@ -43184,24 +43230,31 @@
             if (rowEnd < table.columnHeaderLevelCount) {
                 return;
             }
-            if (!table.internalProps.transpose &&
-                !(table.isPivotTable() && table.internalProps.layoutMap.indicatorsAsCol) &&
+            if (!(table.internalProps.transpose ||
+                (table.isPivotTable() && !table.internalProps.layoutMap.indicatorsAsCol)) &&
                 checkFixedStyleAndNoWrap(table)) {
                 const height = computeRowHeight(table.columnHeaderLevelCount, 0, table.colCount - 1, table);
-                fillRowsHeight(height, table.columnHeaderLevelCount, table.rowCount - 1, table);
+                fillRowsHeight(height, table.columnHeaderLevelCount, table.rowCount - 1 - table.bottomFrozenRowCount, table);
+                for (let row = table.rowCount - table.bottomFrozenRowCount; row <= rowEnd; row++) {
+                    const height = computeRowHeight(row, 0, table.colCount - 1, table);
+                    table.setRowHeight(row, height);
+                }
             }
-            else if ((table.internalProps.transpose ||
-                (table.isPivotTable() && !table.internalProps.layoutMap.indicatorsAsCol)) &&
-                checkFixedStyleAndNoWrap(table)) {
+            else if (table.internalProps.transpose ||
+                (table.isPivotTable() && !table.internalProps.layoutMap.indicatorsAsCol)) {
                 for (let row = Math.max(rowStart, table.columnHeaderLevelCount); row <= rowEnd; row++) {
-                    table._clearRowRangeHeightsMap(row);
-                    const height = computeRowHeight(row, 0, table.rowHeaderLevelCount, table);
+                    let height;
+                    if (checkFixedStyleAndNoWrapForTranspose(table, row)) {
+                        height = computeRowHeight(row, 0, table.rowHeaderLevelCount, table);
+                    }
+                    else {
+                        height = computeRowHeight(row, 0, table.colCount - 1, table);
+                    }
                     table.setRowHeight(row, height);
                 }
             }
             else {
                 for (let row = Math.max(rowStart, table.columnHeaderLevelCount); row <= rowEnd; row++) {
-                    table._clearRowRangeHeightsMap(row);
                     const height = computeRowHeight(row, 0, table.colCount - 1, table);
                     table.setRowHeight(row, height);
                 }
@@ -43227,7 +43280,6 @@
                 table.setRowHeight(row, rowHeight, false);
             }
         }
-        console.log('computeRowsHeight  time:', (typeof window !== 'undefined' ? window.performance.now() : 0) - time);
     }
     function computeRowHeight(row, startCol, endCol, table) {
         let maxHeight = 0;
@@ -43269,14 +43321,16 @@
     function checkFixedStyleAndNoWrap(table) {
         const { layoutMap } = table.internalProps;
         const row = table.columnHeaderLevelCount;
+        if (table.internalProps.autoWrapText &&
+            (table.options.heightMode === 'autoHeight' || table.options.heightMode === 'adaptive')) {
+            return false;
+        }
         for (let col = 0; col < table.colCount; col++) {
-            const isHeader = layoutMap.isHeader(col, row);
-            const cellDefine = isHeader ? layoutMap.getHeader(col, row) : layoutMap.getBody(col, row);
+            const cellDefine = layoutMap.getBody(col, row);
             if (typeof cellDefine.style === 'function' ||
                 typeof cellDefine.icon === 'function' ||
-                typeof cellDefine.headerIcon === 'function' ||
-                (isHeader ? cellDefine.define?.headerCustomRender : cellDefine.define?.customRender) ||
-                (isHeader ? typeof cellDefine.define?.headerIcon === 'function' : typeof cellDefine.define?.icon === 'function')) {
+                cellDefine.define?.customRender ||
+                typeof cellDefine.define?.icon === 'function') {
                 return false;
             }
             const cellStyle = table._getCellStyle(col, row);
@@ -43289,6 +43343,28 @@
         }
         return true;
     }
+    function checkFixedStyleAndNoWrapForTranspose(table, row) {
+        const { layoutMap } = table.internalProps;
+        if (table.internalProps.autoWrapText &&
+            (table.options.heightMode === 'autoHeight' || table.options.heightMode === 'adaptive')) {
+            return false;
+        }
+        const cellDefine = layoutMap.getBody(table.rowHeaderLevelCount, row);
+        if (typeof cellDefine.style === 'function' ||
+            typeof cellDefine.icon === 'function' ||
+            cellDefine.define?.customRender ||
+            typeof cellDefine.define?.icon === 'function') {
+            return false;
+        }
+        const cellStyle = table._getCellStyle(table.rowHeaderLevelCount, row);
+        if (typeof cellStyle.padding === 'function' ||
+            typeof cellStyle.fontSize === 'function' ||
+            typeof cellStyle.lineHeight === 'function' ||
+            cellStyle.autoWrapText === true) {
+            return false;
+        }
+        return true;
+    }
     function fillRowsHeight(height, startRow, endRow, table) {
         for (let row = startRow; row <= endRow; row++) {
             table.setRowHeight(row, height);
@@ -43450,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({
@@ -43506,7 +43582,7 @@
         cellGroup.role = 'cell';
         cellGroup.col = col;
         cellGroup.row = row;
-        columnGroup.addChild(cellGroup);
+        columnGroup?.addChild(cellGroup);
         if (customElementsGroup) {
             cellGroup.appendChild(customElementsGroup);
         }
@@ -43570,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', () => {
@@ -43783,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 {
@@ -43923,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);
@@ -43992,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();
@@ -44018,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;
@@ -44047,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;
@@ -44082,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 {
@@ -44101,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();
         }
     }
@@ -44127,12 +44357,16 @@
         colGroup.needUpdate = true;
     }
     function updateColGroupContent(colGroup, proxy) {
+        if (!colGroup) {
+            return;
+        }
         let cellGroup = colGroup.firstChild;
         while (cellGroup) {
             const newCellGroup = proxy.updateCellGroupContent(cellGroup);
             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++) {
@@ -44140,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) {
@@ -44193,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') {
@@ -44308,9 +44523,7 @@
                 syncTopRow = Math.max(distStartRow, topRow);
                 syncBottomRow = Math.min(distEndRow, BottomRow);
             }
-            if (proxy.table.heightMode === 'autoHeight') {
-                computeRowsHeight(proxy.table, syncTopRow, syncBottomRow);
-            }
+            computeRowsHeight(proxy.table, syncTopRow, syncBottomRow);
             proxy.rowStart = direction === 'up' ? proxy.rowStart + count : proxy.rowStart - count;
             proxy.rowEnd = direction === 'up' ? proxy.rowEnd + count : proxy.rowEnd - count;
             checkFirstRowMerge(syncTopRow, proxy);
@@ -44346,9 +44559,7 @@
                 syncTopRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1);
                 syncBottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2);
             }
-            if (proxy.table.heightMode === 'autoHeight') {
-                computeRowsHeight(proxy.table, syncTopRow, syncBottomRow);
-            }
+            computeRowsHeight(proxy.table, syncTopRow, syncBottomRow);
             proxy.rowStart = distStartRow;
             proxy.rowEnd = distEndRow;
             checkFirstRowMerge(syncTopRow, proxy);
@@ -44446,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;
@@ -44490,7 +44678,7 @@
         rowUpdateDirection;
         screenTopRow = 0;
         deltaY = 0;
-        colLimit = 1000;
+        colLimit = 100;
         bodyLeftCol;
         bodyRightCol;
         totalCol;
@@ -44506,6 +44694,7 @@
         referenceCol;
         screenLeftCol = 0;
         colUpdateDirection;
+        deltaX = 0;
         cellCache = new Map();
         constructor(table) {
             this.table = table;
@@ -44566,26 +44755,6 @@
         async createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin) {
             await createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin, this);
         }
-        async createColGroupForFirstScreen(rowHeaderGroup, bodyGroup, xOrigin, yOrigin, table) {
-            this.setParamsForRow();
-            this.setParamsForColumn();
-            computeRowsHeight(table, this.table.columnHeaderLevelCount, Math.min(this.firstScreenRowLimit, table.rowCount - 1));
-            createColGroup(rowHeaderGroup, xOrigin, yOrigin, 0, table.rowHeaderLevelCount - 1, table.columnHeaderLevelCount, table.rowCount - 1, 'rowHeader', table, this.firstScreenRowLimit);
-            createColGroup(bodyGroup, xOrigin, yOrigin, table.rowHeaderLevelCount, table.colCount - 1, table.columnHeaderLevelCount, table.rowCount - 1, 'body', table, this.firstScreenRowLimit);
-            if (!bodyGroup.firstChild) {
-                this.currentRow = this.totalRow;
-                this.rowEnd = this.currentRow;
-                this.rowUpdatePos = this.rowEnd;
-                this.referenceRow = Math.floor((this.rowEnd - this.rowStart) / 2);
-            }
-            else {
-                this.currentRow = bodyGroup.firstChild?.rowNumber ?? this.totalRow;
-                this.rowEnd = this.currentRow;
-                this.rowUpdatePos = this.rowEnd;
-                this.referenceRow = Math.floor((this.rowEnd - this.rowStart) / 2);
-                await this.progress();
-            }
-        }
         async progress() {
             return new Promise((resolve, reject) => {
                 setTimeout(async () => {
@@ -44625,7 +44794,7 @@
         }
         createRowCellGroup(onceCount) {
             const endRow = Math.min(this.totalRow, this.currentRow + onceCount);
-            computeRowsHeight(this.table, this.currentRow + 1, endRow);
+            computeRowsHeight(this.table, this.currentRow + 1, endRow, false);
             if (this.table.rowHeaderLevelCount) {
                 let maxHeight = 0;
                 for (let col = 0; col < this.table.rowHeaderLevelCount; col++) {
@@ -44664,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
@@ -44731,7 +44906,7 @@
         updateCellGroups(count) {
             const distRow = Math.min(this.bodyBottomRow, this.rowUpdatePos + count);
             if (this.table.heightMode === 'autoHeight') {
-                computeRowsHeight(this.table, this.rowUpdatePos, distRow);
+                computeRowsHeight(this.table, this.rowUpdatePos, distRow, false);
             }
             updateRowContent(this.rowUpdatePos, distRow, this);
             if (this.table.heightMode === 'autoHeight') {
@@ -44780,9 +44955,7 @@
                 syncBottomRow = Math.min(this.bodyBottomRow, this.screenTopRow + this.screenRowCount * 3);
             }
             console.log('sort更新同步范围', syncTopRow, syncBottomRow);
-            if (this.table.heightMode === 'autoHeight') {
-                computeRowsHeight(this.table, syncTopRow, syncBottomRow);
-            }
+            computeRowsHeight(this.table, syncTopRow, syncBottomRow);
             for (let col = this.bodyLeftCol; col <= this.bodyRightCol; col++) {
                 for (let row = syncTopRow; row <= syncBottomRow; row++) {
                     const cellGroup = this.highPerformanceGetCell(col, row);
@@ -45417,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);
+        }
+        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);
+                    });
+                }
+            }
+        }
+        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;
         }
-        for (let i = 0; i < columnObjects.length; i++) {
-            const column = columnObjects[i];
-            if (column && column.style?.textStick) {
-                console.log('checkHaveTextStick', true);
-                return true;
-            }
+        if (targetGroup) {
+            container.insertBefore(newNode, targetGroup);
+        }
+        else {
+            container.appendChild(newNode);
         }
-        console.log('checkHaveTextStick', false);
-        return false;
     }
 
     function updateChartSize(scenegraph, col) {
@@ -45497,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) {
@@ -45507,7 +45951,7 @@
                                 selectedState[itemKey] = dataItem[itemKey];
                             }
                         }
-                        table._selectedDataItemsInChart.push(selectedState);
+                        newSelectedDataItemsInChart.push(selectedState);
                     }
                 });
             }
@@ -45518,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) {
@@ -45553,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,
@@ -45676,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);
@@ -45691,9 +46097,9 @@
         bodyGroup;
         rightFrozenGroup;
         bottomFrozenGroup;
-        rightTopCellGroup;
-        leftBottomCellGroup;
-        rightBottomCellGroup;
+        rightTopCornerGroup;
+        leftBottomCornerGroup;
+        rightBottomCornerGroup;
         componentGroup;
         selectedRangeComponents;
         selectingRangeComponents;
@@ -45760,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;
@@ -45859,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,
@@ -45898,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,
@@ -45990,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) {
@@ -46038,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);
@@ -46217,9 +46570,7 @@
         }
         resize() {
             this.recalculateColWidths();
-            if (this.table.heightMode === 'autoHeight') {
-                this.recalculateRowHeights();
-            }
+            this.recalculateRowHeights();
             this.dealWidthMode();
             this.dealHeightMode();
             this.dealFrozen();
@@ -46235,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)
@@ -46248,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
@@ -46262,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
@@ -46295,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);
@@ -46581,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);
@@ -46735,9 +47105,7 @@
         updateRow(removeCells, addCells) {
             updateRow(removeCells, addCells, this.table);
             this.recalculateColWidths();
-            if (this.table.heightMode === 'autoHeight') {
-                this.recalculateRowHeights();
-            }
+            this.recalculateRowHeights();
             this.table.stateManeger.checkFrozen();
             this.updateNextFrame();
         }
@@ -46887,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;
@@ -47474,6 +47842,9 @@
         sparkLine;
         _clearVerticalScrollBar;
         _clearHorizontalScrollBar;
+        resetInteractionState = debounce(() => {
+            this.updateInteractionState(InteractionState.default);
+        }, 100);
         constructor(table) {
             this.table = table;
             this.initState();
@@ -48225,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;
@@ -48763,10 +49151,16 @@
         const throttleVerticalWheel = throttle(stateManeger.updateVerticalScrollBar, 20);
         const throttleHorizontalWheel = throttle(stateManeger.updateHorizontalScrollBar, 20);
         scenegraph.component.vScrollBar.addEventListener('scroll', (e) => {
+            if (stateManeger.interactionState !== InteractionState.scrolling) {
+                stateManeger.updateInteractionState(InteractionState.scrolling);
+            }
             const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
             throttleVerticalWheel(ratio, e);
         });
         scenegraph.component.hScrollBar.addEventListener('scroll', (e) => {
+            if (stateManeger.interactionState !== InteractionState.scrolling) {
+                stateManeger.updateInteractionState(InteractionState.scrolling);
+            }
             const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
             throttleHorizontalWheel(ratio);
         });
@@ -48779,6 +49173,11 @@
             deltaY = 0;
         }
         const [optimizedDeltaX, optimizedDeltaY] = optimizeScrollXY(deltaX, deltaY, { horizontal: 1, vertical: 1 });
+        if (optimizedDeltaX || optimizedDeltaY) {
+            if (state.interactionState !== InteractionState.scrolling) {
+                state.updateInteractionState(InteractionState.scrolling);
+            }
+        }
         if (optimizedDeltaX) {
             state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX);
             state.showHorizontalScrollBar(true);
@@ -48787,6 +49186,7 @@
             state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY);
             state.showVerticalScrollBar(true);
         }
+        state.resetInteractionState();
         if (event.cancelable &&
             ((deltaY !== 0 && isVerticalScrollable(deltaY, state)) || (deltaX !== 0 && isHorizontalScrollable(deltaX, state)))) {
             event.preventDefault();
@@ -48876,7 +49276,7 @@
         handler.on(table.getElement(), 'contextmenu', (e) => {
             e.preventDefault();
         });
-        handler.on(table.getParentElement(), 'resize', () => {
+        handler.on(table.getContainer(), 'resize', () => {
             table.resize();
         });
     }
@@ -48997,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;
@@ -49029,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();
@@ -49172,7 +49575,7 @@
                     }
                 }
             });
-            if (this.table.isPivotTable()) {
+            if (this.table.isPivotTable() && checkHaveDrill(this.table)) {
                 bindDrillEvent(this.table);
             }
             bindSparklineHoverEvent(this.table);
@@ -51743,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() {
@@ -51930,21 +52333,25 @@
         stateManeger;
         eventManeger;
         _pixelRatio;
-        bottomFrozenRowCount = 0;
-        rightFrozenColCount = 0;
         static get EVENT_TYPE() {
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.3-alpha.6";
+        version = "0.10.0";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
         bodyStyleCache;
-        constructor(options = {}) {
+        container;
+        constructor(container, options = {}) {
             super();
-            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, keyboardOptions, parentElement, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio } = options;
+            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, renderChartAsync, renderChartAsyncBatchCount } = options;
+            this.container = container;
             this.options = options;
+            this.options.container = container;
             this._widthMode = widthMode;
             this._heightMode = heightMode;
             this._autoFillWidth = autoFillWidth;
@@ -51986,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();
@@ -52001,9 +52410,9 @@
             internalProps.cellTextOverflows = {};
             internalProps.focusedTable = false;
             internalProps.theme = themes.of(options.theme ?? themes.DEFAULT);
-            if (parentElement) {
-                parentElement.innerHTML = '';
-                parentElement.appendChild(internalProps.element);
+            if (container) {
+                container.innerHTML = '';
+                container.appendChild(internalProps.element);
                 this._updateSize();
             }
             else {
@@ -52056,8 +52465,8 @@
             this.bodyStyleCache = new Map();
         }
         throttleInvalidate = throttle2(this.render.bind(this), 200);
-        getParentElement() {
-            return this.options.parentElement;
+        getContainer() {
+            return this.container;
         }
         getElement() {
             return this.internalProps.element;
@@ -52134,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;
         }
@@ -52378,12 +52799,6 @@
                 this._clearRowRangeHeightsMap(row);
             }
         }
-        fillRowsHeight(rowStart, rowEnd, rowHeight) {
-            for (let row = rowStart; row <= rowEnd; row++) {
-                this.rowHeightsMap.put(row, Math.round(rowHeight));
-                this._rowRangeHeightsMap.set(`$0$${row}`, Math.round((this._rowRangeHeightsMap.get(`$0$${row - 1}`) ?? 0) + rowHeight));
-            }
-        }
         getRowsHeight(startRow, endRow) {
             const cachedRowHeight = this._rowRangeHeightsMap.get(`$${startRow}$${endRow}`);
             if (cachedRowHeight !== null && cachedRowHeight !== undefined) {
@@ -52873,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;
             }
@@ -52911,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();
@@ -53492,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() {
@@ -54075,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]];
@@ -54126,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]] ?? [];
@@ -54830,8 +55253,17 @@
 
     class ListTable extends BaseTable {
         showHeader = true;
-        constructor(options = {}) {
-            super(options);
+        constructor(container, options) {
+            if (!(container instanceof HTMLElement)) {
+                options = container;
+                if (container.container) {
+                    container = container.container;
+                }
+                else {
+                    container = null;
+                }
+            }
+            super(container, options);
             const internalProps = this.internalProps;
             this.pagerConf = options.pagerConf;
             internalProps.sortState = options.sortState;
@@ -55018,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;
@@ -55025,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) {
@@ -57836,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;
@@ -57861,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;
@@ -59397,8 +59832,17 @@
         pivotSortState;
         dataset;
         flatDataToObjects;
-        constructor(options) {
-            super(options);
+        constructor(container, options) {
+            if (!(container instanceof HTMLElement)) {
+                options = container;
+                if (container.container) {
+                    container = container.container;
+                }
+                else {
+                    container = null;
+                }
+            }
+            super(container, options);
             if (options.layout) {
                 Object.assign(options, options.layout);
             }
@@ -59585,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;
@@ -59838,8 +60282,17 @@
         _selectedDimensionInChart = [];
         _chartEventMap = {};
         _axes;
-        constructor(options) {
-            super(options);
+        constructor(container, options) {
+            if (!(container instanceof HTMLElement)) {
+                options = container;
+                if (container.container) {
+                    container = container.container;
+                }
+                else {
+                    container = null;
+                }
+            }
+            super(container, options);
             if (options.layout) {
                 Object.assign(options, options.layout);
             }
@@ -60412,11 +60865,11 @@
             });
         }
         onVChartEvent(type, query, callback) {
-            if (query) {
-                this._chartEventMap[type] = { callback, query };
+            if (typeof query === 'function') {
+                this._chartEventMap[type] = { callback: query };
             }
             else {
-                this._chartEventMap[type] = { callback };
+                this._chartEventMap[type] = { callback, query };
             }
         }
         offVChartEvent(type) {
@@ -61053,6 +61506,7 @@
         getSize(table) {
             const { width, height } = table.measureText(this.text, {
                 fontSize: this.fontSize,
+                fontWeight: this.fontWeight,
                 fontFamily: this.fontFamily
             });
             this.width = width;
@@ -61111,7 +61565,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.3-alpha.6";
+    const version = "0.10.0";
     function getIcons() {
         return get$1();
     }