@visactor/vtable 0.15.0 → 0.15.2

package/dist/vtable.js

@@ -9352,7 +9352,7 @@
     function isMouseLike(pointerType) {
       return "mouse" === pointerType || "pen" === pointerType;
     }
-    class EventManager {
+    let EventManager$1 = class EventManager {
       constructor(root, config) {
         this.dispatch = new EventEmitter(), this.mappingState = {
           trackingData: {}
@@ -9581,7 +9581,7 @@
         const pickResult = this.rootTarget.pick(x, y);
         return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : x >= 0 && x <= get$5(this.rootTarget, "width") && y >= 0 && y <= get$5(this.rootTarget, "height") ? this.rootTarget : null, e && (e.pickParams = pickResult.params), target;
       }
-    }
+    };
 
     const EventTarget$1 = {
       pickable: !0,
@@ -9656,7 +9656,7 @@
           autoPreventDefault = !1,
           clickInterval: clickInterval
         } = params;
-        this.manager = new EventManager(rootNode, {
+        this.manager = new EventManager$1(rootNode, {
           clickInterval: clickInterval
         }), this.globalObj = global, this.supportsPointerEvents = global.supportsPointerEvents, this.supportsTouchEvents = global.supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
@@ -35704,9 +35704,6 @@
             }
             return Number(v);
         });
-        const left = 0;
-        const right = contentWidth;
-        const bottom = contentHeight;
         const borderWidth = getQuadProps(getProp('borderLineWidth', style, col, row, table));
         let barPaddingTop = Math.max(barPadding[0], borderWidth[0]);
         const barPaddingRight = Math.max(barPadding[1], borderWidth[1]);
@@ -35720,6 +35717,9 @@
         if (barPaddingLeft & 1) {
             barPaddingLeft += 0.5;
         }
+        const top = barPaddingTop;
+        const left = barPaddingLeft;
+        const right = contentWidth;
         if (typeof barHeight === 'string' && str.endsWith(barHeight, '%')) {
             barHeight = Number(barHeight.substr(0, barHeight.length - 1));
             barHeight = (contentHeight * barHeight) / 100;
@@ -35758,8 +35758,9 @@
                         ? 1
                         : (num - progressBarDefine.min) / (progressBarDefine.max - progressBarDefine.min);
                 const barMaxWidth = contentWidth;
-                const barTop = barPaddingTop + contentHeight - barHeight - barBottom;
-                const barLeft = 0 + barPaddingLeft;
+                const barTop = top + contentHeight - barHeight - barBottom;
+                const barSize = Math.min(barMaxWidth * percentile, barMaxWidth);
+                const barLeft = barRightToLeft ? left + right - barSize : left;
                 const bgFillColor = getOrApply(barBgColor, {
                     col,
                     row,
@@ -35779,7 +35780,6 @@
                     });
                     percentCompleteBarGroup.addChild(barBack);
                 }
-                const barSize = Math.min(barMaxWidth * percentile, barMaxWidth);
                 const fillColor = getOrApply(barColor, {
                     col,
                     row,
@@ -35806,8 +35806,8 @@
                 const positiveRate = num > 0 ? num / positiveRange : 0;
                 const negativeRate = num < 0 ? -num / negativeRange : 0;
                 const barMaxWidth = contentWidth;
-                const barTop = barPaddingTop + contentHeight - barHeight - barBottom;
-                const barLeft = left + barPaddingLeft;
+                const barTop = top + contentHeight - barHeight - barBottom;
+                const barLeft = left;
                 const bgFillColor = getOrApply(barBgColor, {
                     col,
                     row,
@@ -35981,10 +35981,10 @@
                 const _positiveRange = progressBarDefine.max > 0 ? progressBarDefine.max : 0;
                 const range = Math.max(_negativeRange, _positiveRange);
                 const percentile = range === 0 ? 0 : Math.abs(num) / range;
-                const barMaxWidth = width - barPaddingLeft - barPaddingRight - 1;
+                const barMaxWidth = contentWidth;
                 const barSize = Math.min(barMaxWidth * percentile, barMaxWidth);
-                const barTop = bottom - barPaddingBottom - barHeight - barBottom - 1;
-                const barLeft = barRightToLeft ? right - barPaddingRight - barSize : left + barPaddingLeft;
+                const barTop = top + contentHeight - barHeight - barBottom;
+                const barLeft = barRightToLeft ? left + right - barSize : left;
                 const bgFillColor = getOrApply(barBgColor, {
                     col,
                     row,
@@ -37396,7 +37396,7 @@
             isChecked = value;
             text = '';
         }
-        isChecked = table.stateManeger.syncCheckedState(col, row, define.field, isChecked);
+        isChecked = table.stateManager.syncCheckedState(col, row, define.field, isChecked);
         const hierarchyOffset = getHierarchyOffset(col, row, table);
         const cellStyle = table._getCellStyle(col, row);
         const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
@@ -37411,7 +37411,7 @@
                 value,
                 dataValue
             });
-            isChecked = table.stateManeger.syncCheckedState(col, row, define.field, globalChecked);
+            isChecked = table.stateManager.syncCheckedState(col, row, define.field, globalChecked);
         }
         const globalDisable = getOrApply(disable, {
             col,
@@ -37481,6 +37481,9 @@
     }
 
     function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme) {
+        if (isPromise$1(value)) {
+            value = table.getCellValue(col, row);
+        }
         let bgColorFunc;
         if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
             table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
@@ -37609,7 +37612,7 @@
         const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
         let isMerge;
         let range;
-        if (cellLocation !== 'body' || define?.mergeCell) {
+        if (cellLocation !== 'body' || define?.mergeCell || table.internalProps.customMergeCell) {
             range = table.getCellRange(col, row);
             isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
         }
@@ -37715,10 +37718,10 @@
         }
         if (isPromise$1(value)) {
             oldCellGroup.removeAllChild();
-            dealPromiseData(value, table, updateCellContent.bind(null, type, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, isMerge, range, addNew, cellTheme));
+            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme));
         }
         else {
-            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, isMerge, range, addNew, cellTheme);
+            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme);
         }
         if (isMerge) {
             const rangeHeight = table.getRowHeight(row);
@@ -37731,7 +37734,10 @@
         }
         return newCellGroup;
     }
-    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, isMerge, range, addNew, cellTheme) {
+    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme) {
+        if (isPromise$1(value)) {
+            value = table.getCellValue(col, row);
+        }
         if (oldCellGroup.row !== row || oldCellGroup.col !== col) {
             return null;
         }
@@ -37750,13 +37756,15 @@
         const mayHaveIcon = !!define?.icon || !!define?.tree;
         const cellType = table.getBodyColumnType(col, row);
         const autoRowHeight = table.heightMode === 'autoHeight';
+        const value = table.getCellValue(col, row);
         if (!table.isHeader(col, row) &&
             oldCellGroup.role === 'cell' &&
             cellType === 'text' &&
             !autoWrapText &&
             !autoRowHeight &&
             !mayHaveIcon &&
-            oldCellGroup.firstChild?.type === 'text') {
+            oldCellGroup.firstChild?.type === 'text' &&
+            !isPromise$1(value)) {
             return true;
         }
         return false;
@@ -37767,9 +37775,12 @@
         let textAlign;
         let textBaseline;
         let y = 0;
-        if (columnGroup.lastChild) {
+        if (columnGroup.lastChild && columnGroup.lastChild.row === rowStart - 1) {
             y = columnGroup.lastChild.attribute.y + columnGroup.lastChild.attribute.height;
         }
+        else if (columnGroup.colHeight) {
+            y = columnGroup.colHeight;
+        }
         for (let j = rowStart; j <= rowEnd; j++) {
             const row = j;
             const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
@@ -37823,11 +37834,9 @@
             const type = (table.isHeader(col, row) ? table._getHeaderLayoutMap(col, row).headerType : table.getBodyColumnType(col, row)) ||
                 'text';
             if (isPromise$1(value)) {
-                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, isMerge, range, cellTheme));
+                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme));
                 columnGroup.updateColumnRowNumber(row);
-                const height = isMerge
-                    ? table.getRowHeight(row) / (range.end.row - range.start.row + 1)
-                    : table.getRowHeight(row);
+                const height = table.getRowHeight(row);
                 columnGroup.updateColumnHeight(height);
                 y += height;
             }
@@ -38827,7 +38836,7 @@
                         newHeights[row] = height;
                     }
                     else {
-                        table.setRowHeight(row, height);
+                        table._setRowHeight(row, height);
                     }
                 }
             }
@@ -38838,7 +38847,7 @@
                         newHeights[row] = height;
                     }
                     else {
-                        table.setRowHeight(row, height);
+                        table._setRowHeight(row, height);
                     }
                 }
             }
@@ -38855,7 +38864,7 @@
                             newHeights[row] = height;
                         }
                         else {
-                            table.setRowHeight(row, height);
+                            table._setRowHeight(row, height);
                         }
                     }
                 }
@@ -38873,7 +38882,7 @@
                             newHeights[row] = height;
                         }
                         else {
-                            table.setRowHeight(row, height);
+                            table._setRowHeight(row, height);
                         }
                     }
                 }
@@ -38884,7 +38893,7 @@
                             newHeights[row] = height;
                         }
                         else {
-                            table.setRowHeight(row, height);
+                            table._setRowHeight(row, height);
                         }
                     }
                 }
@@ -38926,7 +38935,7 @@
                     newHeights[row] = rowHeight;
                 }
                 else {
-                    table.setRowHeight(row, rowHeight, false);
+                    table._setRowHeight(row, rowHeight, false);
                 }
             }
         }
@@ -38945,11 +38954,28 @@
             if (actualHeight < canvasHeight && actualHeight - actualHeaderHeight > 0) {
                 const factor = (canvasHeight - actualHeaderHeight) / (actualHeight - actualHeaderHeight);
                 for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) {
+                    let rowHeight;
+                    if (row === table.rowCount - table.bottomFrozenRowCount - 1) {
+                        rowHeight =
+                            canvasHeight -
+                                actualHeaderHeight -
+                                (update
+                                    ? newHeights.reduce((acr, cur, index) => {
+                                        if (index >= table.frozenRowCount && index <= table.rowCount - table.bottomFrozenRowCount - 2) {
+                                            return acr + cur;
+                                        }
+                                        return acr;
+                                    }, 0)
+                                    : table.getRowsHeight(table.frozenRowCount, table.rowCount - table.bottomFrozenRowCount - 2));
+                    }
+                    else {
+                        rowHeight = Math.round((update ? newHeights[row] : table.getRowHeight(row)) * factor);
+                    }
                     if (update) {
-                        newHeights[row] = newHeights[row] * factor;
+                        newHeights[row] = rowHeight;
                     }
                     else {
-                        table.setRowHeight(row, table.getRowHeight(row) * factor);
+                        table._setRowHeight(row, rowHeight, false);
                     }
                 }
             }
@@ -39064,7 +39090,7 @@
                 newHeights[row] = height;
             }
             else {
-                table.setRowHeight(row, height);
+                table._setRowHeight(row, height);
             }
         }
     }
