@visactor/vtable 0.15.4 → 0.15.5-alpha.2

package/dist/vtable.js

@@ -33175,6 +33175,8 @@
     class CartesianAxis {
         width;
         height;
+        x = 0;
+        y = 0;
         table;
         option;
         orient;
@@ -33185,12 +33187,20 @@
         tickData;
         scale;
         component;
-        constructor(option, width, height, table) {
+        constructor(option, width, height, padding, table) {
             this.table = table;
-            this.width = width;
-            this.height = height;
             this.option = merge$1({}, commonAxis, option);
             this.orient = option.orient ?? 'left';
+            if (this.orient === 'left' || this.orient === 'right') {
+                this.width = width;
+                this.height = height - padding[2];
+                this.y = padding[0];
+            }
+            else if (this.orient === 'top' || this.orient === 'bottom') {
+                this.width = width - padding[1];
+                this.height = height;
+                this.x = padding[3];
+            }
             this.visible = option.visible ?? true;
             this.type = option.type ?? 'band';
             this.inverse = 'inverse' in option ? !!option.inverse : false;
@@ -33302,7 +33312,7 @@
                 axisLength = height;
             }
             const attrs = {
-                start: { x: 0, y: 0 },
+                start: { x: this.x, y: this.y },
                 end,
                 title: {
                     text: this.option.title.text,
@@ -35315,6 +35325,9 @@
             this.setAttribute('width', (this.attribute.width ?? 0) + deltaX);
             if (this.border) {
                 this.border.setAttribute('width', this.border.attribute.width + deltaX);
+                if (this.border.type === 'group') {
+                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.width + deltaX);
+                }
             }
         }
         setDeltaHeight(deltaY) {
@@ -35324,6 +35337,9 @@
             this.setAttribute('height', (this.attribute.height ?? 0) + deltaY);
             if (this.border) {
                 this.border.setAttribute('height', this.border.attribute.height + deltaY);
+                if (this.border.type === 'group') {
+                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.height + deltaY);
+                }
             }
         }
         setDeltaX(deltaX) {
@@ -35441,6 +35457,9 @@
         }
     };
     function after(group, selfChange) {
+        if (!group.stage.dirtyBounds) {
+            return;
+        }
         if (!(group.stage && group.stage.renderCount)) {
             return;
         }
@@ -37552,7 +37571,7 @@
             cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme);
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
-                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, table);
+                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table);
                 cellGroup.clear();
                 cellGroup.appendChild(axis.component);
                 axis.overlap();
@@ -38611,6 +38630,57 @@
             ticks
         };
     }