@@ -39250,7 +39276,7 @@
     }
 
     function updateRowHeight(scene, row, detaY) {
-        scene.table.setRowHeight(row, scene.table.getRowHeight(row) + detaY, true);
+        scene.table._setRowHeight(row, scene.table.getRowHeight(row) + detaY, true);
         for (let col = 0; col < scene.table.colCount; col++) {
             const cell = scene.getCell(col, row);
             const mergeInfo = getCellMergeInfo(scene.table, col, row);
@@ -39394,7 +39420,7 @@
     }
 
     function updateColWidth(scene, col, detaX) {
-        scene.table.setColWidth(col, scene.table.getColWidth(col) + detaX, true);
+        scene.table._setColWidth(col, scene.table.getColWidth(col) + detaX, true);
         const autoRowHeight = scene.table.heightMode === 'autoHeight';
         const colOrCornerHeaderColumn = scene.getColGroup(col, true);
         if (colOrCornerHeaderColumn) {
@@ -39412,9 +39438,13 @@
         if (bottomColumn) {
             updateColunmWidth(bottomColumn, detaX, autoRowHeight, 'bottom', scene);
         }
+        const rightTopColumn = scene.getColGroupInRightTopCorner(col);
+        if (rightTopColumn) {
+            updateColunmWidth(rightTopColumn, detaX, autoRowHeight, 'right-top', scene);
+        }
         const rightBottomColumn = scene.getColGroupInRightBottomCorner(col);
         if (rightBottomColumn) {
-            updateColunmWidth(bottomColumn, detaX, autoRowHeight, 'right-bottom', scene);
+            updateColunmWidth(rightBottomColumn, detaX, autoRowHeight, 'right-bottom', scene);
         }
         if (col < scene.frozenColCount) {
             scene.cornerHeaderGroup.forEachChildrenSkipChild((column, index) => {
@@ -39507,11 +39537,19 @@
                     colGroup = scene.getColGroupInLeftBottomCorner(col);
                     oldContainerHeight = scene.leftBottomCornerGroup.attribute.height ?? 0;
                 }
+                else if (mode === 'right-top') {
+                    row = 0;
+                    colGroup = scene.getColGroupInRightTopCorner(col);
+                    oldContainerHeight = scene.rightTopCornerGroup.attribute.height ?? 0;
+                }
                 else if (mode === 'right-bottom') {
                     row = scene.table.rowCount - scene.table.bottomFrozenRowCount;
                     colGroup = scene.getColGroupInRightBottomCorner(col);
                     oldContainerHeight = scene.rightBottomCornerGroup.attribute.height ?? 0;
                 }
+                if (!colGroup) {
+                    continue;
+                }
                 let y = 0;
                 colGroup.forEachChildren((cellGroup) => {
                     cellGroup.setAttribute('y', y);
@@ -39660,7 +39698,7 @@
     }
     function resetRowHeight(scene, row) {
         const maxHeight = computeRowHeight(row, 0, scene.table.colCount - 1, scene.table);
-        scene.table.setRowHeight(row, maxHeight, true);
+        scene.table._setRowHeight(row, maxHeight, true);
         for (let col = 0; col < scene.table.colCount; col++) {
             const distHeight = maxHeight;
             const cell = scene.highPerformanceGetCell(col, row);
@@ -40058,7 +40096,7 @@
             let symbolRotate = Math.PI;
             const linePoints = [];
             if (cellLocation === 'columnHeader') {
-                rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManeger.scroll.horizontalBarPos;
+                rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos;
                 rectY = this.table.getRowsHeight(0, this.table.frozenRowCount - 1);
                 rectHeight = this.table.tableNoFrameHeight;
                 if (mergeInfo) {
@@ -40074,7 +40112,7 @@
                 linePoints.push({ x: 0, y: this.table.tableNoFrameHeight });
             }
             else if (cellLocation === 'rowHeader') {
-                rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManeger.scroll.verticalBarPos;
+                rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos;
                 rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1);
                 rectWidth = this.table.tableNoFrameWidth;
                 if (mergeInfo) {
@@ -40119,13 +40157,13 @@
         }
         update(backX, lineX, backY, lineY) {
             if (typeof backX === 'number' && typeof lineX === 'number') {
-                this.columnMoverLabel.setAttribute('x', lineX - this.table.stateManeger.scroll.horizontalBarPos);
-                this.columnMoverLine.setAttribute('x', lineX - this.table.stateManeger.scroll.horizontalBarPos);
+                this.columnMoverLabel.setAttribute('x', lineX - this.table.stateManager.scroll.horizontalBarPos);
+                this.columnMoverLine.setAttribute('x', lineX - this.table.stateManager.scroll.horizontalBarPos);
                 this.columnMoverBack.setAttribute('x', backX);
             }
             else if (typeof backY === 'number' && typeof lineY === 'number') {
-                this.columnMoverLabel.setAttribute('y', lineY - this.table.stateManeger.scroll.verticalBarPos);
-                this.columnMoverLine.setAttribute('y', lineY - this.table.stateManeger.scroll.verticalBarPos);
+                this.columnMoverLabel.setAttribute('y', lineY - this.table.stateManager.scroll.verticalBarPos);
+                this.columnMoverLine.setAttribute('y', lineY - this.table.stateManager.scroll.verticalBarPos);
                 this.columnMoverBack.setAttribute('y', backY);
             }
         }
@@ -40304,8 +40342,8 @@
             this.vScrollBar.hideAll();
         }
         updateScrollBar() {
-            const oldHorizontalBarPos = this.table.stateManeger.scroll.horizontalBarPos;
-            const oldVerticalBarPos = this.table.stateManeger.scroll.verticalBarPos;
+            const oldHorizontalBarPos = this.table.stateManager.scroll.horizontalBarPos;
+            const oldVerticalBarPos = this.table.stateManager.scroll.verticalBarPos;
             const theme = this.table.theme;
             const width = theme.scrollStyle?.width;
             const visible = theme.scrollStyle?.visible;
@@ -40371,8 +40409,8 @@
                     visible: false
                 });
             }
-            this.table.stateManeger.setScrollLeft(oldHorizontalBarPos);
-            this.table.stateManeger.setScrollTop(oldVerticalBarPos);
+            this.table.stateManager.setScrollLeft(oldHorizontalBarPos);
+            this.table.stateManager.setScrollTop(oldVerticalBarPos);
         }
         hideResizeCol() {
             this.columnResizeLine.setAttribute('visible', false);
@@ -40685,16 +40723,10 @@
         }
         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
-                };
+                chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
             }
             else if (axis.type === 'band') {
-                const chartAxis = chartInstance._chart._components[index];
-                chartAxis._spec.domain = axis.domain.slice(0);
-                chartAxis.updateScaleDomain();
+                chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
             }
         });
         chartInstance.updateViewBox({
@@ -40924,7 +40956,7 @@
             isValid$6(cellGroup.mergeEndRow)) {
             for (let col = cellGroup.mergeStartCol; col <= cellGroup.mergeEndCol; col++) {
                 for (let row = cellGroup.mergeStartRow; row <= cellGroup.mergeEndRow; row++) {
-                    const key = isCellHover(table.stateManeger, col, row);
+                    const key = isCellHover(table.stateManager, col, row);
                     if (key && (!colorKey || key === 'cellBgColor')) {
                         colorKey = key;
                     }
@@ -40932,7 +40964,7 @@
             }
         }
         else if (cellGroup.role === 'cell') {
-            colorKey = isCellHover(table.stateManeger, cellGroup.col, cellGroup.row);
+            colorKey = isCellHover(table.stateManager, cellGroup.col, cellGroup.row);
         }
         if (!colorKey) {
             return undefined;
@@ -41310,7 +41342,7 @@
         drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke) {
             if (group.role === 'cell') {
                 const table = group.stage.table;
-                if (table.stateManeger.interactionState !== InteractionState.scrolling) {
+                if (table.stateManager.interactionState !== InteractionState.scrolling) {
                     const hoverColor = getCellHoverColor(group, table);
                     if (hoverColor) {
                         group.oldColor = group.attribute.fill;
@@ -41488,7 +41520,7 @@
                 newWidths[col] = maxWidth;
             }
             else {
-                table.setColWidth(col, maxWidth, false, true);
+                table._setColWidth(col, maxWidth, false, true);
             }
         }
         if (table.widthMode === 'adaptive') {
@@ -41524,7 +41556,7 @@
                     newWidths[col] = colWidth;
                 }
                 else {
-                    table.setColWidth(col, colWidth, false, true);
+                    table._setColWidth(col, colWidth, false, true);
                 }
             }
         }
@@ -41543,11 +41575,28 @@
             if (actualWidth < canvasWidth && actualWidth - actualHeaderWidth > 0) {
                 const factor = (canvasWidth - actualHeaderWidth) / (actualWidth - actualHeaderWidth);
                 for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
+                    let colWidth;
+                    if (col === table.colCount - table.rightFrozenColCount - 1) {
+                        colWidth =
+                            canvasWidth -
+                                actualHeaderWidth -
+                                (update
+                                    ? newWidths.reduce((acr, cur, index) => {
+                                        if (index >= table.frozenColCount && index <= table.colCount - table.rightFrozenColCount - 2) {
+                                            return acr + cur;
+                                        }
+                                        return acr;
+                                    }, 0)
+                                    : table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2));
+                    }
+                    else {
+                        colWidth = Math.round((update ? newWidths[col] : table.getColWidth(col)) * factor);
+                    }
                     if (update) {
-                        newWidths[col] = newWidths[col] * factor;
+                        newWidths[col] = colWidth;
                     }
                     else {
-                        table.setColWidth(col, table.getColWidth(col) * factor, false, true);
+                        table._setColWidth(col, colWidth, false, true);
                     }
                 }
             }
@@ -41856,11 +41905,13 @@
             y: table.getFrozenRowsHeight()
         });
         createColGroup(cornerHeaderGroup, xOrigin, yOrigin, 0, table.frozenColCount - 1, 0, table.columnHeaderLevelCount - 1, table.isListTable() ? 'columnHeader' : 'cornerHeader', table);
-        createColGroup(colHeaderGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, 0, table.columnHeaderLevelCount - 1, 'columnHeader', table);
+        distCol - table.rightFrozenColCount >= table.frozenColCount &&
+            createColGroup(colHeaderGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, 0, table.columnHeaderLevelCount - 1, 'columnHeader', table);
         createColGroup(rowHeaderGroup, xOrigin, yOrigin, 0, table.frozenColCount - 1, table.columnHeaderLevelCount, distRow - table.bottomFrozenRowCount, table.isListTable() && !table.internalProps.transpose ? 'body' : 'rowHeader', table);
         if (table.bottomFrozenRowCount > 0) {
             createColGroup(leftBottomCornerGroup, xOrigin, yOrigin, 0, table.frozenColCount - 1, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1, table.isListTable() ? 'body' : 'rowHeader', table);
-            createColGroup(bottomFrozenGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1, table.isPivotChart() ? 'rowHeader' : 'body', table);
+            distCol - table.rightFrozenColCount >= table.frozenColCount &&
+                createColGroup(bottomFrozenGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1, table.isPivotChart() ? 'rowHeader' : 'body', table);
         }
         if (table.rightFrozenColCount > 0) {
             createColGroup(rightTopCornerGroup, xOrigin, yOrigin, table.colCount - 1 - table.rightFrozenColCount + 1, table.colCount - 1, 0, table.columnHeaderLevelCount - 1, 'columnHeader', table);
@@ -41869,7 +41920,8 @@
         if (table.bottomFrozenRowCount > 0 && table.rightFrozenColCount > 0) {
             createColGroup(rightBottomCornerGroup, xOrigin, yOrigin, table.colCount - 1 - table.rightFrozenColCount + 1, table.colCount - 1, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1, 'body', table);
         }
-        createColGroup(bodyGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, table.columnHeaderLevelCount, distRow - table.bottomFrozenRowCount, 'body', table);
+        distCol - table.rightFrozenColCount >= table.frozenColCount &&
+            createColGroup(bodyGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, table.columnHeaderLevelCount, distRow - table.bottomFrozenRowCount, 'body', table);
         if (!bodyGroup.firstChild && !colHeaderGroup.firstChild) {
             proxy.currentRow = proxy.totalRow;
             proxy.rowEnd = proxy.currentRow;
@@ -42194,18 +42246,18 @@
     }
     function move(deltaRow, screenTopRow, screenTopY, y, proxy) {
         if (deltaRow > 0) {
-            moveCell(deltaRow, 'up', screenTopRow, screenTopY, proxy);
+            moveCell(deltaRow, 'up', screenTopRow, screenTopY, y, proxy);
             proxy.updateBody(y - proxy.deltaY);
         }
         else if (deltaRow < 0) {
-            moveCell(-deltaRow, 'down', screenTopRow, screenTopY, proxy);
+            moveCell(-deltaRow, 'down', screenTopRow, screenTopY, y, proxy);
             proxy.updateBody(y - proxy.deltaY);
         }
         else {
             proxy.updateBody(y - proxy.deltaY);
         }
     }
-    async function moveCell(count, direction, screenTopRow, screenTopY, proxy) {
+    async function moveCell(count, direction, screenTopRow, screenTopY, y, proxy) {
         if (direction === 'up' && proxy.rowEnd + count > proxy.bodyBottomRow) {
             count = proxy.bodyBottomRow - proxy.rowEnd;
         }
@@ -42280,7 +42332,22 @@
                 updateAutoRow(0, proxy.table.frozenColCount - 1, syncTopRow, syncBottomRow, proxy.table, distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
                 updateAutoRow(proxy.table.colCount - proxy.table.rightFrozenColCount, proxy.table.colCount - 1, syncTopRow, syncBottomRow, proxy.table, distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
             }
-            proxy.table.scenegraph.proxy.deltaY = 0;
+            if (syncTopRow === proxy.bodyTopRow) {
+                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, syncTopRow, true);
+                const delaY = cellGroup.attribute.y - y;
+                proxy.table.scenegraph.proxy.deltaY = delaY;
+            }
+            else if (syncBottomRow === proxy.bodyBottomRow) {
+                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, syncBottomRow, true);
+                const delaY = cellGroup.attribute.y +
+                    cellGroup.attribute.height -
+                    (proxy.table.tableNoFrameHeight - proxy.table.getFrozenRowsHeight()) -
+                    y;
+                proxy.table.scenegraph.proxy.deltaY = -delaY;
+            }
+            else {
+                proxy.table.scenegraph.proxy.deltaY = 0;
+            }
             proxy.currentRow = direction === 'up' ? proxy.currentRow + count : proxy.currentRow - count;
             proxy.totalRow = Math.max(0, Math.min(proxy.table.rowCount - 1, direction === 'up' ? proxy.totalRow + count : proxy.totalRow - count));
             proxy.referenceRow = proxy.rowStart + Math.floor((proxy.rowEnd - proxy.rowStart) / 2);
@@ -42875,13 +42942,27 @@
         const updateRowStart = Math.min(sourceRowStart, targetRowStart);
         const updateRowEnd = Math.max(sourceRowEnd, targetRowEnd);
         for (let col = updateColStart; col <= updateColEnd; col++) {
+            const columnWidth = table.getColWidth(col);
             const columnHeaderGroup = table.scenegraph.getColGroup(col, true);
             const columnGroup = table.scenegraph.getColGroup(col);
+            const columnBottomGroup = table.scenegraph.getColGroupInBottom(col);
             if (columnHeaderGroup) {
-                columnHeaderGroup.setAttribute('width', table.getColWidth(col));
+                columnHeaderGroup.setAttribute('width', columnWidth);
+                columnHeaderGroup.forEachChildren((child) => {
+                    child.setAttribute('width', columnWidth);
+                });
             }
             if (columnGroup) {
-                columnGroup.setAttribute('width', table.getColWidth(col));
+                columnGroup.setAttribute('width', columnWidth);
+                columnGroup.forEachChildren((child) => {
+                    child.setAttribute('width', columnWidth);
+                });
+            }
+            if (columnBottomGroup) {
+                columnBottomGroup.setAttribute('width', columnWidth);
+                columnBottomGroup.forEachChildren((child) => {
+                    child.setAttribute('width', columnWidth);
+                });
             }
         }
         scene.updateContainer();
@@ -44852,6 +44933,10 @@
             }
             this.proxy?.release();
         }
+        updateStageBackground() {
+            this.stage.background = this.table.theme.underlayBackgroundColor;
+            this.stage.renderNextFrame();
+        }
         createComponent() {
             this.component = new TableComponent(this.table);
             this.component.addToGroup(this.componentGroup);
@@ -44970,7 +45055,7 @@
             this.stage.renderNextFrame();
         }
         resetAllSelectComponent() {
-            if (this.table.stateManeger.select?.ranges?.length > 0) {
+            if (this.table.stateManager.select?.ranges?.length > 0) {
                 updateAllSelectComponent(this);
             }
         }
@@ -45158,8 +45243,8 @@
                 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.rightBottomCornerGroup.attribute.width),
-                height: Math.min(this.table.tableNoFrameHeight, (this.colHeaderGroup.attribute.height ?? 0) +
-                    (this.bodyGroup.attribute.height ?? 0) +
+                height: Math.min(this.table.tableNoFrameHeight, Math.max(this.colHeaderGroup.attribute.height, this.cornerHeaderGroup.attribute.height, 0) +
+                    Math.max(this.rowHeaderGroup.attribute.height, this.bodyGroup.attribute.height, 0) +
                     this.bottomFrozenGroup.attribute.height)
             });
             if (this.tableGroup.border) {
@@ -45287,7 +45372,7 @@
             if (!this.isPivot && !this.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
-            this.table.stateManeger.checkFrozen();
+            this.table.stateManager.checkFrozen();
             this.updateContainer();
             this.createFrameBorder();
             this.updateBorderSizeAndPosition();
@@ -45330,7 +45415,17 @@
                 if (actualWidth < canvasWidth && actualWidth - actualHeaderWidth > 0) {
                     const factor = (canvasWidth - actualHeaderWidth) / (actualWidth - actualHeaderWidth);
                     for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
-                        this.setColWidth(col, table.getColWidth(col) * factor);
+                        let colWidth;
+                        if (col === table.colCount - table.rightFrozenColCount - 1) {
+                            colWidth =
+                                canvasWidth -
+                                    actualHeaderWidth -
+                                    table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2);
+                        }
+                        else {
+                            colWidth = Math.round(table.getColWidth(col) * factor);
+                        }
+                        this.setColWidth(col, colWidth);
                     }
                 }
             }
@@ -45398,7 +45493,17 @@
                 if (actualHeight < canvasHeight && actualHeight - actualHeaderHeight > 0) {
                     const factor = (canvasHeight - actualHeaderHeight) / (actualHeight - actualHeaderHeight);
                     for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) {
-                        this.setRowHeight(row, table.getRowHeight(row) * factor);
+                        let rowHeight;
+                        if (row === table.rowCount - table.bottomFrozenRowCount - 1) {
+                            rowHeight =
+                                canvasHeight -
+                                    actualHeaderHeight -
+                                    table.getRowsHeight(table.frozenRowCount, table.rowCount - table.bottomFrozenRowCount - 2);
+                        }
+                        else {
+                            rowHeight = Math.round(table.getRowHeight(row) * factor);
+                        }
+                        this.setRowHeight(row, rowHeight);
                     }
                 }
             }
@@ -45493,11 +45598,11 @@
         updateContainer() {
             this.updateContainerAttrWidthAndX();
             this.updateTableSize();
-            const oldHorizontalBarPos = this.table.stateManeger.scroll.horizontalBarPos;
-            const oldVerticalBarPos = this.table.stateManeger.scroll.verticalBarPos;
+            const oldHorizontalBarPos = this.table.stateManager.scroll.horizontalBarPos;
+            const oldVerticalBarPos = this.table.stateManager.scroll.verticalBarPos;
             this.component.updateScrollBar();
-            this.table.stateManeger.setScrollLeft(oldHorizontalBarPos);
-            this.table.stateManeger.setScrollTop(oldVerticalBarPos);
+            this.table.stateManager.setScrollLeft(oldHorizontalBarPos);
+            this.table.stateManager.setScrollTop(oldVerticalBarPos);
             this.updateNextFrame();
         }
         updateCellContentWhileResize(col, row) {
@@ -45644,7 +45749,7 @@
             updateRow(removeCells, addCells, updateCells, this.table);
             this.recalculateColWidths();
             this.recalculateRowHeights();
-            this.table.stateManeger.checkFrozen();
+            this.table.stateManager.checkFrozen();
             if (!this.isPivot && !this.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
@@ -45912,13 +46017,13 @@
             return;
         }
         table.internalProps.sortState = tableState;
-        table.stateManeger.setSortState(tableState);
+        table.stateManager.setSortState(tableState);
         if (headerC?.sort) {
             executeSort(tableState, table, headerC);
         }
         table.internalProps.layoutMap.clearCellRangeMap();
         table.scenegraph.sortCell();
-        table.stateManeger.updateSelectPos(-1, -1);
+        table.stateManager.updateSelectPos(-1, -1);
     }
     function executeSort(newState, table, headerDefine) {
         let hd;
@@ -45954,9 +46059,6 @@
             col = -1;
             row = -1;
         }
-        if (cellPos.col === col && cellPos.row === row) {
-            return;
-        }
         if (col !== -1 && row !== -1 && state.select.ranges.length > 0) {
             if (interactionState === InteractionState.grabing) {
                 const currentRange = state.select.ranges[state.select.ranges.length - 1];
@@ -46267,7 +46369,7 @@
         const cellLocation = state.table.getCellLocation(col, row);
         const delta = cellLocation === 'columnHeader' ? state.columnMove.x : cellLocation === 'rowHeader' ? state.columnMove.y : 0;
         state.table.scenegraph.component.showMoveCol(col, row, delta);
-        state.table.stateManeger.updateSelectPos(-1, -1);
+        state.table.stateManager.updateSelectPos(-1, -1);
         state.table.scenegraph.updateNextFrame();
     }
     function updateMoveCol(col, row, x, y, state) {
@@ -46537,7 +46639,7 @@
         }
     }
 
-    class StateManeger {
+    class StateManager {
         table;
         interactionState;
         select;
@@ -46823,7 +46925,7 @@
             this.columnResize.x = x;
             this.columnResize.isRightFrozen = isRightFrozen;
             this.table.scenegraph.component.showResizeCol(col, y, isRightFrozen);
-            this.table.stateManeger.updateSelectPos(-1, -1);
+            this.table.stateManager.updateSelectPos(-1, -1);
             this.table.scenegraph.updateNextFrame();
         }
         updateResizeCol(xInTable, yInTable) {
@@ -46873,7 +46975,7 @@
             const totalHeight = this.table.getAllRowsHeight();
             this.scroll.verticalBarPos = Math.ceil(yRatio * (totalHeight - this.table.scenegraph.height));
             this.table.scenegraph.setY(-this.scroll.verticalBarPos);
-            this.table.stateManeger.updateHoverPos(-1, -1);
+            this.table.stateManager.updateHoverPos(-1, -1);
             this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                 scrollTop: this.scroll.verticalBarPos,
                 scrollLeft: this.scroll.horizontalBarPos,
@@ -46889,7 +46991,7 @@
             const totalWidth = this.table.getAllColsWidth();
             this.scroll.horizontalBarPos = Math.ceil(xRatio * (totalWidth - this.table.scenegraph.width));
             this.table.scenegraph.setX(-this.scroll.horizontalBarPos);
-            this.table.stateManeger.updateHoverPos(-1, -1);
+            this.table.stateManager.updateHoverPos(-1, -1);
             this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                 scrollTop: this.scroll.verticalBarPos,
                 scrollLeft: this.scroll.horizontalBarPos,
@@ -46909,7 +47011,7 @@
             this.table.scenegraph.setY(-top);
             const yRatio = top / (totalHeight - this.table.scenegraph.height);
             this.table.scenegraph.component.updateVerticalScrollBarPos(yRatio);
-            this.table.stateManeger.updateHoverPos(-1, -1);
+            this.table.stateManager.updateHoverPos(-1, -1);
             this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                 scrollTop: this.scroll.verticalBarPos,
                 scrollLeft: this.scroll.horizontalBarPos,
@@ -46930,7 +47032,7 @@
             this.table.scenegraph.setX(-left);
             const xRatio = left / (totalWidth - this.table.scenegraph.width);
             this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
-            this.table.stateManeger.updateHoverPos(-1, -1);
+            this.table.stateManager.updateHoverPos(-1, -1);
             this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                 scrollTop: this.scroll.verticalBarPos,
                 scrollLeft: this.scroll.horizontalBarPos,
@@ -47431,18 +47533,18 @@
             }
             const dimension = table.internalProps.layoutMap.getHeaderDimension(col, row);
             if (dimension?.drillDown || dimension?.drillUp) {
-                table.stateManeger.updateDrillState(dimension.dimensionKey, dimension.title, dimension.drillDown, dimension.drillUp, col, row);
+                table.stateManager.updateDrillState(dimension.dimensionKey, dimension.title, dimension.drillDown, dimension.drillUp, col, row);
             }
             else {
-                table.stateManeger.updateDrillState(undefined, undefined, false, false, -1, -1);
+                table.stateManager.updateDrillState(undefined, undefined, false, false, -1, -1);
             }
         });
         table.on(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e) => {
-            table.stateManeger.updateDrillState(undefined, undefined, false, false, -1, -1);
+            table.stateManager.updateDrillState(undefined, undefined, false, false, -1, -1);
         });
     }
     function drillClick(table) {
-        table.fireListeners(PIVOT_TABLE_EVENT_TYPE.DRILLMENU_CLICK, table.stateManeger.drill);
+        table.fireListeners(PIVOT_TABLE_EVENT_TYPE.DRILLMENU_CLICK, table.stateManager.drill);
     }
     function checkHaveDrill(table) {
         const rowsDefine = table.internalProps.layoutMap.rowsDefine;
@@ -47483,12 +47585,12 @@
             const { col, row, x, y } = e;
             const type = table.getBodyColumnType(col, row);
             if (type !== 'sparkline') {
-                table.stateManeger.updateSparklineHoverPose(-1, -1, 0, 0);
+                table.stateManager.updateSparklineHoverPose(-1, -1, 0, 0);
             }
-            table.stateManeger.updateSparklineHoverPose(col, row, x, y);
+            table.stateManager.updateSparklineHoverPose(col, row, x, y);
         });
         table.on(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e) => {
-            table.stateManeger.updateSparklineHoverPose(-1, -1, 0, 0);
+            table.stateManager.updateSparklineHoverPose(-1, -1, 0, 0);
         });
     }
 
@@ -47525,9 +47627,9 @@
     let LastBodyPointerXY;
     let isDown = false;
     let isDraging = false;