+    function isTopOrBottomAxis(col, row, layout) {
+        if (!layout._table.isPivotChart()) {
+            return false;
+        }
+        if (layout.indicatorsAsCol) {
+            if (layout.hasTwoIndicatorAxes &&
+                row === layout.columnHeaderLevelCount - 1 &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                return true;
+            }
+            else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                return true;
+            }
+        }
+        else {
+            if (row === layout.rowCount - layout.bottomFrozenRowCount &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function isLeftOrRightAxis(col, row, layout) {
+        if (!layout._table.isPivotChart()) {
+            return false;
+        }
+        if (layout.indicatorsAsCol) {
+            if (col === layout.rowHeaderLevelCount - 1 &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                return true;
+            }
+        }
+        else {
+            if (col === layout.rowHeaderLevelCount - 1 &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                return true;
+            }
+            else if (col === layout.colCount - layout.rightFrozenColCount &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                return true;
+            }
+        }
+        return false;
+    }
 
     function computeAxisComponentWidth(config, table) {
         const attribute = merge$1({}, commonAxis, config);
@@ -38826,8 +38896,14 @@
                 table._clearRowRangeHeightsMap();
             }
             for (let row = rowStart; row < table.columnHeaderLevelCount; row++) {
+                let startCol = 0;
+                let endCol = table.colCount - 1;
+                if ((table.isPivotTable() || table.isPivotChart()) && checkPivotFixedStyleAndNoWrap(table, row)) {
+                    startCol = 0;
+                    endCol = table.rowHeaderLevelCount;
+                }
                 if (isAllRowsAuto || table.getDefaultRowHeight(row) === 'auto') {
-                    const height = computeRowHeight(row, 0, table.colCount - 1, table);
+                    const height = computeRowHeight(row, startCol, endCol, table);
                     if (update) {
                         newHeights[row] = height;
                     }
@@ -39047,6 +39123,7 @@
             if (typeof cellDefine.style === 'function' ||
                 typeof cellDefine.icon === 'function' ||
                 cellDefine.define?.customRender ||
+                cellDefine.define?.customLayout ||
                 typeof cellDefine.define?.icon === 'function') {
                 return false;
             }
@@ -39070,6 +39147,7 @@
         if (typeof cellDefine.style === 'function' ||
             typeof cellDefine.icon === 'function' ||
             cellDefine.define?.customRender ||
+            cellDefine.define?.customLayout ||
             typeof cellDefine.define?.icon === 'function') {
             return false;
         }
@@ -39082,6 +39160,29 @@
         }
         return true;
     }
+    function checkPivotFixedStyleAndNoWrap(table, row) {
+        const { layoutMap } = table.internalProps;
+        if (table.internalProps.autoWrapText &&
+            (table.options.heightMode === 'autoHeight' || table.options.heightMode === 'adaptive')) {
+            return false;
+        }
+        const headerDefine = layoutMap.getHeader(table.rowHeaderLevelCount, row);
+        if (typeof headerDefine.style === 'function' ||
+            typeof headerDefine.icons === 'function' ||
+            headerDefine.define?.headerCustomRender ||
+            headerDefine.define?.headerCustomLayout ||
+            typeof headerDefine.define?.icon === 'function') {
+            return false;
+        }
+        const headerStyle = table._getCellStyle(table.rowHeaderLevelCount, row);
+        if (typeof headerStyle.padding === 'function' ||
+            typeof headerStyle.fontSize === 'function' ||
+            typeof headerStyle.lineHeight === 'function' ||
+            headerStyle.autoWrapText === true) {
+            return false;
+        }
+        return true;
+    }
     function fillRowsHeight(height, startRow, endRow, table, newHeights) {
         for (let row = startRow; row <= endRow; row++) {
             if (newHeights) {
@@ -39602,8 +39703,10 @@
         }
         else if (cellGroup.firstChild?.name === 'axis') {
             const axisConfig = scene.table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
+            const cellStyle = scene.table._getCellStyle(col, row);
+            const padding = getQuadProps(getProp('padding', cellStyle, col, row, scene.table));
             if (axisConfig) {
-                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, scene.table);
+                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, scene.table);
                 cellGroup.clear();
                 cellGroup.appendChild(axis.component);
                 axis.overlap();
@@ -40561,6 +40664,7 @@
         }
         const isTableGroup = role === 'table';
         const { shadowBlur, shadowOffsetX, shadowOffsetY, shadowColor, cornerRadius, borderColor, borderLineWidth, borderLineDash } = frameTheme;
+        let hasShadow = false;
         const groupAttributes = {};
         const rectAttributes = {
             pickable: false
@@ -40573,8 +40677,7 @@
             rectAttributes.stroke = true;
             rectAttributes.stroke = shadowColor;
             rectAttributes.lineWidth = 1;
-            rectAttributes.fill = true;
-            rectAttributes.fillOpacity = 0.01;
+            hasShadow = true;
         }
         if (borderLineWidth) {
             rectAttributes.stroke = true;
@@ -40616,12 +40719,32 @@
             rectAttributes.y = borderTop / 2;
             rectAttributes.pickable = false;
             if (isTableGroup) {
-                rectAttributes.x = group.attribute.x - borderLeft / 2;
-                rectAttributes.y = group.attribute.y - borderTop / 2;
+                rectAttributes.x = -borderLeft / 2;
+                rectAttributes.y = -borderTop / 2;
                 rectAttributes.width = group.attribute.width + borderLeft / 2 + borderRight / 2;
                 rectAttributes.height = group.attribute.height + borderTop / 2 + borderBottom / 2;
-                const borderRect = createRect(rectAttributes);
-                borderRect.name = 'table-border-rect';
+                let shadowRect;
+                let borderRect;
+                if (hasShadow) {
+                    rectAttributes.fill = 'white';
+                    rectAttributes.notAdjustPos = true;
+                    shadowRect = createRect(rectAttributes);
+                    borderRect = createGroup({
+                        x: group.attribute.x,
+                        y: group.attribute.y,
+                        width: group.attribute.width,
+                        height: group.attribute.height,
+                        fill: 'red',
+                        cornerRadius: group.attribute.cornerRadius,
+                        globalCompositeOperation: 'destination-out'
+                    });
+                    borderRect.name = 'table-border-rect';
+                    borderRect.addChild(shadowRect);
+                }
+                else {
+                    borderRect = createRect(rectAttributes);
+                    borderRect.name = 'table-border-rect';
+                }
                 group.parent.insertBefore(borderRect, group);
                 group.border = borderRect;
             }
@@ -40680,6 +40803,12 @@
             width: group.attribute.width - borderLeft / 2 - borderRight / 2,
             height: group.attribute.height - borderTop / 2 - borderBottom / 2
         });
+        if (group.border.type === 'group') {
+            group.border.firstChild.setAttributes({
+                width: group.attribute.width,
+                height: group.attribute.height
+            });
+        }
     }
 
     /*! *****************************************************************************
@@ -41306,8 +41435,9 @@
         useStyle = true;
         order = 0;
         drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke) {
-            const { lineWidth = groupAttribute.lineWidth, stroke = groupAttribute.stroke, lineDash = groupAttribute.lineDash, strokeArrayWidth = groupAttribute.strokeArrayWidth, strokeArrayColor = groupAttribute.strokeArrayColor } = group.attribute;
-            if (stroke &&
+            const { lineWidth = groupAttribute.lineWidth, stroke = groupAttribute.stroke, lineDash = groupAttribute.lineDash, strokeArrayWidth = groupAttribute.strokeArrayWidth, strokeArrayColor = groupAttribute.strokeArrayColor, notAdjustPos } = group.attribute;
+            if (notAdjustPos !== true &&
+                stroke &&
                 Array.isArray(lineDash) &&
                 !lineDash.length &&
                 !Array.isArray(strokeArrayColor) &&
@@ -41325,9 +41455,10 @@
         useStyle = true;
         order = 0;
         drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb) {
-            const { lineWidth = groupAttribute.lineWidth, stroke = groupAttribute.stroke, lineDash = groupAttribute.lineDash, strokeArrayWidth = groupAttribute.strokeArrayWidth, strokeArrayColor = groupAttribute.strokeArrayColor } = group.attribute;
+            const { lineWidth = groupAttribute.lineWidth, stroke = groupAttribute.stroke, lineDash = groupAttribute.lineDash, strokeArrayWidth = groupAttribute.strokeArrayWidth, strokeArrayColor = groupAttribute.strokeArrayColor, notAdjustPos } = group.attribute;
             const { width = groupAttribute.width, height = groupAttribute.height } = group.attribute;
-            if (stroke &&
+            if (notAdjustPos !== true &&
+                stroke &&
                 Array.isArray(lineDash) &&
                 !lineDash.length &&
                 !Array.isArray(strokeArrayColor) &&
@@ -41531,51 +41662,31 @@
                 newWidths[col] = table._adjustColWidth(col, maxWidth);
             }
             else {
-                table._setColWidth(col, maxWidth, false, true);
+                table._setColWidth(col, table._adjustColWidth(col, maxWidth), false, true);
             }
         }
         if (table.widthMode === 'adaptive') {
-            table._clearColRangeWidthsMap();
             const rowHeaderWidth = table.getColsWidth(0, table.rowHeaderLevelCount - 1);
             const rightHeaderWidth = table.isPivotChart() ? table.getRightFrozenColsWidth() : 0;
-            const totalDrawWidth = table.tableNoFrameWidth - rowHeaderWidth - rightHeaderWidth;
-            const startCol = table.rowHeaderLevelCount;
-            const endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount;
-            let actualWidth = 0;
-            for (let col = startCol; col < endCol; col++) {
-                actualWidth += update ? newWidths[col] : table.getColWidth(col);
-            }
-            const factor = totalDrawWidth / actualWidth;
-            for (let col = startCol; col < endCol; col++) {
-                let colWidth;
-                if (col === endCol - 1) {
-                    colWidth =
-                        totalDrawWidth -
-                            (update
-                                ? newWidths.reduce((acr, cur, index) => {
-                                    if (index >= startCol && index <= endCol - 2) {
-                                        return acr + cur;
-                                    }
-                                    return acr;
-                                }, 0)
-                                : table.getColsWidth(startCol, endCol - 2));
-                }
-                else {
-                    colWidth = Math.round((update ? newWidths[col] : table.getColWidth(col)) * factor);
-                }
-                if (update) {
-                    newWidths[col] = table._adjustColWidth(col, colWidth);
-                }
-                else {
-                    table._setColWidth(col, colWidth, false, true);
+            table.tableNoFrameWidth - rowHeaderWidth - rightHeaderWidth;
+            table._clearColRangeWidthsMap();
+            const canvasWidth = table.tableNoFrameWidth;
+            let actualHeaderWidth = 0;
+            for (let col = 0; col < table.colCount; col++) {
+                const colWidth = update ? newWidths[col] : table.getColWidth(col);
+                if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
+                    actualHeaderWidth += colWidth;
                 }
             }
+            const startCol = table.frozenColCount;
+            const endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount;
+            getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, update, newWidths, table);
         }
         else if (table.autoFillWidth) {
             table._clearColRangeWidthsMap();
             const canvasWidth = table.tableNoFrameWidth;
-            let actualWidth = 0;
             let actualHeaderWidth = 0;
+            let actualWidth = 0;
             for (let col = 0; col < table.colCount; col++) {
                 const colWidth = update ? newWidths[col] : table.getColWidth(col);
                 if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
@@ -41583,33 +41694,10 @@
                 }
                 actualWidth += colWidth;
             }
-            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] = table._adjustColWidth(col, colWidth);
-                    }
-                    else {
-                        table._setColWidth(col, colWidth, false, true);
-                    }
-                }
+            if (actualWidth < canvasWidth && actualWidth > actualHeaderWidth) {
+                const startCol = table.frozenColCount;
+                const endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount;
+                getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, update, newWidths, table);
             }
         }
         if (update) {
@@ -41856,6 +41944,46 @@
         }
         return widthDefined;
     }
+    function getAdaptiveWidth(totalDrawWidth, startCol, endColPlus1, update, newWidths, table) {
+        let actualWidth = 0;
+        const adaptiveColumns = [];
+        for (let col = startCol; col < endColPlus1; col++) {
+            const width = update ? newWidths[col] : table.getColWidth(col);
+            const maxWidth = table.getMaxColWidth(col);
+            const minWidth = table.getMinColWidth(col);
+            if (width !== maxWidth && width !== minWidth) {
+                actualWidth += width;
+                adaptiveColumns.push(col);
+            }
+            else {
+                totalDrawWidth -= width;
+            }
+        }
+        const factor = totalDrawWidth / actualWidth;
+        for (let i = 0; i < adaptiveColumns.length; i++) {
+            const col = adaptiveColumns[i];
+            let colWidth;
+            if (i === adaptiveColumns.length - 1) {
+                colWidth =
+                    totalDrawWidth -
+                        adaptiveColumns.reduce((acr, cur, index) => {
+                            if (cur !== col) {
+                                return acr + (update ? newWidths[cur] : table.getColWidth(cur));
+                            }
+                            return acr;
+                        }, 0);
+            }
+            else {
+                colWidth = Math.round((update ? newWidths[col] : table.getColWidth(col)) * factor);
+            }
+            if (update) {
+                newWidths[col] = table._adjustColWidth(col, colWidth);
+            }
+            else {
+                table._setColWidth(col, table._adjustColWidth(col, colWidth), false, true);
+            }
+        }
+    }
 
     const emptyGroup = new Group$1({});
     emptyGroup.role = 'empty';
@@ -42147,13 +42275,16 @@
     }
     function updatePartColPosition(startCol, endCol, direction, proxy) {
         for (let col = startCol; col <= endCol; col++) {
-            if (proxy.table.scenegraph.bodyGroup.childrenCount > 0) {
+            if (proxy.table.scenegraph.bodyGroup.childrenCount > 0 &&
+                proxy.table.scenegraph.bodyGroup.firstChild.type === 'group') {
                 updateColPosition(proxy.table.scenegraph.bodyGroup, direction, proxy);
             }
-            if (proxy.table.scenegraph.colHeaderGroup.childrenCount > 0) {
+            if (proxy.table.scenegraph.colHeaderGroup.childrenCount > 0 &&
+                proxy.table.scenegraph.colHeaderGroup.firstChild.type === 'group') {
                 updateColPosition(proxy.table.scenegraph.colHeaderGroup, direction, proxy);
             }
-            if (proxy.table.scenegraph.bottomFrozenGroup.childrenCount > 0) {
+            if (proxy.table.scenegraph.bottomFrozenGroup.childrenCount > 0 &&
+                proxy.table.scenegraph.bottomFrozenGroup.firstChild.type === 'group') {
                 updateColPosition(proxy.table.scenegraph.bottomFrozenGroup, direction, proxy);
             }
         }
@@ -42637,6 +42768,18 @@
             this.firstScreenRowLimit = this.bodyTopRow + Math.min(this.rowLimit, Math.ceil(heightLimit / defaultRowHeight));
             this.rowUpdatePos = this.bodyBottomRow;
         }
+        resize() {
+            const defaultColWidth = this.table.defaultColWidth;
+            this.taskColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth) * 1;
+            const widthLimit = this.table.tableNoFrameWidth * 5;
+            this.screenColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth);
+            this.firstScreenColLimit = this.bodyLeftCol + Math.min(this.colLimit, Math.ceil(widthLimit / defaultColWidth));
+            const defaultRowHeight = this.table.defaultRowHeight;
+            this.taskRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1;
+            const heightLimit = this.table.tableNoFrameHeight * 5;
+            this.screenRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight);
+            this.firstScreenRowLimit = this.bodyTopRow + Math.min(this.rowLimit, Math.ceil(heightLimit / defaultRowHeight));
+        }
         createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin) {
             createGroupForFirstScreen(cornerHeaderGroup, colHeaderGroup, rowHeaderGroup, rightFrozenGroup, bottomFrozenGroup, bodyGroup, xOrigin, yOrigin, this);
         }
@@ -43480,7 +43623,7 @@
             scene.proxy.updateCellGroups(scene.proxy.screenRowCount * 2);
             scene.proxy.progress();
         }
-        const newTotalHeight = table.getRowsHeight(table.frozenRowCount, table.rowCount - 1);
+        const newTotalHeight = table.getRowsHeight(table.frozenRowCount, table.rowCount - 1 - table.bottomFrozenRowCount);
         scene.updateContainerHeight(scene.table.frozenRowCount, newTotalHeight - scene.bodyGroup.attribute.height);
     }
     function removeRow(row, scene) {
@@ -43569,6 +43712,9 @@
         for (let col = 0; col < scene.table.colCount; col++) {
             const headerColGroup = scene.getColGroup(col, true);
             const colGroup = scene.getColGroup(col, false);
+            const bottomGroup = scene.getColGroupInBottom(col) ||
+                scene.getColGroupInLeftBottomCorner(col) ||
+                scene.getColGroupInRightTopCorner(col);
             if (!headerColGroup || !colGroup) {
                 continue;
             }
@@ -43593,6 +43739,17 @@
                 y += cellGroup.attribute.height;
             });
             newTotalHeight = y;
+            bottomGroup?.forEachChildren((cellGroup) => {
+                cellGroup.row = rowIndex;
+                const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
+                if (merge) {
+                    cellGroup.mergeStartCol = merge.start.col;
+                    cellGroup.mergeStartRow = merge.start.row;
+                    cellGroup.mergeEndCol = merge.end.col;
+                    cellGroup.mergeEndRow = merge.end.row;
+                }
+                rowIndex++;
+            });
         }
         return newTotalHeight;
     }
@@ -44264,7 +44421,9 @@
                         });
                         if (isAxisComponent) {
                             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(cell.col, cell.row);
-                            const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, table);
+                            const cellStyle = table._getCellStyle(cell.col, cell.row);
+                            const padding = getQuadProps(getProp('padding', cellStyle, cell.col, cell.row, table));
+                            const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, padding, table);
                             cell.clear();
                             cell.appendChild(axis.component);
                             axis.overlap();
@@ -45237,6 +45396,7 @@
             computeRowsHeight(this.table, 0, this.table.rowCount - 1, true, true);
         }
         resize() {
+            this.proxy.resize();
             if (this.table.widthMode === 'adaptive' || this.table.autoFillWidth) {
                 if (this.table.internalProps._widthResizedColMap.size === 0) {
                     this.recalculateColWidths();
@@ -45258,6 +45418,7 @@
                 this.table.autoFillHeight) {
                 this.updateChartSize(this.table.rowHeaderLevelCount);
             }
+            this.proxy.progress();
             this.updateNextFrame();
         }
         updateTableSize() {
@@ -51705,7 +51866,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.15.4";
+        version = "0.15.5-alpha.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -52740,6 +52901,7 @@
                 internalProps.releaseList = null;
             }
             this.scenegraph.stage.release();
+            this.scenegraph.proxy.release();
             const { parentElement } = internalProps.element;
             if (parentElement) {
                 parentElement.removeChild(internalProps.element);
@@ -53339,6 +53501,17 @@
                     return cacheStyle;
                 }
                 const hd = layoutMap.getHeader(col, row);
+                let paddingForAxis;
+                if (this.isPivotChart() && isTopOrBottomAxis(col, row, layoutMap)) {
+                    const chartColumn = layoutMap.getBody(col, this.rowHeaderLevelCount);
+                    const padding = chartColumn.style?.padding ?? this.theme.bodyStyle.padding;
+                    paddingForAxis = padding;
+                }
+                else if (this.isPivotChart() && isLeftOrRightAxis(col, row, layoutMap)) {
+                    const chartColumn = layoutMap.getBody(this.columnHeaderLevelCount, row);
+                    const padding = chartColumn.style?.padding ?? this.theme.bodyStyle.padding;
+                    paddingForAxis = padding;
+                }
                 if ((!hd || hd.isEmpty) &&
                     (layoutMap.isLeftBottomCorner(col, row) ||
                         layoutMap.isRightBottomCorner(col, row) ||
@@ -53348,7 +53521,7 @@
                 }
                 const styleClass = this.internalProps.headerHelper.getStyleClass(hd?.headerType || 'text');
                 if (layoutMap.isBottomFrozenRow(col, row) && this.theme.bottomFrozenStyle) {
-                    cacheStyle = of$1({}, this.theme.bottomFrozenStyle, {
+                    cacheStyle = of$1(paddingForAxis ? { padding: paddingForAxis } : {}, this.theme.bottomFrozenStyle, {
                         col,
                         row,
                         table: this,
@@ -53358,7 +53531,7 @@
                     }, styleClass, this.options.autoWrapText);
                 }
                 else if (layoutMap.isRightFrozenColumn(col, row) && this.theme.rightFrozenStyle) {
-                    cacheStyle = of$1({}, this.theme.rightFrozenStyle, {
+                    cacheStyle = of$1(paddingForAxis ? { padding: paddingForAxis } : {}, this.theme.rightFrozenStyle, {
                         col,
                         row,
                         table: this,
@@ -53369,6 +53542,9 @@
                 }
                 else {
                     const style = hd?.style || {};
+                    if (paddingForAxis) {
+                        style.padding = paddingForAxis;
+                    }
                     cacheStyle = of$1(style, layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row)
                         ? this.theme.headerStyle
                         : layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row)
@@ -54251,8 +54427,8 @@
         };
     }
 
-    let seqId = 0;
     class SimpleHeaderLayoutMap {
+        seqId = 0;
         _headerObjects;
         _headerObjectMap;
         _headerCellIds;
@@ -54760,7 +54936,7 @@
             const rowCells = this._newRow(row, hideColumnsSubHeader);
             column.forEach((hd) => {
                 const col = this._columns.length;
-                const id = seqId++;
+                const id = this.seqId++;
                 const cell = {
                     id,
                     title: hd.title ?? hd.caption,
@@ -54790,7 +54966,7 @@
                 else {
                     const colDef = hd;
                     this._columns.push({
-                        id: seqId++,
+                        id: this.seqId++,
                         field: colDef.field,
                         fieldKey: colDef.fieldKey,
                         fieldFormat: colDef.fieldFormat,
@@ -55909,6 +56085,7 @@
     }
 
     class DimensionTree {
+        sharedVar;
         sizeIncludeParent = false;
         rowExpandLevel;
         hierarchyType;
@@ -55925,10 +56102,11 @@
         };
         totalLevel = 0;
         dimensionKeys = new NumberMap();
-        constructor(tree, hierarchyType = 'grid', rowExpandLevel = undefined) {
+        constructor(tree, sharedVar, hierarchyType = 'grid', rowExpandLevel = undefined) {
             this.sizeIncludeParent = rowExpandLevel !== null && rowExpandLevel !== undefined;
             this.rowExpandLevel = rowExpandLevel;
             this.hierarchyType = hierarchyType;
+            this.sharedVar = sharedVar;
             this.reset(tree);
         }
         reset(tree, updateTreeNode = false) {
@@ -55944,7 +56122,7 @@
                 !this.dimensionKeys.contain(node.indicatorKey ? IndicatorDimensionKeyPlaceholder : node.dimensionKey) &&
                     this.dimensionKeys.put(node.level, node.indicatorKey ? IndicatorDimensionKeyPlaceholder : node.dimensionKey);
                 if (!node.id) {
-                    node.id = ++sharedVar.seqId;
+                    node.id = ++this.sharedVar.seqId;
                 }
             }
             let size = node.dimensionKey ? (this.sizeIncludeParent ? 1 : 0) : 0;
@@ -56104,11 +56282,158 @@
         });
         return count;
     }
+    function dealHeader(hd, _headerCellIds, results, roots, row, layoutMap) {
+        const id = hd.id;
+        const dimensionInfo = layoutMap.rowsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey) ??
+            layoutMap.columnsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey);
+        const indicatorInfo = layoutMap.indicatorsDefine?.find(indicator => {
+            if (typeof indicator === 'string') {
+                return false;
+            }
+            if (hd.indicatorKey) {
+                return indicator.indicatorKey === hd.indicatorKey;
+            }
+            return indicator.title === hd.value;
+        });
+        const cell = {
+            id,
+            title: hd.value ?? indicatorInfo?.title,
+            field: hd.dimensionKey,
+            style: typeof (indicatorInfo ?? dimensionInfo)?.headerStyle === 'function'
+                ? (indicatorInfo ?? dimensionInfo)?.headerStyle
+                : Object.assign({}, (indicatorInfo ?? dimensionInfo)?.headerStyle),
+            headerType: indicatorInfo?.headerType ?? dimensionInfo?.headerType ?? 'text',
+            headerIcon: indicatorInfo?.headerIcon ?? dimensionInfo?.headerIcon,
+            define: Object.assign({}, hd, indicatorInfo ?? dimensionInfo),
+            fieldFormat: indicatorInfo?.headerFormat ?? dimensionInfo?.headerFormat,
+            dropDownMenu: indicatorInfo?.dropDownMenu ?? dimensionInfo?.dropDownMenu,
+            pivotInfo: {
+                value: hd.value,
+                dimensionKey: hd.dimensionKey,
+                isPivotCorner: false
+            },
+            width: dimensionInfo?.width,
+            minWidth: dimensionInfo?.minWidth,
+            maxWidth: dimensionInfo?.maxWidth,
+            showSort: indicatorInfo?.showSort ?? dimensionInfo?.showSort,
+            description: dimensionInfo?.description
+        };
+        if (indicatorInfo) {
+            if (indicatorInfo.customRender) {
+                hd.customRender = indicatorInfo.customRender;
+            }
+            if (!isValid$5(layoutMap._indicators?.find(indicator => indicator.indicatorKey === indicatorInfo.indicatorKey))) {
+                layoutMap._indicators?.push({
+                    id: ++layoutMap.sharedVar.seqId,
+                    indicatorKey: indicatorInfo.indicatorKey,
+                    field: indicatorInfo.indicatorKey,
+                    fieldFormat: indicatorInfo?.format,
+                    cellType: indicatorInfo?.cellType ?? indicatorInfo?.columnType ?? 'text',
+                    chartModule: 'chartModule' in indicatorInfo ? indicatorInfo.chartModule : null,
+                    chartSpec: 'chartSpec' in indicatorInfo ? indicatorInfo.chartSpec : null,
+                    sparklineSpec: 'sparklineSpec' in indicatorInfo ? indicatorInfo.sparklineSpec : null,
+                    style: indicatorInfo?.style,
+                    icon: indicatorInfo?.icon,
+                    define: Object.assign({}, hd, indicatorInfo, {
+                        dragHeader: dimensionInfo?.dragHeader
+                    }),
+                    width: indicatorInfo?.width,
+                    minWidth: indicatorInfo?.minWidth,
+                    maxWidth: indicatorInfo?.maxWidth,
+                    disableColumnResize: indicatorInfo?.disableColumnResize
+                });
+            }
+        }
+        else if (hd.indicatorKey) {
+            if (!isValid$5(layoutMap._indicators?.find(indicator => indicator.indicatorKey === hd.indicatorKey))) {
+                layoutMap._indicators?.push({
+                    id: ++layoutMap.sharedVar.seqId,
+                    indicatorKey: hd.indicatorKey,
+                    field: hd.indicatorKey,
+                    cellType: 'text',
+                    define: Object.assign({}, hd)
+                });
+            }
+        }
+        results[id] = cell;
+        layoutMap._headerObjects[id] = cell;
+        _headerCellIds[row][layoutMap.colIndex] = id;
+        for (let r = row - 1; r >= 0; r--) {
+            _headerCellIds[r][layoutMap.colIndex] = roots[r];
+        }
+        if (hd.children?.length >= 1) {
+            layoutMap
+                ._addHeaders(_headerCellIds, row + 1, hd.children ?? [], [...roots, id])
+                .forEach(c => results.push(c));
+        }
+        else {
+            for (let r = row + 1; r < _headerCellIds.length; r++) {
+                _headerCellIds[r][layoutMap.colIndex] = id;
+            }
+            layoutMap.colIndex++;
+        }
+    }
+    function dealHeaderForTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, show, dimensions, layoutMap) {
+        const id = hd.id;
+        const dimensionInfo = dimensions.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey);
+        const cell = {
+            id,
+            title: hd.value,
+            field: hd.dimensionKey,
+            style: hd.level + 1 === totalLevel || typeof dimensionInfo?.headerStyle === 'function'
+                ? dimensionInfo?.headerStyle
+                : Object.assign({}, dimensionInfo?.headerStyle, { textAlign: 'left' }),
+            headerType: dimensionInfo?.headerType ?? 'text',
+            headerIcon: dimensionInfo?.headerIcon,
+            define: Object.assign(hd, {
+                linkJump: dimensionInfo?.linkJump,
+                linkDetect: dimensionInfo?.linkDetect,
+                templateLink: dimensionInfo?.templateLink,
+                keepAspectRatio: dimensionInfo?.keepAspectRatio ?? false,
+                imageAutoSizing: dimensionInfo?.imageAutoSizing,
+                headerCustomRender: dimensionInfo?.headerCustomRender,
+                headerCustomLayout: dimensionInfo?.headerCustomLayout,
+                dragHeader: dimensionInfo?.dragHeader
+            }),
+            fieldFormat: dimensionInfo?.headerFormat,
+            dropDownMenu: dimensionInfo?.dropDownMenu,
+            pivotInfo: {
+                value: hd.value,
+                dimensionKey: hd.dimensionKey,
+                isPivotCorner: false
+            },
+            hierarchyLevel: hd.level,
+            dimensionTotalLevel: totalLevel,
+            hierarchyState: hd.level + 1 === totalLevel ? undefined : hd.hierarchyState,
+            width: dimensionInfo?.width,
+            minWidth: dimensionInfo?.minWidth,
+            maxWidth: dimensionInfo?.maxWidth,
+            parentCellId: roots[roots.length - 1]
+        };
+        results[id] = cell;
+        layoutMap._headerObjects[id] = cell;
+        _headerCellIds[row][layoutMap.colIndex] = id;
+        for (let r = row - 1; r >= 0; r--) {
+            _headerCellIds[r][layoutMap.colIndex] = roots[r];
+        }
+        if (hd.hierarchyState === HierarchyState.expand && hd.children?.length >= 1) {
+            show && layoutMap.colIndex++;
+            layoutMap
+                ._addHeadersForTreeMode(_headerCellIds, row, hd.children ?? [], [...roots, id], totalLevel, show && hd.hierarchyState === HierarchyState.expand, dimensions)
+                .forEach(c => results.push(c));
+        }
+        else {
+            show && layoutMap.colIndex++;
+            for (let r = row + 1; r < _headerCellIds.length; r++) {
+                _headerCellIds[r][layoutMap.colIndex] = id;
+            }
+        }
+    }
 
-    const sharedVar = { seqId: 0 };
-    let colIndex = 0;
     const defaultDimension = { startInTotal: 0, level: 0 };
     class PivotHeaderLayoutMap {
+        sharedVar;
+        colIndex = 0;
         _showHeader = true;
         rowDimensionTree;
         columnDimensionTree;
@@ -56122,6 +56447,8 @@
         _rowHeaderCellIds = [];
         _rowHeaderCellIds_FULL = [];
         _columnWidths = [];
+        _columnHeaderLevelCount;
+        _rowHeaderLevelCount;
         rowsDefine;
         columnsDefine;
         indicatorsDefine;
@@ -56145,7 +56472,6 @@
         colDimensionKeys = [];
         indicatorKeys = [];
         indicatorDimensionKey = IndicatorDimensionKeyPlaceholder;
-        _cellRangeMap;
         _CellHeaderPathMap;
         _table;
         extensionRows;
@@ -56163,12 +56489,12 @@
         _chartItemBandSize;
         _chartPadding;
         constructor(table, dataset) {
+            this.sharedVar = { seqId: 0 };
             this._table = table;
             if (table.options.rowHierarchyType === 'tree') {
                 this.extensionRows = table.options.extensionRows;
             }
             this.dataset = dataset;
-            this._cellRangeMap = new Map();
             this._CellHeaderPathMap = new Map();
             this.rowTree = table.internalProps.rowTree;
             this.columnTree = table.internalProps.columnTree;
@@ -56226,16 +56552,17 @@
                     this.indicatorKeys.push(indicator.indicatorKey);
                 }
             });
-            this.columnDimensionTree = new DimensionTree(this.columnTree ?? []);
-            this.rowDimensionTree = new DimensionTree(this.rowTree ?? [], this.rowHierarchyType, this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined);
+            this.columnDimensionTree = new DimensionTree(this.columnTree ?? [], this.sharedVar);
+            this.rowDimensionTree = new DimensionTree(this.rowTree ?? [], this.sharedVar, this.rowHierarchyType, this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined);
             this.colDimensionKeys = this.columnDimensionTree.dimensionKeys.valueArr();
             this.rowDimensionKeys = this.rowDimensionTree.dimensionKeys.valueArr();
             this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(this.rowDimensionKeys);
+            this.resetRowHeaderLevelCount();
             if (this.columnDimensionTree.tree.children?.length >= 1) {
                 this.columnHeaderObjs = this._addHeaders(this._columnHeaderCellIds, 0, this.columnDimensionTree.tree.children, []);
             }
             if (this.columnHeaderTitle) {
-                const id = ++sharedVar.seqId;
+                const id = ++this.sharedVar.seqId;
                 const firstRowIds = Array(this.colCount - this.rowHeaderLevelCount).fill(id);
                 this._columnHeaderCellIds.unshift(firstRowIds);
                 const cell = {
@@ -56258,7 +56585,7 @@
                 this.columnHeaderObjs.push(cell);
                 this._headerObjects[id] = cell;
             }
-            colIndex = 0;
+            this.colIndex = 0;
             if (this.rowDimensionTree.tree.children?.length >= 1) {
                 this.rowHeaderObjs =
                     this.rowHierarchyType === 'tree'
@@ -56266,7 +56593,7 @@
                         : this._addHeaders(this._rowHeaderCellIds_FULL, 0, this.rowDimensionTree.tree.children, []);
             }
             if (this.rowHeaderTitle) {
-                const id = ++sharedVar.seqId;
+                const id = ++this.sharedVar.seqId;
                 const firstColIds = Array(this._rowHeaderCellIds_FULL[0]?.length ?? this.rowDimensionTree.tree.size).fill(id);
                 this._rowHeaderCellIds_FULL.unshift(firstColIds);
                 const cell = {
@@ -56289,6 +56616,17 @@
                 this.rowHeaderObjs.push(cell);
                 this._headerObjects[id] = cell;
             }
+            if (this._table.isPivotChart()) {
+                this.hasTwoIndicatorAxes = this._indicators.some(indicatorObject => {
+                    if (indicatorObject.chartSpec &&
+                        indicatorObject.chartSpec.series &&
+                        indicatorObject.chartSpec.series.length > 1) {
+                        return true;
+                    }
+                    return false;
+                });
+            }
+            this.resetColumnHeaderLevelCount();
             this._rowHeaderCellIds_FULL = transpose(this._rowHeaderCellIds_FULL);
             if (table.options.rowHierarchyType === 'tree' && this.extensionRows?.length >= 1) {
                 this.generateExtensionRowTree();
@@ -56306,16 +56644,6 @@
                     this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(rowKeys);
                 });
             }
-            if (this._table.isPivotChart()) {
-                this.hasTwoIndicatorAxes = this._indicators.some(indicatorObject => {
-                    if (indicatorObject.chartSpec &&
-                        indicatorObject.chartSpec.series &&
-                        indicatorObject.chartSpec.series.length > 1) {
-                        return true;
-                    }
-                    return false;
-                });
-            }
             if (this.cornerSetting.titleOnDimension === 'column') {
                 this.cornerHeaderObjs = this._addCornerHeaders(this.columnHeaderTitle ? [''].concat(this.colDimensionKeys) : this.colDimensionKeys, this.columnsDefine);
             }
@@ -56338,7 +56666,7 @@
             else {
                 this.cornerHeaderObjs = this._addCornerHeaders(null, undefined);
             }
-            colIndex = 0;
+            this.colIndex = 0;
             this._headerObjectMap = this._headerObjects.reduce((o, e) => {
                 o[e.id] = e;
                 return o;
@@ -56391,9 +56719,10 @@
             this.setColumnWidths();
         }
         _addHeaders(_headerCellIds, row, header, roots) {
+            const _this = this;
             function _newRow(row) {
                 const newRow = (_headerCellIds[row] = []);
-                if (colIndex === 0) {
+                if (_this.colIndex === 0) {
                     return newRow;
                 }
                 const prev = _headerCellIds[row - 1];
@@ -56406,101 +56735,17 @@
             if (!_headerCellIds[row]) {
                 _newRow(row);
             }
-            header.forEach(hd => {
-                const id = hd.id;
-                const dimensionInfo = this.rowsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey) ??
-                    this.columnsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey);
-                const indicatorInfo = this.indicatorsDefine?.find(indicator => {
-                    if (typeof indicator === 'string') {
-                        return false;
-                    }
-                    if (hd.indicatorKey) {
-                        return indicator.indicatorKey === hd.indicatorKey;
-                    }
-                    return indicator.title === hd.value;
-                });
-                const cell = {
-                    id,
-                    title: hd.value ?? indicatorInfo?.title,
-                    field: hd.dimensionKey,
-                    style: typeof (indicatorInfo ?? dimensionInfo)?.headerStyle === 'function'
-                        ? (indicatorInfo ?? dimensionInfo)?.headerStyle
-                        : Object.assign({}, (indicatorInfo ?? dimensionInfo)?.headerStyle),
-                    headerType: indicatorInfo?.headerType ?? dimensionInfo?.headerType ?? 'text',
-                    headerIcon: indicatorInfo?.headerIcon ?? dimensionInfo?.headerIcon,
-                    define: Object.assign({}, hd, indicatorInfo ?? dimensionInfo),
-                    fieldFormat: indicatorInfo?.headerFormat ?? dimensionInfo?.headerFormat,
-                    dropDownMenu: indicatorInfo?.dropDownMenu ?? dimensionInfo?.dropDownMenu,
-                    pivotInfo: {
-                        value: hd.value,
-                        dimensionKey: hd.dimensionKey,
-                        isPivotCorner: false
-                    },
-                    width: dimensionInfo?.width,
-                    minWidth: dimensionInfo?.minWidth,
-                    maxWidth: dimensionInfo?.maxWidth,
-                    showSort: indicatorInfo?.showSort ?? dimensionInfo?.showSort,
-                    description: dimensionInfo?.description
-                };
-                if (indicatorInfo) {
-                    if (indicatorInfo.customRender) {
-                        hd.customRender = indicatorInfo.customRender;
-                    }
-                    if (!isValid$5(this._indicators?.find(indicator => indicator.indicatorKey === indicatorInfo.indicatorKey))) {
-                        this._indicators?.push({
-                            id: ++sharedVar.seqId,
-                            indicatorKey: indicatorInfo.indicatorKey,
-                            field: indicatorInfo.indicatorKey,
-                            fieldFormat: indicatorInfo?.format,
-                            cellType: indicatorInfo?.cellType ?? indicatorInfo?.columnType ?? 'text',
-                            chartModule: 'chartModule' in indicatorInfo ? indicatorInfo.chartModule : null,
-                            chartSpec: 'chartSpec' in indicatorInfo ? indicatorInfo.chartSpec : null,
-                            sparklineSpec: 'sparklineSpec' in indicatorInfo ? indicatorInfo.sparklineSpec : null,
-                            style: indicatorInfo?.style,
-                            icon: indicatorInfo?.icon,
-                            define: Object.assign({}, hd, indicatorInfo, {
-                                dragHeader: dimensionInfo?.dragHeader
-                            }),
-                            width: indicatorInfo?.width,
-                            minWidth: indicatorInfo?.minWidth,
-                            maxWidth: indicatorInfo?.maxWidth,
-                            disableColumnResize: indicatorInfo?.disableColumnResize
-                        });
-                    }
-                }
-                else if (hd.indicatorKey) {
-                    if (!isValid$5(this._indicators?.find(indicator => indicator.indicatorKey === hd.indicatorKey))) {
-                        this._indicators?.push({
-                            id: ++sharedVar.seqId,
-                            indicatorKey: hd.indicatorKey,
-                            field: hd.indicatorKey,
-                            cellType: 'text',
-                            define: Object.assign({}, hd)
-                        });
-                    }
-                }
-                results[id] = cell;
-                this._headerObjects[id] = cell;
-                _headerCellIds[row][colIndex] = id;
-                for (let r = row - 1; r >= 0; r--) {
-                    _headerCellIds[r][colIndex] = roots[r];
-                }
-                if (hd.children?.length >= 1) {
-                    this._addHeaders(_headerCellIds, row + 1, hd.children ?? [], [...roots, id]).forEach(c => results.push(c));
-                }
-                else {
-                    for (let r = row + 1; r < _headerCellIds.length; r++) {
-                        _headerCellIds[r][colIndex] = id;
-                    }
-                    colIndex++;
-                }
-            });
+            for (let i = 0; i < header.length; i++) {
+                const hd = header[i];
+                dealHeader(hd, _headerCellIds, results, roots, row, this);
+            }
             return results;
         }
         _addHeadersForTreeMode(_headerCellIds, row, header, roots, totalLevel, show, dimensions) {
+            const _this = this;
             function _newRow(row) {
                 const newRow = (_headerCellIds[row] = []);
-                if (colIndex === 0) {
+                if (_this.colIndex === 0) {
                     return newRow;
                 }
                 const prev = _headerCellIds[row - 1];
@@ -56513,67 +56758,17 @@
             if (!_headerCellIds[row]) {
                 _newRow(row);
             }
-            header.forEach(hd => {
-                const id = hd.id;
-                const dimensionInfo = dimensions.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === hd.dimensionKey);
-                const cell = {
-                    id,
-                    title: hd.value,
-                    field: hd.dimensionKey,
-                    style: hd.level + 1 === totalLevel || typeof dimensionInfo?.headerStyle === 'function'
-                        ? dimensionInfo?.headerStyle
-                        : Object.assign({}, dimensionInfo?.headerStyle, { textAlign: 'left' }),
-                    headerType: dimensionInfo?.headerType ?? 'text',
-                    headerIcon: dimensionInfo?.headerIcon,
-                    define: Object.assign(hd, {
-                        linkJump: dimensionInfo?.linkJump,
-                        linkDetect: dimensionInfo?.linkDetect,
-                        templateLink: dimensionInfo?.templateLink,
-                        keepAspectRatio: dimensionInfo?.keepAspectRatio ?? false,
-                        imageAutoSizing: dimensionInfo?.imageAutoSizing,
-                        headerCustomRender: dimensionInfo?.headerCustomRender,
-                        headerCustomLayout: dimensionInfo?.headerCustomLayout,
-                        dragHeader: dimensionInfo?.dragHeader
-                    }),
-                    fieldFormat: dimensionInfo?.headerFormat,
-                    dropDownMenu: dimensionInfo?.dropDownMenu,
-                    pivotInfo: {
-                        value: hd.value,
-                        dimensionKey: hd.dimensionKey,
-                        isPivotCorner: false
-                    },
-                    hierarchyLevel: hd.level,
-                    dimensionTotalLevel: totalLevel,
-                    hierarchyState: hd.level + 1 === totalLevel ? undefined : hd.hierarchyState,
-                    width: dimensionInfo?.width,
-                    minWidth: dimensionInfo?.minWidth,
-                    maxWidth: dimensionInfo?.maxWidth,
-                    parentCellId: roots[roots.length - 1]
-                };
-                results[id] = cell;
-                this._headerObjects[id] = cell;
-                _headerCellIds[row][colIndex] = id;
-                for (let r = row - 1; r >= 0; r--) {
-                    _headerCellIds[r][colIndex] = roots[r];
-                }
-                if (hd.hierarchyState === HierarchyState.expand && hd.children?.length >= 1) {
-                    show && colIndex++;
-                    this._addHeadersForTreeMode(_headerCellIds, row, hd.children ?? [], [...roots, id], totalLevel, show && hd.hierarchyState === HierarchyState.expand, dimensions).forEach(c => results.push(c));
-                }
-                else {
-                    show && colIndex++;
-                    for (let r = row + 1; r < _headerCellIds.length; r++) {
-                        _headerCellIds[r][colIndex] = id;
-                    }
-                }
-            });
+            for (let i = 0; i < header.length; i++) {
+                const hd = header[i];
+                dealHeaderForTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, show, dimensions, this);
+            }
             return results;
         }
         _addCornerHeaders(dimensionKeys, dimensions) {
             const results = [];
             if (dimensionKeys) {
                 dimensionKeys.forEach((dimensionKey, key) => {
-                    const id = ++sharedVar.seqId;
+                    const id = ++this.sharedVar.seqId;
                     const dimensionInfo = dimensions.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey);
                     const cell = {
                         id,
@@ -56621,7 +56816,7 @@
                 });
             }
             else {
-                const id = ++sharedVar.seqId;
+                const id = ++this.sharedVar.seqId;
                 const cell = {
                     id,
                     title: '',
@@ -56653,7 +56848,7 @@
                 this._rowHeaderCellIds_FULL = [];
                 old_rowHeaderCellIds.forEach((row_ids, index) => {
                     const key = row_ids[row_ids.length - 1];
-                    colIndex = 0;
+                    this.colIndex = 0;
                     let tree;
                     if (typeof extensionRow.rowTree === 'function') {
                         const fullCellIds = this.findFullCellIds(row_ids);
@@ -56670,7 +56865,7 @@
                         rowExtensionDimensionTree = this._rowHeaderExtensionTree[key];
                     }
                     else {
-                        rowExtensionDimensionTree = new DimensionTree(tree ?? [], this.rowHierarchyType, undefined);
+                        rowExtensionDimensionTree = new DimensionTree(tree ?? [], this.sharedVar, this.rowHierarchyType, undefined);
                         this._rowHeaderExtensionTree[key] = rowExtensionDimensionTree;
                     }
                     const extensionRowTreeHeaderIds = [];
@@ -56964,13 +57159,14 @@
         get headerLevelCount() {
             return this.columnHeaderLevelCount;
         }
-        get columnHeaderLevelCount() {
+        resetColumnHeaderLevelCount() {
             if (this.showHeader && this.showColumnHeader) {
                 if (this._table.isPivotChart() &&
                     this.indicatorsAsCol &&
                     !this.dataset?.colKeys?.length &&
                     !this.hasTwoIndicatorAxes) {
-                    return 0;
+                    this.columnHeaderLevelCount = 0;
+                    return;
                 }
                 let count = this.indicatorsAsCol
                     ? this.hideIndicatorName
@@ -56985,33 +57181,49 @@
                 if (this._table.isPivotChart() && this.indicatorsAsCol && !this.hasTwoIndicatorAxes) {
                     count -= 1;
                 }
-                return count;
+                this.columnHeaderLevelCount = count;
+                return;
             }
-            return 0;
+            this.columnHeaderLevelCount = 0;
+            return;
         }
-        get rowHeaderLevelCount() {
+        resetRowHeaderLevelCount() {
             if (this.showHeader && this.showRowHeader) {
                 if (this.rowHierarchyType === 'tree') {
                     const extensionRowCount = this.extensionRows?.length ?? 0;
                     if (this.rowHeaderTitle) {
-                        return 2 + extensionRowCount;
+                        this.rowHeaderLevelCount = 2 + extensionRowCount;
+                        return;
                     }
-                    return 1 + extensionRowCount;
+                    this.rowHeaderLevelCount = 1 + extensionRowCount;
+                    return;
                 }
                 const rowLevelCount = this.rowDimensionKeys.length;
-                let count = this.indicatorsAsCol
-                    ? rowLevelCount
-                    : this.hideIndicatorName
-                        ? this.rowDimensionKeys[this.rowDimensionKeys.length - 1] === this.indicatorDimensionKey
-                            ? rowLevelCount - 1
-                            : rowLevelCount
-                        : rowLevelCount;
+                let count = rowLevelCount;
+                if (this.indicatorsAsCol) ;
+                else if (this.hideIndicatorName && this.rowDimensionKeys[0] === this.indicatorDimensionKey) {
+                    count = rowLevelCount - 1;
+                }
                 if (this.rowHeaderTitle) {
                     count += 1;
                 }
-                return count;
+                this.rowHeaderLevelCount = count;
+                return;
             }
-            return this.indicatorsAsCol ? 0 : this.hideIndicatorName ? 0 : 1;
+            this.rowHeaderLevelCount = this.indicatorsAsCol ? 0 : this.hideIndicatorName ? 0 : 1;
+            return;
+        }
+        get columnHeaderLevelCount() {
+            return this._columnHeaderLevelCount;
+        }
+        set columnHeaderLevelCount(count) {
+            this._columnHeaderLevelCount = count;
+        }
+        get rowHeaderLevelCount() {
+            return this._rowHeaderLevelCount;
+        }
+        set rowHeaderLevelCount(count) {
+            this._rowHeaderLevelCount = count;
         }
         get colCount() {
             return (this.columnDimensionTree.tree.size + this.rowHeaderLevelCount + this.rightHeaderColCount);
@@ -57178,9 +57390,6 @@
             if (this.isRightFrozenColumn(col, row) || this.isBottomFrozenRow(col, row)) {
                 return result;
             }
-            if (this._cellRangeMap.has(`${col}-${row}`)) {
-                return this._cellRangeMap.get(`${col}-${row}`);
-            }
             if (this.isHeader(col, row) && col !== -1 && row !== -1) {
                 const id = this.getCellId(col, row);
                 for (let c = col - 1; c >= 0; c--) {
@@ -57208,7 +57417,6 @@
                     result.end.row = r;
                 }
             }
-            this._cellRangeMap.set(`${col}-${row}`, result);
             return result;
         }
         isCellRangeEqual(col, row, targetCol, targetRow) {
@@ -57397,7 +57605,7 @@
             this._rowHeaderCellIds_FULL = [];
             this.rowHeaderObjs = this._addHeadersForTreeMode(this._rowHeaderCellIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, true, this.rowsDefine);
             if (this.rowHeaderTitle) {
-                const id = ++sharedVar.seqId;
+                const id = ++this.sharedVar.seqId;
                 const firstColIds = Array(this.rowCount - this.columnHeaderLevelCount).fill(id);
                 this._rowHeaderCellIds_FULL.unshift(firstColIds);
                 const cell = {
@@ -57426,13 +57634,12 @@
             if (this.rowHierarchyType === 'tree' && this.extensionRows?.length >= 1) {
                 this.generateExtensionRowTree();
             }
-            colIndex = 0;
+            this.colIndex = 0;
             this._headerObjectMap = this._headerObjects.reduce((o, e) => {
                 o[e.id] = e;
                 return o;
             }, {});
             this._CellHeaderPathMap = new Map();
-            this._cellRangeMap = new Map();
             const diffCell = diffCellAddress(col, row, oldRowHeaderCellIds.map(oldCellId => oldCellId[col]), this._rowHeaderCellIds_FULL.map(newCellId => newCellId[col]), oldRowHeaderCellPositons, this);
             this._rowHeaderCellIds = this._rowHeaderCellIds_FULL;
             return diffCell;
@@ -57650,7 +57857,6 @@
                     this.columnDimensionTree.movePosition(source.row, sourceCellRange.start.col - this.rowHeaderLevelCount, targetIndex - this.rowHeaderLevelCount);
                     this.columnDimensionTree.reset(this.columnDimensionTree.tree.children, true);
                     this._CellHeaderPathMap = new Map();
-                    this._cellRangeMap = new Map();
                     return {
                         sourceIndex: sourceCellRange.start.col,
                         targetIndex,
@@ -57684,7 +57890,6 @@
                     this.rowDimensionTree.movePosition(this.getCellHeaderPathsWidthTreeNode(source.col, source.row).rowHeaderPaths.length - 1, sourceCellRange.start.row - this.columnHeaderLevelCount, targetIndex + (target.row > source.row ? sourceRowHeaderNode.size - 1 : 0));
                     this.rowDimensionTree.reset(this.rowDimensionTree.tree.children, true);
                     this._CellHeaderPathMap = new Map();
-                    this._cellRangeMap = new Map();
                     return {
                         sourceIndex: sourceCellRange.start.row,
                         targetIndex: targetIndex + this.columnHeaderLevelCount,
@@ -57987,7 +58192,6 @@
             return undefined;
         }
         clearCellRangeMap() {
-            this._cellRangeMap.clear();
             this._CellHeaderPathMap = new Map();
         }
         getDimensionKeyInChartSpec(_col, _row) {
@@ -61841,7 +62045,7 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.15.4";
+    const version = "0.15.5-alpha.2";
     function getIcons() {
         return get$2();
     }