-    function bindTableGroupListener(eventManeger) {
-        const table = eventManeger.table;
-        const stateManeger = table.stateManeger;
+    function bindTableGroupListener(eventManager) {
+        const table = eventManager.table;
+        const stateManager = table.stateManager;
         document.body.addEventListener('pointerdown', e => {
             LastBodyPointerXY = { x: e.x, y: e.y };
             isDown = true;
@@ -47546,16 +47648,16 @@
                 }
             }
             const { x, y } = table._getMouseAbstractPoint(e, false);
-            if (stateManeger.interactionState === InteractionState.scrolling) {
+            if (stateManager.interactionState === InteractionState.scrolling) {
                 return;
             }
-            if (stateManeger.interactionState === InteractionState.grabing) {
-                if (stateManeger.isResizeCol()) {
-                    eventManeger.dealColumnResize(x, y);
+            if (stateManager.interactionState === InteractionState.grabing) {
+                if (stateManager.isResizeCol()) {
+                    eventManager.dealColumnResize(x, y);
                     if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
                         table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN, {
-                            col: table.stateManeger.columnResize.col,
-                            colWidth: table.getColWidth(table.stateManeger.columnResize.col)
+                            col: table.stateManager.columnResize.col,
+                            colWidth: table.getColWidth(table.stateManager.columnResize.col)
                         });
                     }
                 }
@@ -47565,43 +47667,43 @@
             const lastX = LastPointerXY?.x ?? e.x;
             const lastY = LastPointerXY?.y ?? e.y;
             LastPointerXY = { x: e.x, y: e.y };
-            if (eventManeger.touchSetTimeout) {
-                clearTimeout(eventManeger.touchSetTimeout);
-                eventManeger.touchSetTimeout = undefined;
+            if (eventManager.touchSetTimeout) {
+                clearTimeout(eventManager.touchSetTimeout);
+                eventManager.touchSetTimeout = undefined;
             }
             const eventArgsSet = getCellEventArgsSet(e);
-            if (stateManeger.interactionState === InteractionState.scrolling) {
+            if (stateManager.interactionState === InteractionState.scrolling) {
                 return;
             }
-            if (stateManeger.interactionState === InteractionState.grabing &&
+            if (stateManager.interactionState === InteractionState.grabing &&
                 Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1) {
-                if (stateManeger.isResizeCol()) ;
-                else if (stateManeger.isMoveCol()) {
-                    eventManeger.dealColumnMover(eventArgsSet);
+                if (stateManager.isResizeCol()) ;
+                else if (stateManager.isMoveCol()) {
+                    eventManager.dealColumnMover(eventArgsSet);
                 }
                 else {
-                    eventManeger.dealTableSelect(eventArgsSet, true);
+                    eventManager.dealTableSelect(eventArgsSet, true);
                 }
                 return;
             }
-            if (stateManeger.isResizeCol() || eventManeger.checkColumnResize(eventArgsSet)) {
-                stateManeger.updateCursor('col-resize');
+            if (stateManager.isResizeCol() || eventManager.checkColumnResize(eventArgsSet)) {
+                stateManager.updateCursor('col-resize');
             }
             else {
-                stateManeger.updateCursor();
+                stateManager.updateCursor();
             }
             const cellGoup = e.path.find(node => node.role === 'cell');
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL)) {
                 if (cellGoup?.role === 'cell' &&
-                    table.stateManeger.hover.cellPos.col !== -1 &&
-                    table.stateManeger.hover.cellPos.row !== -1 &&
-                    (cellGoup.col !== table.stateManeger.hover.cellPos.col || cellGoup.row !== table.stateManeger.hover.cellPos.row)) {
+                    table.stateManager.hover.cellPos.col !== -1 &&
+                    table.stateManager.hover.cellPos.row !== -1 &&
+                    (cellGoup.col !== table.stateManager.hover.cellPos.col || cellGoup.row !== table.stateManager.hover.cellPos.row)) {
                     table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, {
-                        col: table.stateManeger.hover.cellPos.col,
-                        row: table.stateManeger.hover.cellPos.row,
+                        col: table.stateManager.hover.cellPos.col,
+                        row: table.stateManager.hover.cellPos.row,
                         cellRange: table.getCellRangeRelativeRect({
-                            col: table.stateManeger.hover.cellPos.col,
-                            row: table.stateManeger.hover.cellPos.row
+                            col: table.stateManager.hover.cellPos.col,
+                            row: table.stateManager.hover.cellPos.row
                         }),
                         scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
                         event: e.nativeEvent,
@@ -47613,7 +47715,7 @@
                 if (cellGoup?.role === 'cell' &&
                     isValid$6(cellGoup.col) &&
                     isValid$6(cellGoup.row) &&
-                    (cellGoup.col !== table.stateManeger.hover.cellPos.col || cellGoup.row !== table.stateManeger.hover.cellPos.row)) {
+                    (cellGoup.col !== table.stateManager.hover.cellPos.col || cellGoup.row !== table.stateManager.hover.cellPos.row)) {
                     table.fireListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL, {
                         col: cellGoup.col,
                         row: cellGoup.row,
@@ -47627,8 +47729,8 @@
                     });
                 }
             }
-            eventManeger.dealIconHover(eventArgsSet);
-            eventManeger.dealTableHover(eventArgsSet);
+            eventManager.dealIconHover(eventArgsSet);
+            eventManager.dealTableHover(eventArgsSet);
             if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.MOUSEMOVE_CELL)) {
                 let icon;
                 let position;
@@ -47660,7 +47762,7 @@
             const eventArgsSet = getCellEventArgsSet(e);
             const cellGoup = eventArgsSet?.eventArgs?.target;
             if (cellGoup?.role === 'table') {
-                eventManeger.dealTableHover();
+                eventManager.dealTableHover();
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerover', (e) => {
@@ -47693,11 +47795,11 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerleave', (e) => {
-            if (!stateManeger.isResizeCol() && !stateManeger.isMoveCol() && !stateManeger.isSelecting()) {
-                stateManeger.updateInteractionState(InteractionState.default);
-                stateManeger.updateCursor();
+            if (!stateManager.isResizeCol() && !stateManager.isMoveCol() && !stateManager.isSelecting()) {
+                stateManager.updateInteractionState(InteractionState.default);
+                stateManager.updateCursor();
             }
-            eventManeger.dealTableHover();
+            eventManager.dealTableHover();
             const target = e.target;
             if (target && !target.isDescendantsOf(table.scenegraph.tableGroup)) {
                 table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, {
@@ -47709,31 +47811,31 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerupoutside', (e) => {
-            if (stateManeger.isResizeCol()) {
+            if (stateManager.isResizeCol()) {
                 endResizeCol(table);
             }
-            else if (stateManeger.isMoveCol()) {
-                table.stateManeger.endMoveCol();
-                if (table.stateManeger.columnMove?.colSource !== -1 &&
-                    table.stateManeger.columnMove?.rowSource !== -1 &&
-                    table.stateManeger.columnMove?.colTarget !== -1 &&
-                    table.stateManeger.columnMove?.rowTarget !== -1) {
+            else if (stateManager.isMoveCol()) {
+                table.stateManager.endMoveCol();
+                if (table.stateManager.columnMove?.colSource !== -1 &&
+                    table.stateManager.columnMove?.rowSource !== -1 &&
+                    table.stateManager.columnMove?.colTarget !== -1 &&
+                    table.stateManager.columnMove?.rowTarget !== -1) {
                     if (table.hasListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION)) {
                         table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION, {
-                            target: { col: table.stateManeger.columnMove.colTarget, row: table.stateManeger.columnMove.rowTarget },
+                            target: { col: table.stateManager.columnMove.colTarget, row: table.stateManager.columnMove.rowTarget },
                             source: {
-                                col: table.stateManeger.columnMove.colSource,
-                                row: table.stateManeger.columnMove.rowSource
+                                col: table.stateManager.columnMove.colSource,
+                                row: table.stateManager.columnMove.rowSource
                             }
                         });
                     }
                 }
             }
-            else if (stateManeger.isSelecting()) {
-                if (table.stateManeger.select?.ranges?.length) {
-                    const lastCol = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.col;
-                    const lastRow = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.row;
-                    table.stateManeger.endSelectCells();
+            else if (stateManager.isSelecting()) {
+                if (table.stateManager.select?.ranges?.length) {
+                    const lastCol = table.stateManager.select.ranges[table.stateManager.select.ranges.length - 1].end.col;
+                    const lastRow = table.stateManager.select.ranges[table.stateManager.select.ranges.length - 1].end.row;
+                    table.stateManager.endSelectCells();
                     if (table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
                         const cellsEvent = {
                             event: e.nativeEvent,
@@ -47748,8 +47850,8 @@
                     }
                 }
             }
-            stateManeger.updateInteractionState(InteractionState.default);
-            eventManeger.dealTableHover();
+            stateManager.updateInteractionState(InteractionState.default);
+            eventManager.dealTableHover();
         });
         table.scenegraph.tableGroup.addEventListener('pointerdown', (e) => {
             LastPointerXY = { x: e.x, y: e.y };
@@ -47757,52 +47859,52 @@
                 return;
             }
             const eventArgsSet = getCellEventArgsSet(e);
-            if (stateManeger.interactionState !== InteractionState.default) {
+            if (stateManager.interactionState !== InteractionState.default) {
                 return;
             }
             if (table.isPivotChart() && eventArgsSet?.eventArgs?.target.type !== 'chart') {
                 table.scenegraph.updateChartState(null);
             }
-            if (stateManeger.menu.isShow &&
+            if (stateManager.menu.isShow &&
                 eventArgsSet.eventArgs &&
-                eventArgsSet.eventArgs.target !== stateManeger.residentHoverIcon?.icon) {
-                stateManeger.hideMenu();
+                eventArgsSet.eventArgs.target !== stateManager.residentHoverIcon?.icon) {
+                stateManager.hideMenu();
             }
             const hitIcon = eventArgsSet?.eventArgs?.target?.role?.startsWith('icon')
                 ? eventArgsSet.eventArgs.target
                 : undefined;
             if (!hitIcon || hitIcon.attribute.interactive === false) {
                 if (e.pointerType === 'touch') {
-                    eventManeger.touchEnd = false;
-                    eventManeger.touchSetTimeout = setTimeout(() => {
-                        eventManeger.isTouchdown = false;
-                        eventManeger.touchMove = true;
-                        if (!eventManeger.touchEnd && eventManeger.checkColumnResize(eventArgsSet, true)) {
-                            stateManeger.updateInteractionState(InteractionState.grabing);
+                    eventManager.touchEnd = false;
+                    eventManager.touchSetTimeout = setTimeout(() => {
+                        eventManager.isTouchdown = false;
+                        eventManager.touchMove = true;
+                        if (!eventManager.touchEnd && eventManager.checkColumnResize(eventArgsSet, true)) {
+                            stateManager.updateInteractionState(InteractionState.grabing);
                             return;
                         }
-                        if (!eventManeger.touchEnd && eventManeger.chechColumnMover(eventArgsSet)) {
-                            stateManeger.updateInteractionState(InteractionState.grabing);
+                        if (!eventManager.touchEnd && eventManager.chechColumnMover(eventArgsSet)) {
+                            stateManager.updateInteractionState(InteractionState.grabing);
                             return;
                         }
-                        if (eventManeger.dealTableSelect(eventArgsSet) && !eventManeger.touchEnd) {
-                            stateManeger.updateInteractionState(InteractionState.grabing);
+                        if (eventManager.dealTableSelect(eventArgsSet) && !eventManager.touchEnd) {
+                            stateManager.updateInteractionState(InteractionState.grabing);
                         }
                     }, 500);
-                    eventManeger.dealTableHover(eventArgsSet);
+                    eventManager.dealTableHover(eventArgsSet);
                 }
                 else {
-                    if (eventManeger.checkColumnResize(eventArgsSet, true)) {
+                    if (eventManager.checkColumnResize(eventArgsSet, true)) {
                         table.scenegraph.updateChartState(null);
-                        stateManeger.updateInteractionState(InteractionState.grabing);
+                        stateManager.updateInteractionState(InteractionState.grabing);
                         return;
                     }
-                    if (eventManeger.chechColumnMover(eventArgsSet)) {
-                        stateManeger.updateInteractionState(InteractionState.grabing);
+                    if (eventManager.chechColumnMover(eventArgsSet)) {
+                        stateManager.updateInteractionState(InteractionState.grabing);
                         return;
                     }
-                    if (eventManeger.dealTableSelect(eventArgsSet)) {
-                        stateManeger.updateInteractionState(InteractionState.grabing);
+                    if (eventManager.dealTableSelect(eventArgsSet)) {
+                        stateManager.updateInteractionState(InteractionState.grabing);
                     }
                 }
             }
@@ -47822,26 +47924,26 @@
             if (e.button !== 0) {
                 return;
             }
-            if (stateManeger.interactionState === 'grabing') {
-                stateManeger.updateInteractionState(InteractionState.default);
-                if (stateManeger.isResizeCol()) {
+            if (stateManager.interactionState === 'grabing') {
+                stateManager.updateInteractionState(InteractionState.default);
+                if (stateManager.isResizeCol()) {
                     endResizeCol(table);
                 }
-                else if (stateManeger.isMoveCol()) {
+                else if (stateManager.isMoveCol()) {
                     const eventArgsSet = getCellEventArgsSet(e);
-                    table.stateManeger.endMoveCol();
+                    table.stateManager.endMoveCol();
                     if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION)) {
                         table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION, {
                             target: { col: eventArgsSet.eventArgs.col, row: eventArgsSet.eventArgs.row },
                             source: {
-                                col: table.stateManeger.columnMove.colSource,
-                                row: table.stateManeger.columnMove.colSource
+                                col: table.stateManager.columnMove.colSource,
+                                row: table.stateManager.columnMove.colSource
                             }
                         });
                     }
                 }
-                else if (stateManeger.isSelecting()) {
-                    table.stateManeger.endSelectCells();
+                else if (stateManager.isSelecting()) {
+                    table.stateManager.endSelectCells();
                     const eventArgsSet = getCellEventArgsSet(e);
                     if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
                         const cellsEvent = {
@@ -47857,8 +47959,8 @@
                     }
                 }
             }
-            else if (stateManeger.interactionState === InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.default);
+            else if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
             }
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEUP_CELL)) {
                 const eventArgsSet = getCellEventArgsSet(e);
@@ -47875,7 +47977,7 @@
         table.scenegraph.tableGroup.addEventListener('rightdown', (e) => {
             const eventArgsSet = getCellEventArgsSet(e);
             if (eventArgsSet.eventArgs) {
-                stateManeger.triggerContextMenu(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                stateManager.triggerContextMenu(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
                 const { col, row } = eventArgsSet.eventArgs;
                 if (table.hasListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL)) {
                     const cellInfo = table.getCellInfo(col, row);
@@ -47901,7 +48003,7 @@
                             : undefined,
                         target: eventArgsSet?.eventArgs?.target
                     };
-                    if (cellInRanges(table.stateManeger.select.ranges, col, row)) {
+                    if (cellInRanges(table.stateManager.select.ranges, col, row)) {
                         cellsEvent.cells = table.getSelectedCellInfos();
                     }
                     else {
@@ -47912,22 +48014,22 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointertap', (e) => {
-            if (table.stateManeger.columnResize.resizing || table.stateManeger.columnMove.moving) {
+            if (table.stateManager.columnResize.resizing || table.stateManager.columnMove.moving) {
                 return;
             }
             const eventArgsSet = getCellEventArgsSet(e);
-            eventManeger.dealIconClick(e, eventArgsSet);
+            eventManager.dealIconClick(e, eventArgsSet);
             if (!eventArgsSet?.eventArgs) {
                 return;
             }
-            if (eventManeger.touchSetTimeout || e.pointerType !== 'touch') {
+            if (eventManager.touchSetTimeout || e.pointerType !== 'touch') {
                 if (e.pointerType === 'touch') {
                     const eventArgsSet = getCellEventArgsSet(e);
-                    if (eventManeger.touchSetTimeout) {
-                        clearTimeout(eventManeger.touchSetTimeout);
-                        eventManeger.dealTableSelect(eventArgsSet);
-                        stateManeger.endSelectCells();
-                        eventManeger.touchSetTimeout = undefined;
+                    if (eventManager.touchSetTimeout) {
+                        clearTimeout(eventManager.touchSetTimeout);
+                        eventManager.dealTableSelect(eventArgsSet);
+                        stateManager.endSelectCells();
+                        eventManager.touchSetTimeout = undefined;
                     }
                 }
                 if (table.hasListeners(TABLE_EVENT_TYPE.CLICK_CELL)) {
@@ -47965,20 +48067,36 @@
             if (!isDraging &&
                 target &&
                 !target.isDescendantsOf(table.scenegraph.tableGroup)) {
-                stateManeger.updateInteractionState(InteractionState.default);
-                eventManeger.dealTableHover();
-                eventManeger.dealTableSelect();
-                stateManeger.updateCursor();
+                stateManager.updateInteractionState(InteractionState.default);
+                eventManager.dealTableHover();
+                eventManager.dealTableSelect();
+                stateManager.updateCursor();
                 table.scenegraph.updateChartState(null);
             }
             else if (isDraging) {
-                stateManeger.endSelectCells();
+                stateManager.endSelectCells();
             }
         });
         table.scenegraph.tableGroup.addEventListener('checkbox_state_change', (e) => {
             const eventArgsSet = getCellEventArgsSet(e);
             const { col, row } = eventArgsSet.eventArgs;
             const cellInfo = table.getCellInfo(col, row);
+            const mergeRange = getCellMergeInfo(table, col, row);
+            if (mergeRange) {
+                for (let col = mergeRange.start.col; col <= mergeRange.end.col; col++) {
+                    for (let row = mergeRange.start.row; row <= mergeRange.end.row; row++) {
+                        const cellGroup = table.scenegraph.getCell(col, row);
+                        cellGroup.forEachChildren((checkbox) => {
+                            if (checkbox.name === 'checkbox') {
+                                checkbox.setAttributes({
+                                    checked: e.target.attribute.checked,
+                                    indeterminate: e.target.attribute.indeterminate
+                                });
+                            }
+                        });
+                    }
+                }
+            }
             const cellsEvent = {
                 ...cellInfo,
                 event: e.nativeEvent,
@@ -47986,18 +48104,18 @@
                 checked: e.detail.checked
             };
             if (table.isHeader(col, row)) {
-                table.stateManeger.setHeaderCheckedState(cellInfo.field, e.detail.checked);
+                table.stateManager.setHeaderCheckedState(cellInfo.field, e.detail.checked);
                 const define = table.getBodyColumnDefine(col, row);
                 if (define.cellType === 'checkbox') {
                     table.scenegraph.updateCheckboxCellState(col, row, e.detail.checked);
                 }
             }
             else {
-                table.stateManeger.setCheckedState(col, row, cellInfo.field, e.detail.checked);
+                table.stateManager.setCheckedState(col, row, cellInfo.field, e.detail.checked);
                 const define = table.getBodyColumnDefine(col, row);
                 if (define.headerType === 'checkbox') {
-                    const oldHeaderCheckedState = table.stateManeger.headerCheckedState[cellInfo.field];
-                    const newHeaderCheckedState = table.stateManeger.updateHeaderCheckedState(cellInfo.field);
+                    const oldHeaderCheckedState = table.stateManager.headerCheckedState[cellInfo.field];
+                    const newHeaderCheckedState = table.stateManager.updateHeaderCheckedState(cellInfo.field);
                     if (oldHeaderCheckedState !== newHeaderCheckedState) {
                         table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState);
                     }
@@ -48006,26 +48124,26 @@
             table.fireListeners(TABLE_EVENT_TYPE.CHECKBOX_STATE_CHANGE, cellsEvent);
         });
     }
-    function bindGesture(eventManeger) {
-        const table = eventManeger.table;
-        eventManeger.gesture = new Gesture(table.scenegraph.stage, {
+    function bindGesture(eventManager) {
+        const table = eventManager.table;
+        eventManager.gesture = new Gesture(table.scenegraph.stage, {
             tap: {
                 interval: 300
             }
         });
-        eventManeger.gesture.on('doubletap', e => {
+        eventManager.gesture.on('doubletap', e => {
             dblclickHandler(e, table);
         });
     }
     function endResizeCol(table) {
-        table.stateManeger.endResizeCol();
+        table.stateManager.endResizeCol();
         if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
             const columns = [];
             for (let col = 0; col < table.colCount; col++) {
                 columns.push(table.getColWidth(col));
             }
             table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
-                col: table.stateManeger.columnResize.col,
+                col: table.stateManager.columnResize.col,
                 columns
             });
         }
@@ -48065,76 +48183,76 @@
         }
     }
 
-    function bindScrollBarListener(eventManeger) {
-        const table = eventManeger.table;
-        const stateManeger = table.stateManeger;
+    function bindScrollBarListener(eventManager) {
+        const table = eventManager.table;
+        const stateManager = table.stateManager;
         const scenegraph = table.scenegraph;
         scenegraph.component.vScrollBar.addEventListener('pointerover', (e) => {
-            stateManeger.showVerticalScrollBar();
+            stateManager.showVerticalScrollBar();
         });
         scenegraph.component.hScrollBar.addEventListener('pointerover', (e) => {
-            stateManeger.showHorizontalScrollBar();
+            stateManager.showHorizontalScrollBar();
         });
         scenegraph.component.vScrollBar.addEventListener('pointerout', (e) => {
-            if (stateManeger.interactionState === InteractionState.scrolling) {
+            if (stateManager.interactionState === InteractionState.scrolling) {
                 return;
             }
-            stateManeger.hideVerticalScrollBar();
+            stateManager.hideVerticalScrollBar();
         });
         scenegraph.component.hScrollBar.addEventListener('pointerout', (e) => {
-            if (stateManeger.interactionState === InteractionState.scrolling) {
+            if (stateManager.interactionState === InteractionState.scrolling) {
                 return;
             }
-            stateManeger.hideHorizontalScrollBar();
+            stateManager.hideHorizontalScrollBar();
         });
         scenegraph.component.vScrollBar._slider.addEventListener('pointerdown', () => {
-            if (stateManeger.interactionState !== InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.scrolling);
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.scrolling);
             }
         });
         scenegraph.component.vScrollBar.addEventListener('pointerup', () => {
-            stateManeger.fastScrolling = false;
-            if (stateManeger.interactionState === InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.default);
+            stateManager.fastScrolling = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
             }
         });
         scenegraph.component.vScrollBar.addEventListener('pointerupoutside', () => {
-            stateManeger.fastScrolling = false;
-            if (stateManeger.interactionState === InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.default);
+            stateManager.fastScrolling = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
             }
         });
         scenegraph.component.hScrollBar._slider.addEventListener('pointerdown', () => {
-            if (stateManeger.interactionState !== InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.scrolling);
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.scrolling);
             }
         });
         scenegraph.component.hScrollBar.addEventListener('pointerup', () => {
-            stateManeger.fastScrolling = false;
-            if (stateManeger.interactionState === InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.default);
+            stateManager.fastScrolling = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
             }
         });
         scenegraph.component.hScrollBar.addEventListener('pointerupoutside', () => {
-            stateManeger.fastScrolling = false;
-            if (stateManeger.interactionState === InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.default);
+            stateManager.fastScrolling = false;
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.default);
             }
         });
-        const throttleVerticalWheel = throttle(stateManeger.updateVerticalScrollBar, 20);
-        const throttleHorizontalWheel = throttle(stateManeger.updateHorizontalScrollBar, 20);
+        const throttleVerticalWheel = throttle(stateManager.updateVerticalScrollBar, 20);
+        const throttleHorizontalWheel = throttle(stateManager.updateHorizontalScrollBar, 20);
         scenegraph.component.vScrollBar.addEventListener('scroll', (e) => {
-            stateManeger.fastScrolling = true;
-            if (stateManeger.interactionState !== InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.scrolling);
+            stateManager.fastScrolling = true;
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.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) => {
-            stateManeger.fastScrolling = true;
-            if (stateManeger.interactionState !== InteractionState.scrolling) {
-                stateManeger.updateInteractionState(InteractionState.scrolling);
+            stateManager.fastScrolling = true;
+            if (stateManager.interactionState !== InteractionState.scrolling) {
+                stateManager.updateInteractionState(InteractionState.scrolling);
             }
             const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
             throttleHorizontalWheel(ratio);
@@ -48207,21 +48325,21 @@
         return totalWidth !== 0 && deltaX >= 0 && Math.abs(state.scroll.horizontalBarPos - totalWidth) < 1;
     }
 
-    function bindContainerDomListener(eventManeger) {
-        const table = eventManeger.table;
-        const stateManeger = table.stateManeger;
+    function bindContainerDomListener(eventManager) {
+        const table = eventManager.table;
+        const stateManager = table.stateManager;
         const handler = table.internalProps.handler;
         handler.on(table.getElement(), 'blur', (e) => {
-            eventManeger.dealTableHover();
+            eventManager.dealTableHover();
         });
         handler.on(table.getElement(), 'wheel', (e) => {
-            handleWhell(e, stateManeger);
+            handleWhell(e, stateManager);
         });
         handler.on(table.getElement(), 'keydown', (e) => {
             if (table.keyboardOptions?.selectAllOnCtrlA) {
                 if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
                     e.preventDefault();
-                    eventManeger.deelTableSelectAll();
+                    eventManager.deelTableSelectAll();
                 }
             }
             if (table.hasListeners(TABLE_EVENT_TYPE.KEYDOWN)) {
@@ -48229,7 +48347,6 @@
                     keyCode: e.keyCode ?? e.which,
                     code: e.code,
                     event: e,
-                    cells: table.getSelectedCellInfos(),
                     scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth
                 };
                 table.fireListeners(TABLE_EVENT_TYPE.KEYDOWN, cellsEvent);
@@ -48247,7 +48364,7 @@
                         e.clipboardData.setData('text/plain', data);
                     }
                     table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
-                        cellRange: table.stateManeger.select.ranges,
+                        cellRange: table.stateManager.select.ranges,
                         copyData: data
                     });
                 }
@@ -48261,87 +48378,87 @@
         });
     }
 
-    function bindTouchListener(eventManeger) {
-        const table = eventManeger.table;
-        const stateManeger = table.stateManeger;
+    function bindTouchListener(eventManager) {
+        const table = eventManager.table;
+        const stateManager = table.stateManager;
         const scenegraph = table.scenegraph;
-        eventManeger.touchMovePoints = [];
+        eventManager.touchMovePoints = [];
         table.scenegraph.tableGroup.addEventListener('touchstart', (e) => {
             if (e.target.isChildOf(scenegraph.component.vScrollBar) || e.target.isChildOf(scenegraph.component.vScrollBar)) {
                 return;
             }
-            eventManeger.isTouchdown = true;
-            eventManeger.touchMovePoints.push({
+            eventManager.isTouchdown = true;
+            eventManager.touchMovePoints.push({
                 x: e.page.x,
                 y: e.page.y,
                 timestamp: Date.now()
             });
         });
         window.addEventListener('touchmove', (e) => {
-            if (eventManeger.touchMove) {
+            if (eventManager.touchMove) {
                 e.preventDefault();
             }
-            if (!eventManeger.isTouchdown || !isTouchEvent$1(e)) {
+            if (!eventManager.isTouchdown || !isTouchEvent$1(e)) {
                 return;
             }
-            if (eventManeger.touchMovePoints.length > 4) {
-                eventManeger.touchMovePoints.shift();
+            if (eventManager.touchMovePoints.length > 4) {
+                eventManager.touchMovePoints.shift();
             }
-            eventManeger.touchMovePoints.push({
+            eventManager.touchMovePoints.push({
                 x: e.changedTouches[0].pageX,
                 y: e.changedTouches[0].pageY,
                 timestamp: Date.now()
             });
-            const deltaX = -eventManeger.touchMovePoints[eventManeger.touchMovePoints.length - 1].x +
-                eventManeger.touchMovePoints[eventManeger.touchMovePoints.length - 2].x;
-            const deltaY = -eventManeger.touchMovePoints[eventManeger.touchMovePoints.length - 1].y +
-                eventManeger.touchMovePoints[eventManeger.touchMovePoints.length - 2].y;
-            handleWhell({ deltaX, deltaY }, stateManeger);
+            const deltaX = -eventManager.touchMovePoints[eventManager.touchMovePoints.length - 1].x +
+                eventManager.touchMovePoints[eventManager.touchMovePoints.length - 2].x;
+            const deltaY = -eventManager.touchMovePoints[eventManager.touchMovePoints.length - 1].y +
+                eventManager.touchMovePoints[eventManager.touchMovePoints.length - 2].y;
+            handleWhell({ deltaX, deltaY }, stateManager);
             if (e.cancelable &&
                 (table.internalProps.overscrollBehavior === 'none' ||
-                    (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManeger)) ||
-                    (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManeger)))) {
+                    (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManager)) ||
+                    (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManager)))) {
                 e.preventDefault();
             }
         }, { passive: false });
         window.addEventListener('touchend', (e) => {
-            eventManeger.touchEnd = true;
-            eventManeger.touchMove = false;
-            if (!eventManeger.isTouchdown || !isTouchEvent$1(e)) {
+            eventManager.touchEnd = true;
+            eventManager.touchMove = false;
+            if (!eventManager.isTouchdown || !isTouchEvent$1(e)) {
                 return;
             }
-            if (eventManeger.touchMovePoints?.length) {
-                if (eventManeger.touchMovePoints.length > 4) {
-                    eventManeger.touchMovePoints.shift();
+            if (eventManager.touchMovePoints?.length) {
+                if (eventManager.touchMovePoints.length > 4) {
+                    eventManager.touchMovePoints.shift();
                 }
-                eventManeger.touchMovePoints.push({
+                eventManager.touchMovePoints.push({
                     x: e.changedTouches[0].pageX,
                     y: e.changedTouches[0].pageY,
                     timestamp: Date.now()
                 });
-                const firstPoint = eventManeger.touchMovePoints[0];
-                const lastPoint = eventManeger.touchMovePoints[eventManeger.touchMovePoints?.length - 1];
+                const firstPoint = eventManager.touchMovePoints[0];
+                const lastPoint = eventManager.touchMovePoints[eventManager.touchMovePoints?.length - 1];
                 const vX = (lastPoint.x - firstPoint.x) / (lastPoint.timestamp - firstPoint.timestamp);
                 const vY = (lastPoint.y - firstPoint.y) / (lastPoint.timestamp - firstPoint.timestamp);
-                startInertia(vX, vY, stateManeger);
+                startInertia(vX, vY, stateManager);
             }
-            eventManeger.isTouchdown = false;
-            eventManeger.touchMovePoints = [];
+            eventManager.isTouchdown = false;
+            eventManager.touchMovePoints = [];
         });
         window.addEventListener('touchcancel', (e) => {
-            eventManeger.touchEnd = true;
-            eventManeger.touchMove = false;
-            if (!eventManeger.isTouchdown) {
+            eventManager.touchEnd = true;
+            eventManager.touchMove = false;
+            if (!eventManager.isTouchdown) {
                 return;
             }
-            eventManeger.isTouchdown = false;
-            eventManeger.touchMovePoints = [];
+            eventManager.isTouchdown = false;
+            eventManager.touchMovePoints = [];
         });
     }
     function isTouchEvent$1(e) {
         return !!e.changedTouches;
     }
-    function startInertia(vX, vY, stateManeger) {
+    function startInertia(vX, vY, stateManager) {
         let time = Date.now();
         const friction = 0.95;
         const inertia = () => {
@@ -48361,7 +48478,7 @@
                 stopped = false;
                 dy = ((vY + newVY) / 2) * dffTime;
             }
-            handleWhell({ deltaX: -dx, deltaY: -dy }, stateManeger);
+            handleWhell({ deltaX: -dx, deltaY: -dy }, stateManager);
             if (stopped) {
                 return;
             }
@@ -48378,7 +48495,7 @@
             return;
         }
         table.scenegraph.tableGroup.addEventListener('click', (e) => {
-            if (table.stateManeger.columnMove.moving || table.stateManeger.columnResize.resizing) {
+            if (table.stateManager.columnMove.moving || table.stateManager.columnResize.resizing) {
                 return;
             }
             if (e.target.name === 'axis-label') {
@@ -48498,7 +48615,7 @@
         return 'bottom';
     }
 
-    class EventManeger {
+    class EventManager {
         table;
         isTouchdown;
         touchMovePoints;
@@ -48527,28 +48644,28 @@
             if (this.table.isReleased) {
                 return;
             }
-            const stateManeger = this.table.stateManeger;
+            const stateManager = this.table.stateManager;
             this.table.on(TABLE_EVENT_TYPE.ICON_CLICK, iconInfo => {
                 const { col, row, x, y, funcType, icon } = iconInfo;
                 if (funcType === IconFuncTypeEnum.dropDown) {
-                    stateManeger.triggerDropDownMenu(col, row, x, y);
+                    stateManager.triggerDropDownMenu(col, row, x, y);
                 }
                 else if (funcType === IconFuncTypeEnum.sort) {
-                    stateManeger.triggerSort(col, row, icon);
+                    stateManager.triggerSort(col, row, icon);
                 }
                 else if (funcType === IconFuncTypeEnum.frozen) {
-                    stateManeger.triggerFreeze(col, row, icon);
+                    stateManager.triggerFreeze(col, row, icon);
                 }
                 else if (funcType === IconFuncTypeEnum.drillDown) {
                     drillClick(this.table);
                 }
                 else if (funcType === IconFuncTypeEnum.collapse || funcType === IconFuncTypeEnum.expand) {
-                    this.table.stateManeger.updateSelectPos(-1, -1);
+                    this.table.stateManager.updateSelectPos(-1, -1);
                     this.table.toggleHierarchyState(col, row);
                 }
             });
             this.table.on(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, () => {
-                stateManeger.hideMenu();
+                stateManager.hideMenu();
             });
             if (checkHaveTextStick(this.table)) {
                 this.table.on(TABLE_EVENT_TYPE.SCROLL, e => {
@@ -48574,31 +48691,31 @@
         }
         dealTableHover(eventArgsSet) {
             if (!eventArgsSet) {
-                this.table.stateManeger.updateHoverPos(-1, -1);
+                this.table.stateManager.updateHoverPos(-1, -1);
                 return;
             }
             const { eventArgs } = eventArgsSet;
             if (eventArgs) {
-                this.table.stateManeger.updateHoverPos(eventArgs.col, eventArgs.row);
+                this.table.stateManager.updateHoverPos(eventArgs.col, eventArgs.row);
             }
             else {
-                this.table.stateManeger.updateHoverPos(-1, -1);
+                this.table.stateManager.updateHoverPos(-1, -1);
             }
         }
         dealIconHover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
             if (eventArgs) {
-                this.table.stateManeger.updateHoverIcon(eventArgs.col, eventArgs.row, eventArgs.target, eventArgs.targetCell, eventArgs.event);
+                this.table.stateManager.updateHoverIcon(eventArgs.col, eventArgs.row, eventArgs.target, eventArgs.targetCell, eventArgs.event);
             }
             else {
-                this.table.stateManeger.updateHoverIcon(-1, -1, undefined, undefined);
+                this.table.stateManager.updateHoverIcon(-1, -1, undefined, undefined);
             }
         }
         dealMenuHover(eventArgsSet) {
         }
         dealTableSelect(eventArgsSet, isSelectMoving) {
             if (!eventArgsSet) {
-                this.table.stateManeger.updateSelectPos(-1, -1);
+                this.table.stateManager.updateSelectPos(-1, -1);
                 return false;
             }
             const { eventArgs } = eventArgsSet;
@@ -48608,30 +48725,30 @@
                 }
                 const define = this.table.getBodyColumnDefine(eventArgs.col, eventArgs.row);
                 if (this.table.isHeader(eventArgs.col, eventArgs.row) &&
-                    (define?.disableHeaderSelect || this.table.stateManeger.select?.disableHeader)) {
+                    (define?.disableHeaderSelect || this.table.stateManager.select?.disableHeader)) {
                     if (!isSelectMoving) {
-                        this.table.stateManeger.updateSelectPos(-1, -1);
+                        this.table.stateManager.updateSelectPos(-1, -1);
                     }
                     return false;
                 }
                 else if (!this.table.isHeader(eventArgs.col, eventArgs.row) && define?.disableSelect) {
                     if (!isSelectMoving) {
-                        this.table.stateManeger.updateSelectPos(-1, -1);
+                        this.table.stateManager.updateSelectPos(-1, -1);
                     }
                     return false;
                 }
                 if (this.table.isPivotChart() &&
                     (eventArgsSet?.eventArgs?.target.name === 'axis-label' || eventArgsSet?.eventArgs?.target.type === 'chart')) {
-                    this.table.stateManeger.updateSelectPos(-1, -1);
+                    this.table.stateManager.updateSelectPos(-1, -1);
                     return false;
                 }
-                this.table.stateManeger.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
                 return true;
             }
             return false;
         }
         deelTableSelectAll() {
-            this.table.stateManeger.updateSelectPos(-1, -1, false, false, true);
+            this.table.stateManager.updateSelectPos(-1, -1, false, false, true);
         }
         dealMenuSelect(eventArgsSet) {
         }
@@ -48641,7 +48758,7 @@
                 const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgs.targetCell);
                 if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                     if (update) {
-                        this.table.stateManeger.startResizeCol(resizeCol.col, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, resizeCol.rightFrozen);
+                        this.table.stateManager.startResizeCol(resizeCol.col, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, resizeCol.rightFrozen);
                     }
                     return true;
                 }
@@ -48649,22 +48766,22 @@
             return false;
         }
         dealColumnResize(xInTable, yInTable) {
-            this.table.stateManeger.updateResizeCol(xInTable, yInTable);
+            this.table.stateManager.updateResizeCol(xInTable, yInTable);
         }
         chechColumnMover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
             if (eventArgs &&
                 this.table.isHeader(eventArgs.col, eventArgs.row) &&
-                checkCellInSelect(eventArgs.col, eventArgs.row, this.table.stateManeger.select.ranges) &&
+                checkCellInSelect(eventArgs.col, eventArgs.row, this.table.stateManager.select.ranges) &&
                 this.table._canDragHeaderPosition(eventArgs.col, eventArgs.row)) {
-                this.table.stateManeger.startMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                this.table.stateManager.startMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
                 return true;
             }
             return false;
         }
         dealColumnMover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
-            this.table.stateManeger.updateMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+            this.table.stateManager.updateMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
         }
         startColumnResize(eventArgsSet) {
         }
@@ -49271,8 +49388,8 @@
                     const children = this._menuInstanceInfo.content[dropDownIndex]?.children;
                     for (let i = 0; i < children.length; i++) {
                         const menuItem = children[i];
-                        const isHighlight = table.stateManeger.menu.dropDownMenuHighlight
-                            ? isMenuHighlight(table, table.stateManeger.menu.dropDownMenuHighlight, typeof menuItem === 'object' ? menuItem?.menuKey || menuItem?.text : menuItem, col, row)
+                        const isHighlight = table.stateManager.menu.dropDownMenuHighlight
+                            ? isMenuHighlight(table, table.stateManager.menu.dropDownMenuHighlight, typeof menuItem === 'object' ? menuItem?.menuKey || menuItem?.text : menuItem, col, row)
                             : false;
                         const item = createItem(menuItem, isHighlight);
                         item.col = col;
@@ -49348,7 +49465,7 @@
                     if (typeof menu === 'object' && menu.children && menu.children.length) {
                         for (let j = 0; j < menu.children.length; j++) {
                             const childItem = menu.children[j];
-                            if (isMenuHighlight(table, table.stateManeger.menu.dropDownMenuHighlight, typeof childItem === 'object' ? childItem?.menuKey : childItem, col, row) &&
+                            if (isMenuHighlight(table, table.stateManager.menu.dropDownMenuHighlight, typeof childItem === 'object' ? childItem?.menuKey : childItem, col, row) &&
                                 menuKey === (typeof childItem === 'object' ? childItem?.menuKey : childItem)) {
                                 highlight = true;
                                 return;
@@ -49397,16 +49514,16 @@
                     const menuListItem = menuInstanceInfo.content;
                     for (let i = 0; i < menuListItem?.length ?? 0; i++) {
                         const menuItem = menuListItem[i];
-                        let isHighlight = table.stateManeger.menu.dropDownMenuHighlight
-                            ? isMenuHighlight(table, table.stateManeger.menu.dropDownMenuHighlight, typeof menuItem === 'object' ? menuItem?.menuKey || menuItem?.text : menuItem, col, row)
+                        let isHighlight = table.stateManager.menu.dropDownMenuHighlight
+                            ? isMenuHighlight(table, table.stateManager.menu.dropDownMenuHighlight, typeof menuItem === 'object' ? menuItem?.menuKey || menuItem?.text : menuItem, col, row)
                             : false;
-                        if (table.stateManeger.menu.dropDownMenuHighlight &&
+                        if (table.stateManager.menu.dropDownMenuHighlight &&
                             typeof menuItem === 'object' &&
                             Array.isArray(menuItem.children) &&
                             menuItem.children.length) {
                             for (let i = 0; i < menuItem.children.length; i++) {
                                 const childItem = menuItem.children[i];
-                                if (isMenuHighlight(table, table.stateManeger.menu.dropDownMenuHighlight, typeof childItem === 'object' ? childItem?.menuKey || childItem?.text : childItem, col, row)) {
+                                if (isMenuHighlight(table, table.stateManager.menu.dropDownMenuHighlight, typeof childItem === 'object' ? childItem?.menuKey || childItem?.text : childItem, col, row)) {
                                     isHighlight = true;
                                     break;
                                 }
@@ -49835,8 +49952,8 @@
                     if (typeof menu === 'object' && menu.children && menu.children.length) {
                         for (let j = 0; j < menu.children.length; j++) {
                             const childItem = menu.children[j];
-                            if (_table.stateManeger.menu?.dropDownMenuHighlight &&
-                                isMenuHighlight(_table, _table.stateManeger.menu?.dropDownMenuHighlight, typeof childItem === 'object' ? childItem?.menuKey : childItem, col, row)) {
+                            if (_table.stateManager.menu?.dropDownMenuHighlight &&
+                                isMenuHighlight(_table, _table.stateManager.menu?.dropDownMenuHighlight, typeof childItem === 'object' ? childItem?.menuKey : childItem, col, row)) {
                                 highlightIndex = i;
                                 subHighlightIndex = j;
                                 break;
@@ -50211,12 +50328,12 @@
                 if (isMobile()) {
                     rootElement.style.fontSize = '11px';
                 }
-                const { x1: menuLeft, x2: menuRight, y1: menuTop, y2: menuBottom } = table.stateManeger.menu.bounds;
+                const { x1: menuLeft, x2: menuRight, y1: menuTop, y2: menuBottom } = table.stateManager.menu.bounds;
                 const tooltipLeft = tooltipX;
                 const tooltipRight = tooltipLeft + rootElementWidth;
                 const tooltipTop = tooltipY;
                 const tooltipBottom = tooltipLeft + rootElementHeight;
-                if (table.stateManeger.menu.isShow &&
+                if (table.stateManager.menu.isShow &&
                     menuLeft < tooltipRight &&
                     menuRight > tooltipLeft &&
                     menuBottom > tooltipTop &&
@@ -50423,8 +50540,8 @@
                 if (isMobile()) {
                     return;
                 }
-                const { x1: left, x2: right, y1: top, y2: bottom } = table.stateManeger.menu.bounds;
-                if (table.stateManeger.menu.isShow &&
+                const { x1: left, x2: right, y1: top, y2: bottom } = table.stateManager.menu.bounds;
+                if (table.stateManager.menu.isShow &&
                     typeof e.x === 'number' &&
                     typeof e.y === 'number' &&
                     e.x > left &&
@@ -50490,7 +50607,7 @@
                         this._unbindFromCell();
                     }
                 }
-                if (this._attachInfo && table.stateManeger.menu.isShow) {
+                if (this._attachInfo && table.stateManager.menu.isShow) {
                     this._bindToCell(e.col, e.row);
                 }
             });
@@ -51565,14 +51682,14 @@
         canvasHeight;
         _vDataSet;
         scenegraph;
-        stateManeger;
-        eventManeger;
+        stateManager;
+        eventManager;
         _pixelRatio;
         static get EVENT_TYPE() {
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.15.0";
+        version = "0.15.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51681,8 +51798,8 @@
                     : 10;
             this._vDataSet = new DataSet();
             this.scenegraph = new Scenegraph(this);
-            this.stateManeger = new StateManeger(this);
-            this.eventManeger = new EventManeger(this);
+            this.stateManager = new StateManager(this);
+            this.eventManager = new EventManager(this);
             if (options.legends) {
                 internalProps.legends = createLegend(options.legends, this);
                 this.scenegraph.tableGroup.setAttributes({
@@ -51757,7 +51874,7 @@
             if (this.tableNoFrameWidth - this.getColsWidth(0, frozenColCount - 1) <= 120) {
                 this.internalProps.frozenColCount = 0;
             }
-            this.stateManeger.setFrozenCol(this.internalProps.frozenColCount);
+            this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
         }
         setFrozenColCount(frozenColCount) {
             if (frozenColCount >= this.colCount) {
@@ -51768,7 +51885,7 @@
             if (this.tableNoFrameWidth - this.getColsWidth(0, frozenColCount - 1) <= 120) {
                 this.internalProps.frozenColCount = 0;
             }
-            this.stateManeger.setFrozenCol(this.internalProps.frozenColCount);
+            this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
         }
         _setFrozenColCount(frozenColCount) {
             if (frozenColCount >= this.colCount) {
@@ -51983,9 +52100,6 @@
         get rowHierarchyType() {
             return 'grid';
         }
-        setColWidths(widths) {
-            widths.forEach((value, index) => this.setColWidth(index, value));
-        }
         getColsWidth(startCol, endCol) {
             endCol = Math.min(endCol, this.colCount - 1);
             const cachedColWidth = this._colRangeWidthsMap.get(`$${startCol}$${endCol}`);
@@ -52033,7 +52147,7 @@
             }
             return this.internalProps.defaultRowHeight;
         }
-        setRowHeight(row, height, clearCache) {
+        _setRowHeight(row, height, clearCache) {
             this.rowHeightsMap.put(row, Math.round(height));
             if (clearCache) {
                 this._clearRowRangeHeightsMap(row);
@@ -52126,13 +52240,13 @@
             }
             return this._adjustColWidth(col, this._colWidthDefineToPxWidth(width));
         }
-        setColWidth(col, width, clearCache, skipCheckFrozen) {
+        _setColWidth(col, width, clearCache, skipCheckFrozen) {
             this.colWidthsMap.put(col, typeof width === 'number' ? Math.round(width) : width);
             if (clearCache) {
                 this._clearColRangeWidthsMap(col);
             }
             if (!skipCheckFrozen) {
-                this.stateManeger.checkFrozen();
+                this.stateManager.checkFrozen();
             }
         }
         _clearColRangeWidthsMap(col) {
@@ -52540,16 +52654,16 @@
             return count;
         }
         get scrollTop() {
-            return this.stateManeger.scroll.verticalBarPos;
+            return this.stateManager.scroll.verticalBarPos;
         }
         set scrollTop(scrollTop) {
-            this.stateManeger.setScrollTop(scrollTop);
+            this.stateManager.setScrollTop(scrollTop);
         }
         get scrollLeft() {
-            return this.stateManeger.scroll.horizontalBarPos;
+            return this.stateManager.scroll.horizontalBarPos;
         }
         set scrollLeft(scrollLeft) {
-            this.stateManeger.setScrollLeft(scrollLeft);
+            this.stateManager.setScrollLeft(scrollLeft);
         }
         getScrollLeft() {
             return this.scrollLeft;
@@ -52654,6 +52768,7 @@
             this.colContentWidthsMap = new NumberMap();
             this.colWidthsLimit = {};
             internalProps.theme = themes.of(options.theme ?? themes.DEFAULT);
+            this.scenegraph.updateStageBackground();
             internalProps.autoWrapText = options.autoWrapText;
             internalProps.allowFrozenColCount = options.allowFrozenColCount ?? internalProps.colCount;
             internalProps.limitMaxAutoWidth = options.limitMaxAutoWidth ?? 450;
@@ -52670,7 +52785,7 @@
             internalProps.title?.release();
             internalProps.layoutMap.release();
             this.scenegraph.clearCells();
-            this.stateManeger.initState();
+            this.stateManager.initState();
             this._updateSize();
             if (options.legends) {
                 internalProps.legends = createLegend(options.legends, this);
@@ -52699,11 +52814,13 @@
             this.clearRowHeightCache();
         }
         renderWithRecreateCells() {
+            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.refreshHeader();
             this.scenegraph.clearCells();
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
             this.scenegraph.createSceneGraph();
+            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this.render();
         }
         getFrozenRowsHeight() {
@@ -52901,20 +53018,25 @@
             return Math.min(Math.ceil(absoluteX / this.internalProps.defaultColWidth), this.colCount - 1);
         }
         clearSelected() {
-            this.stateManeger.updateSelectPos(-1, -1);
+            this.stateManager.updateSelectPos(-1, -1);
         }
         selectCell(col, row) {
-            this.stateManeger.updateSelectPos(col, row);
-            this.stateManeger.endSelectCells();
+            this.stateManager.updateSelectPos(col, row);
+            this.stateManager.endSelectCells();
         }
         selectCells(cellRanges) {
             const { scrollLeft, scrollTop } = this;
             cellRanges.forEach((cellRange, index) => {
-                this.stateManeger.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1);
-                this.stateManeger.updateInteractionState(InteractionState.grabing);
-                this.stateManeger.updateSelectPos(cellRange.end.col, cellRange.end.row, false, index >= 1);
-                this.stateManeger.endSelectCells(false);
-                this.stateManeger.updateInteractionState(InteractionState.default);
+                if (cellRange.start.col === cellRange.end.col && cellRange.start.row === cellRange.end.row) {
+                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1);
+                }
+                else {
+                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1);
+                    this.stateManager.updateInteractionState(InteractionState.grabing);
+                    this.stateManager.updateSelectPos(cellRange.end.col, cellRange.end.row, false, index >= 1);
+                }
+                this.stateManager.endSelectCells(false);
+                this.stateManager.updateInteractionState(InteractionState.default);
             });
             this.setScrollTop(scrollTop);
             this.setScrollLeft(scrollLeft);
@@ -52968,12 +53090,15 @@
             this.options.theme = theme;
         }
         updateTheme(theme) {
+            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.internalProps.theme = themes.of(theme ?? themes.DEFAULT);
             this.options.theme = theme;
+            this.scenegraph.updateStageBackground();
             this.scenegraph.clearCells();
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
             this.scenegraph.createSceneGraph();
+            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this.render();
         }
         getBodyField(col, row) {
@@ -53075,7 +53200,7 @@
                             col,
                             row,
                             table: this,
-                            value: this.getCellValue(col, row),
+                            value: customMerge.text,
                             dataValue: this.getCellOriginValue(col, row),
                             cellHeaderPaths: this.getCellHeaderPaths(col, row)
                         }, styleClass, this.options.autoWrapText);
@@ -53108,10 +53233,10 @@
             return description;
         }
         setDropDownMenuHighlight(cells) {
-            this.stateManeger.setDropDownMenuHighlight(cells);
+            this.stateManager.setDropDownMenuHighlight(cells);
         }
         _dropDownMenuIsHighlight(colNow, rowNow, index) {
-            return this.stateManeger.dropDownMenuIsHighlight(colNow, rowNow, index);
+            return this.stateManager.dropDownMenuIsHighlight(colNow, rowNow, index);
         }
         isHeader(col, row) {
             return this.internalProps.layoutMap && this.internalProps.layoutMap.isHeader(col, row);
@@ -53292,8 +53417,8 @@
             return limit.max !== limit.min;
         }
         _canDragHeaderPosition(col, row) {
-            if (this.isHeader(col, row) && this.stateManeger.isSelected(col, row)) {
-                const selectRange = this.stateManeger.select.ranges[0];
+            if (this.isHeader(col, row) && this.stateManager.isSelected(col, row)) {
+                const selectRange = this.stateManager.select.ranges[0];
                 if (this.isColumnHeader(col, row)) {
                     if (selectRange.end.row !== this.rowCount - 1) {
                         return false;
@@ -53347,7 +53472,7 @@
                 menuType = Array.isArray(dropDownMenuOptions.content) ? 'dropdown-menu' : 'container';
             }
             if (this.internalProps.menu.renderMode === 'html') {
-                this.stateManeger.menu.isShow = true;
+                this.stateManager.menu.isShow = true;
                 this.internalProps.menuHandler._bindToCell(col, row, menuType, dropDownMenuOptions);
             }
         }
@@ -53439,8 +53564,8 @@
             this.render();
         }
         getCopyValue() {
-            if (this.stateManeger.select?.ranges?.length > 0) {
-                const ranges = this.stateManeger.select.ranges;
+            if (this.stateManager.select?.ranges?.length > 0) {
+                const ranges = this.stateManager.select.ranges;
                 let minCol = Math.min(ranges[0].start.col, ranges[0].end.col);
                 let maxCol = Math.max(ranges[0].start.col, ranges[0].end.col);
                 let minRow = Math.min(ranges[0].start.row, ranges[0].end.row);
@@ -53537,10 +53662,10 @@
             return '';
         }
         getSelectedCellInfos() {
-            if (!this.stateManeger.select?.ranges) {
+            if (!this.stateManager.select?.ranges) {
                 return null;
             }
-            const ranges = this.stateManeger.select.ranges;
+            const ranges = this.stateManager.select.ranges;
             if (!ranges.length) {
                 return [];
             }
@@ -53646,7 +53771,7 @@
             });
         }
         _getActiveChartInstance() {
-            const cellGroup = this.scenegraph.getCell(this.stateManeger.hover?.cellPos?.col, this.stateManeger.hover?.cellPos?.row);
+            const cellGroup = this.scenegraph.getCell(this.stateManager.hover?.cellPos?.col, this.stateManager.hover?.cellPos?.row);
             return cellGroup?.getChildren()?.[0]?.type === 'chart'
                 ? cellGroup.getChildren()[0].activeChartInstance
                 : null;
@@ -53665,6 +53790,16 @@
             }
             return false;
         }
+        getCustomMergeValue(col, row) {
+            if (this.internalProps.customMergeCell) {
+                const customMerge = this.getCustomMerge(col, row);
+                if (customMerge) {
+                    const { text } = customMerge;
+                    return text;
+                }
+            }
+            return undefined;
+        }
         exportImg() {
             const c = this.scenegraph.stage.toCanvas();
             return c.toDataURL();
@@ -53945,7 +54080,6 @@
                     title: { visible: false },
                     domainLine: { visible: false },
                     seriesIndex: index,
-                    height: -1,
                     sync: { axisId: NO_AXISID_FRO_VTABLE }
                 }));
             });
@@ -53968,8 +54102,7 @@
                 domainLine: { visible: false },
                 tick: { visible: false },
                 subTick: { visible: false },
-                title: { visible: false },
-                width: -1
+                title: { visible: false }
             }));
         }
         else {
@@ -54003,7 +54136,6 @@
                     title: { visible: false },
                     domainLine: { visible: false },
                     seriesIndex: index,
-                    width: -1,
                     sync: { axisId: NO_AXISID_FRO_VTABLE }
                 }));
             });
@@ -54027,8 +54159,7 @@
                 domainLine: { visible: false },
                 tick: { visible: false },
                 subTick: { visible: false },
-                title: { visible: false },
-                height: -1
+                title: { visible: false }
             }));
         }
         return axes;
@@ -55087,7 +55218,9 @@
                     : [];
             this.showHeader = options.showHeader ?? true;
             this.transpose = options.transpose ?? false;
-            this.editorManager = new EditManeger(this);
+            if (Env.mode !== 'node') {
+                this.editorManager = new EditManeger(this);
+            }
             this.refreshHeader();
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
@@ -55119,6 +55252,7 @@
             return this.internalProps.sortState;
         }
         updateColumns(columns) {
+            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.internalProps.columns = cloneDeep$1(columns);
             this.options.columns = columns;
             this.refreshHeader();
@@ -55126,6 +55260,7 @@
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
             this.scenegraph.createSceneGraph();
+            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this.renderAsync();
         }
         get header() {
@@ -55157,6 +55292,10 @@
             if (col === -1 || row === -1) {
                 return null;
             }
+            const customMergeText = this.getCustomMergeValue(col, row);
+            if (customMergeText) {
+                return customMergeText;
+            }
             const table = this;
             if (table.internalProps.layoutMap.isHeader(col, row)) {
                 const { title } = table.internalProps.layoutMap.getHeader(col, row);
@@ -55301,7 +55440,7 @@
                 for (let col = 0; col < layoutMap.columnWidths.length; col++) {
                     const { width, minWidth, maxWidth } = layoutMap.columnWidths?.[col] ?? {};
                     if (width && ((typeof width === 'string' && width !== 'auto') || (typeof width === 'number' && width > 0))) {
-                        table.setColWidth(col, width);
+                        table._setColWidth(col, width);
                     }
                     if (minWidth && ((typeof minWidth === 'number' && minWidth > 0) || typeof minWidth === 'string')) {
                         table.setMinColWidth(col, minWidth);
@@ -55337,7 +55476,7 @@
                 table.bottomFrozenRowCount = this.options.bottomFrozenRowCount ?? 0;
                 table.rightFrozenColCount = this.options.rightFrozenColCount ?? 0;
             }
-            this.stateManeger.setFrozenCol(this.internalProps.frozenColCount);
+            this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
         }
         getFieldData(field, col, row) {
             if (field === null) {
@@ -55567,25 +55706,36 @@
                     this.scenegraph.sortCell();
                 }
             }
-            this.stateManeger.updateSortState(sortState);
+            this.stateManager.updateSortState(sortState);
         }
         getCheckboxState(field) {
-            if (this.stateManeger.checkedState.length < this.rowCount - this.columnHeaderLevelCount) {
-                this.stateManeger.initLeftRecordsCheckState(this.records);
+            if (this.stateManager.checkedState.length < this.rowCount - this.columnHeaderLevelCount) {
+                this.stateManager.initLeftRecordsCheckState(this.records);
             }
             if (isValid$6(field)) {
-                return this.stateManeger.checkedState.map(state => {
+                return this.stateManager.checkedState.map(state => {
                     return state[field];
                 });
             }
-            return this.stateManeger.checkedState;
+            return this.stateManager.checkedState;
+        }
+        getCellCheckboxState(col, row) {
+            const define = this.getBodyColumnDefine(col, row);
+            const field = define?.field;
+            const cellType = define?.cellType;
+            if (isValid$6(field) && cellType === 'checkbox') {
+                const dataIndex = this.dataSource.getIndexKey(this.getRecordIndexByCell(col, row));
+                return this.stateManager.checkedState[dataIndex][field];
+            }
+            return undefined;
         }
         setRecords(records, sort) {
             typeof window !== 'undefined' ? window.performance.now() : 0;
+            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.scenegraph.clearCells();
             if (sort !== undefined) {
                 this.internalProps.sortState = sort;
-                this.stateManeger.setSortState(this.sortState);
+                this.stateManager.setSortState(this.sortState);
             }
             if (records) {
                 _setRecords(this, records);
@@ -55610,7 +55760,7 @@
                         else {
                             hd = this.internalProps.layoutMap.headerObjects.find((col) => col && col.field === field);
                         }
-                        hd?.define?.sort && this.dataSource.sort(hd.field, order, sortFunc ?? defaultOrderFn);
+                        this.dataSource.sort(hd.field, order, sortFunc ?? defaultOrderFn);
                     }
                 }
                 this.refreshRowColCount();
@@ -55618,8 +55768,9 @@
             else {
                 _setRecords(this, records);
             }
-            this.stateManeger.initCheckedState(records);
+            this.stateManager.initCheckedState(records);
             this.scenegraph.createSceneGraph();
+            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
                 this._updateSize();
                 this.internalProps.title.resize();
@@ -55635,8 +55786,8 @@
             if (isValid$6(col) && isValid$6(row)) {
                 this.editorManager.startEditCell(col, row);
             }
-            else if (this.stateManeger.select?.cellPos) {
-                const { col, row } = this.stateManeger.select.cellPos;
+            else if (this.stateManager.select?.cellPos) {
+                const { col, row } = this.stateManager.select.cellPos;
                 if (isValid$6(col) && isValid$6(row)) {
                     this.editorManager.startEditCell(col, row);
                 }
@@ -56829,16 +56980,19 @@
                 }
                 return 0;
             }
-            const axisOption = this._table.pivotChartAxes.find(axisOption => {
-                return axisOption.orient === 'bottom';
-            });
-            if (axisOption?.visible === false) {
-                return 0;
-            }
-            if (this.indicatorsAsCol) {
+            if (this.indicatorKeys.length >= 1) {
+                const axisOption = this._table.pivotChartAxes.find(axisOption => {
+                    return axisOption.orient === 'bottom';
+                });
+                if (axisOption?.visible === false) {
+                    return 0;
+                }
+                if (this.indicatorsAsCol) {
+                    return 1;
+                }
                 return 1;
             }
-            return 1;
+            return 0;
         }
         get rightFrozenColCount() {
             if (!this._table.isPivotChart()) {
@@ -56944,7 +57098,7 @@
                     id: '',
                     field: undefined,
                     indicatorKey: undefined,
-                    cellType: undefined,
+                    cellType: 'text',
                     define: undefined
                 });
             }
@@ -56954,7 +57108,7 @@
                 id: '',
                 field: undefined,
                 indicatorKey: undefined,
-                cellType: undefined,
+                cellType: 'text',
                 define: undefined
             });
         }
@@ -57678,14 +57832,16 @@
             if (!this._table.isPivotChart()) {
                 return false;
             }
-            if (this.isBottomFrozenRow(col, row) || this.isRightFrozenColumn(col, row)) {
-                return true;
-            }
-            if (this.isRowHeader(col, row) && col === this.rowHeaderLevelCount - 1) {
-                return true;
-            }
-            if (this.hasTwoIndicatorAxes && this.indicatorsAsCol && row === this.columnHeaderLevelCount - 1) {
-                return true;
+            if (this.indicatorKeys.length >= 1) {
+                if (this.isBottomFrozenRow(col, row) || this.isRightFrozenColumn(col, row)) {
+                    return true;
+                }
+                if (this.isRowHeader(col, row) && col === this.rowHeaderLevelCount - 1) {
+                    return true;
+                }
+                if (this.hasTwoIndicatorAxes && this.indicatorsAsCol && row === this.columnHeaderLevelCount - 1) {
+                    return true;
+                }
             }
             return false;
         }
@@ -58049,7 +58205,7 @@
         }
         const space = bandSpace(count, paddingInner, paddingOuter);
         const step = bandwidth / (1 - paddingInner);
-        const wholeSize = space * step;
+        const wholeSize = Math.ceil(space * step);
         return wholeSize;
     }
     function bandSpace(count, paddingInner, paddingOuter) {
@@ -59588,12 +59744,15 @@
                 this.updatePivotSortState(options.pivotSortState);
             }
             this.refreshHeader();
-            this.stateManeger.initCheckedState(records);
+            this.stateManager.initCheckedState(records);
             this.scenegraph.createSceneGraph();
             if (options.title) {
                 this.internalProps.title = new Title(options.title, this);
                 this.scenegraph.resize();
             }
+            setTimeout(() => {
+                this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
+            }, 0);
         }
         static get EVENT_TYPE() {
             return PIVOT_TABLE_EVENT_TYPE;
@@ -59630,7 +59789,7 @@
             this.internalProps.rowTree =
                 !options.indicatorsAsCol && !options.rows?.length && !options.rowTree ? [] : cloneDeep$1(options.rowTree);
             options.records && (this.internalProps.records = options.records);
-            this.stateManeger.initCheckedState(this.internalProps.records);
+            this.stateManager.initCheckedState(this.internalProps.records);
             this.pagination = options.pagination;
             internalProps.columnResizeType = options.columnResizeType ?? 'column';
             internalProps.dataConfig = cloneDeep$1(options.dataConfig);
@@ -59742,7 +59901,7 @@
             for (let col = 0; col < internalProps.layoutMap.columnWidths.length; col++) {
                 const { width, minWidth, maxWidth } = internalProps.layoutMap.columnWidths?.[col] ?? {};
                 if (width && ((typeof width === 'string' && width !== 'auto') || (typeof width === 'number' && width > 0))) {
-                    this.setColWidth(col, width);
+                    this._setColWidth(col, width);
                 }
                 if (minWidth && ((typeof minWidth === 'number' && minWidth > 0) || typeof minWidth === 'string')) {
                     this.setMinColWidth(col, minWidth);
@@ -59765,7 +59924,7 @@
             table.frozenRowCount = layoutMap.headerLevelCount;
             table.bottomFrozenRowCount = this.options.bottomFrozenRowCount ?? 0;
             table.rightFrozenColCount = this.options.rightFrozenColCount ?? 0;
-            this.stateManeger.setFrozenCol(this.internalProps.frozenColCount);
+            this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
         }
         _getSortFuncFromHeaderOption(columns, field, fieldKey) {
             return undefined;
@@ -59825,6 +59984,10 @@
             return dataValue;
         }
         getCellValue(col, row) {
+            const customMergeText = this.getCustomMergeValue(col, row);
+            if (customMergeText) {
+                return customMergeText;
+            }
             if (this.internalProps.layoutMap.isHeader(col, row)) {
                 const { title, fieldFormat } = this.internalProps.layoutMap.getHeader(col, row);
                 return typeof fieldFormat === 'function' ? fieldFormat(title) : title;
@@ -60064,6 +60227,7 @@
             return result;
         }
         setRecords(records) {
+            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.options.records = this.internalProps.records = records;
             const options = this.options;
             const internalProps = this.internalProps;
@@ -60089,6 +60253,7 @@
             this.refreshHeader();
             this.scenegraph.clearCells();
             this.scenegraph.createSceneGraph();
+            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
                 this._updateSize();
                 this.internalProps.title.resize();
@@ -60172,6 +60337,9 @@
                 this.internalProps.title = new Title(options.title, this);
                 this.scenegraph.resize();
             }
+            setTimeout(() => {
+                this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
+            }, 0);
         }
         static get EVENT_TYPE() {
             return PIVOT_CHART_EVENT_TYPE;
@@ -60270,7 +60438,7 @@
             for (let col = 0; col < internalProps.layoutMap.columnWidths.length; col++) {
                 const { width, minWidth, maxWidth } = internalProps.layoutMap.columnWidths?.[col] ?? {};
                 if (width && ((typeof width === 'string' && width !== 'auto') || (typeof width === 'number' && width > 0))) {
-                    this.setColWidth(col, width);
+                    this._setColWidth(col, width);
                 }
                 if (minWidth && ((typeof minWidth === 'number' && minWidth > 0) || typeof minWidth === 'string')) {
                     this.setMinColWidth(col, minWidth);
@@ -60293,7 +60461,7 @@
             table.frozenRowCount = layoutMap.headerLevelCount;
             table.bottomFrozenRowCount = layoutMap?.bottomFrozenRowCount ?? 0;
             table.rightFrozenColCount = layoutMap?.rightFrozenColCount ?? 0;
-            this.stateManeger.setFrozenCol(this.internalProps.frozenColCount);
+            this.stateManager.setFrozenCol(this.internalProps.frozenColCount);
         }
         _getSortFuncFromHeaderOption(columns, field, fieldKey) {
             return undefined;
@@ -60347,6 +60515,10 @@
             return dataValue;
         }
         getCellValue(col, row) {
+            const customMergeText = this.getCustomMergeValue(col, row);
+            if (customMergeText) {
+                return customMergeText;
+            }
             if (this.internalProps.layoutMap.isHeader(col, row)) {
                 const { title, fieldFormat } = this.internalProps.layoutMap.getHeader(col, row);
                 return typeof fieldFormat === 'function' ? fieldFormat(title) : title;
@@ -60819,16 +60991,10 @@
                     const viewBox = chartNode.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
-                            };
+                            chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
                         }
                         else if (axis.type === 'band') {
-                            const chartAxis = chartInstance._chart._components[index];
-                            chartAxis._spec.domain = axis.domain.slice(0);
-                            chartAxis.updateScaleDomain();
+                            chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
                         }
                     });
                     chartInstance.updateViewBox({
@@ -60889,6 +61055,7 @@
             return undefined;
         }
         setRecords(records) {
+            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.options.records = this.internalProps.records = records;
             this.options;
             const internalProps = this.internalProps;
@@ -60897,6 +61064,7 @@
             this.refreshHeader();
             this.scenegraph.clearCells();
             this.scenegraph.createSceneGraph();
+            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
                 this._updateSize();
                 this.internalProps.title.resize();
@@ -61411,7 +61579,7 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.15.0";
+    const version = "0.15.2";
     function getIcons() {
         return get$2();
     }