@visactor/vtable 0.16.4-alpha.1 → 0.17.0

package/dist/vtable.js

@@ -55044,7 +55044,7 @@
             let actualHeaderHeight = 0;
             for (let row = 0; row < table.rowCount; row++) {
                 const rowHeight = update ? newHeights[row] : table.getRowHeight(row);
-                if (row < table.frozenRowCount || row >= table.rowCount - table.bottomFrozenRowCount) {
+                if (row < table.frozenRowCount || (table.isPivotChart() && row >= table.rowCount - table.bottomFrozenRowCount)) {
                     actualHeaderHeight += rowHeight;
                 }
                 actualHeight += rowHeight;
@@ -55285,8 +55285,14 @@
         let iconInlineFrontHeight = 0;
         const iconInlineEnd = [];
         let iconInlineEndHeight = 0;
-        const define = table.getBodyColumnDefine(col, row);
-        const mayHaveIcon = table.getCellLocation(col, row) !== 'body' ? true : !!define?.icon || !!define?.tree;
+        let mayHaveIcon = false;
+        if (table.getCellLocation(col, row) !== 'body') {
+            mayHaveIcon = true;
+        }
+        else {
+            const define = table.getBodyColumnDefine(col, row);
+            mayHaveIcon = !!define?.icon || !!define?.tree;
+        }
         if (mayHaveIcon) {
             const icons = table.getCellIcons(col, row);
             icons?.forEach(icon => {
@@ -57758,7 +57764,7 @@
             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) {
+                if (col < table.frozenColCount || (table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount)) {
                     actualHeaderWidth += colWidth;
                 }
                 actualWidth += colWidth;
@@ -57949,8 +57955,14 @@
         const cellValue = table.getCellValue(col, row);
         const actStyle = table._getCellStyle(col, row);
         let iconWidth = 0;
-        const define = table.getBodyColumnDefine(col, row);
-        const mayHaveIcon = table.getCellLocation(col, row) !== 'body' ? true : !!define?.icon || !!define?.tree;
+        let mayHaveIcon = false;
+        if (table.getCellLocation(col, row) !== 'body') {
+            mayHaveIcon = true;
+        }
+        else {
+            const define = table.getBodyColumnDefine(col, row);
+            mayHaveIcon = !!define?.icon || !!define?.tree;
+        }
         if (mayHaveIcon) {
             const icons = table.getCellIcons(col, row);
             icons?.forEach(icon => {
@@ -58020,7 +58032,7 @@
         }
         return widthDefined;
     }
-    function getAdaptiveWidth(totalDrawWidth, startCol, endColPlus1, update, newWidths, table) {
+    function getAdaptiveWidth(totalDrawWidth, startCol, endColPlus1, update, newWidths, table, fromScenegraph) {
         let actualWidth = 0;
         const adaptiveColumns = [];
         for (let col = startCol; col < endColPlus1; col++) {
@@ -58055,6 +58067,9 @@
             if (update) {
                 newWidths[col] = table._adjustColWidth(col, colWidth);
             }
+            else if (fromScenegraph) {
+                table.scenegraph.setColWidth(col, table._adjustColWidth(col, colWidth));
+            }
             else {
                 table._setColWidth(col, table._adjustColWidth(col, colWidth), false, true);
             }
@@ -59461,24 +59476,39 @@
                                             ? scene.bottomFrozenGroup
                                             : scene.rightBottomCornerGroup);
         }
-        const diffSize = Math.ceil(selectComp.rect.attribute.lineWidth / 2);
+        let diffSize = 0;
+        if (typeof selectComp.rect.attribute.lineWidth === 'number') {
+            diffSize = Math.ceil(selectComp.rect.attribute.lineWidth / 2);
+        }
         if (endCol === scene.table.colCount - 1) {
+            if (Array.isArray(selectComp.rect.attribute.lineWidth)) {
+                diffSize = Math.ceil((selectComp.rect.attribute.lineWidth[1] ?? 0) / 2);
+            }
             selectComp.rect.setAttributes({
                 width: selectComp.rect.attribute.width - diffSize
             });
         }
         if (startCol === 0) {
+            if (Array.isArray(selectComp.rect.attribute.lineWidth)) {
+                diffSize = Math.ceil((selectComp.rect.attribute.lineWidth[3] ?? 0) / 2);
+            }
             selectComp.rect.setAttributes({
                 x: selectComp.rect.attribute.x + diffSize,
                 width: selectComp.rect.attribute.width - diffSize
             });
         }
         if (endRow === scene.table.rowCount - 1) {
+            if (Array.isArray(selectComp.rect.attribute.lineWidth)) {
+                diffSize = Math.ceil((selectComp.rect.attribute.lineWidth[2] ?? 0) / 2);
+            }
             selectComp.rect.setAttributes({
                 height: selectComp.rect.attribute.height - diffSize
             });
         }
         if (startRow === 0) {
+            if (Array.isArray(selectComp.rect.attribute.lineWidth)) {
+                diffSize = Math.ceil((selectComp.rect.attribute.lineWidth[0] ?? 0) / 2);
+            }
             selectComp.rect.setAttributes({
                 y: selectComp.rect.attribute.y + diffSize,
                 height: selectComp.rect.attribute.height - diffSize
@@ -59789,7 +59819,7 @@
         if (addRows.length) {
             if (!isNumber$7(updateAfter)) {
                 const minRow = Math.min(...addRows);
-                scene.proxy.rowUpdatePos = minRow;
+                scene.proxy.rowUpdatePos = Math.min(minRow, scene.proxy.rowUpdatePos);
             }
             scene.proxy.rowUpdateDirection = 'up';
             scene.proxy.updateCellGroups(scene.proxy.screenRowCount * 2);
@@ -62161,50 +62191,35 @@
         dealWidthMode() {
             const table = this.table;
             if (table.widthMode === 'adaptive') {
-                const totalDrawWidth = table.tableNoFrameWidth - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
-                let actualWidth = 0;
-                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
-                    actualWidth += table.getColWidth(col);
-                }
-                const factor = totalDrawWidth / actualWidth;
-                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
-                    let colWidth;
-                    if (col === table.colCount - table.rightFrozenColCount - 1) {
-                        colWidth =
-                            totalDrawWidth - table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2);
-                    }
-                    else {
-                        colWidth = Math.round(table.getColWidth(col) * factor);
+                table._clearColRangeWidthsMap();
+                const canvasWidth = table.tableNoFrameWidth;
+                let actualHeaderWidth = 0;
+                for (let col = 0; col < table.colCount; col++) {
+                    const colWidth = table.getColWidth(col);
+                    if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
+                        actualHeaderWidth += colWidth;
                     }
-                    this.setColWidth(col, colWidth);
                 }
+                const startCol = table.frozenColCount;
+                const endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount;
+                getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, false, [], table, true);
             }
             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 = table.getColWidth(col);
-                    if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
+                    if (col < table.frozenColCount || (table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount)) {
                         actualHeaderWidth += colWidth;
                     }
                     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 -
-                                    table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2);
-                        }
-                        else {
-                            colWidth = Math.round(table.getColWidth(col) * factor);
-                        }
-                        this.setColWidth(col, colWidth);
-                    }
+                if (actualWidth < canvasWidth && actualWidth > actualHeaderWidth) {
+                    const startCol = table.frozenColCount;
+                    const endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount;
+                    getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, false, [], table, true);
                 }
             }
             let bodyWidth = 0;
@@ -62238,18 +62253,20 @@
             const table = this.table;
             if (table.heightMode === 'adaptive') {
                 table._clearRowRangeHeightsMap();
-                const totalDrawHeight = table.tableNoFrameHeight - table.getFrozenRowsHeight() - table.getBottomFrozenRowsHeight();
+                const columnHeaderHeight = table.getRowsHeight(0, table.columnHeaderLevelCount - 1);
+                const bottomHeaderHeight = table.isPivotChart() ? table.getBottomFrozenRowsHeight() : 0;
+                const totalDrawHeight = table.tableNoFrameHeight - columnHeaderHeight - bottomHeaderHeight;
+                const startRow = table.columnHeaderLevelCount;
+                const endRow = table.isPivotChart() ? table.rowCount - table.bottomFrozenRowCount : table.rowCount;
                 let actualHeight = 0;
-                for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) {
+                for (let row = startRow; row < endRow; row++) {
                     actualHeight += table.getRowHeight(row);
                 }
                 const factor = totalDrawHeight / actualHeight;
-                for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) {
+                for (let row = startRow; row < endRow; row++) {
                     let rowHeight;
-                    if (row === table.rowCount - table.bottomFrozenRowCount - 1) {
-                        rowHeight =
-                            totalDrawHeight -
-                                table.getRowsHeight(table.frozenRowCount, table.rowCount - table.bottomFrozenRowCount - 2);
+                    if (row === endRow - 1) {
+                        rowHeight = totalDrawHeight - table.getRowsHeight(startRow, endRow - 2);
                     }
                     else {
                         rowHeight = Math.round(table.getRowHeight(row) * factor);
@@ -62258,12 +62275,14 @@
                 }
             }
             else if (table.autoFillHeight) {
+                table._clearRowRangeHeightsMap();
                 const canvasHeight = table.tableNoFrameHeight;
                 let actualHeight = 0;
                 let actualHeaderHeight = 0;
                 for (let row = 0; row < table.rowCount; row++) {
                     const rowHeight = table.getRowHeight(row);
-                    if (row < table.frozenRowCount || row >= table.rowCount - table.bottomFrozenRowCount) {
+                    if (row < table.frozenRowCount ||
+                        (table.isPivotChart() && row >= table.rowCount - table.bottomFrozenRowCount)) {
                         actualHeaderHeight += rowHeight;
                     }
                     actualHeight += rowHeight;
@@ -64666,6 +64685,10 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerupoutside', (e) => {
+            const eventArgsSet = getCellEventArgsSet(e);
+            if (stateManager.menu.isShow && eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
+                stateManager.hideMenu();
+            }
             if (stateManager.isResizeCol()) {
                 endResizeCol(table);
             }
@@ -64723,9 +64746,7 @@
             if (table.isPivotChart() && eventArgsSet?.eventArgs?.target.type !== 'chart') {
                 table.scenegraph.updateChartState(null);
             }
-            if (stateManager.menu.isShow &&
-                eventArgsSet.eventArgs &&
-                eventArgsSet.eventArgs.target !== stateManager.residentHoverIcon?.icon) {
+            if (stateManager.menu.isShow && eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
                 stateManager.hideMenu();
             }
             const hitIcon = eventArgsSet?.eventArgs?.target?.role?.startsWith('icon')
@@ -64920,6 +64941,12 @@
                 }
             }
         });
+        table.scenegraph.stage.addEventListener('pointerdown', (e) => {
+            const eventArgsSet = getCellEventArgsSet(e);
+            if (stateManager.menu.isShow && eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
+                stateManager.hideMenu();
+            }
+        });
         table.scenegraph.stage.addEventListener('pointertap', (e) => {
             const target = e.target;
             if (!isDraging &&
@@ -68560,7 +68587,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.16.4-alpha.1";
+        version = "0.17.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -69699,8 +69726,7 @@
             if (internalProps.menu.renderMode === 'html' && !internalProps.menuHandler) {
                 internalProps.menuHandler = new MenuHandler(this);
             }
-            this.headerStyleCache = new Map();
-            this.bodyStyleCache = new Map();
+            this.clearCellStyleCache();
             this.clearColWidthCache();
             this.clearRowHeightCache();
         }
@@ -69708,8 +69734,7 @@
             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.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this.render();
@@ -69968,8 +69993,7 @@
             this.internalProps.autoWrapText = autoWrapText;
             this.options.autoWrapText = autoWrapText;
             this.scenegraph.clearCells();
-            this.headerStyleCache = new Map();
-            this.bodyStyleCache = new Map();
+            this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.render();
         }
@@ -69986,8 +70010,7 @@
             this.options.theme = theme;
             this.scenegraph.updateStageBackground();
             this.scenegraph.clearCells();
-            this.headerStyleCache = new Map();
-            this.bodyStyleCache = new Map();
+            this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this.render();
@@ -70003,6 +70026,16 @@
             const cellType = this.internalProps.layoutMap.getBody(col, row).cellType;
             return getProp('cellType', { cellType }, col, row, this);
         }
+        getCellType(col, row) {
+            let cellType;
+            if (this.isHeader(col, row)) {
+                cellType = this.internalProps.layoutMap.getHeader(col, row).headerType;
+            }
+            else {
+                cellType = this.internalProps.layoutMap.getBody(col, row).cellType;
+            }
+            return getProp('cellType', { cellType }, col, row, this);
+        }
         getHeaderField(col, row) {
             return this.internalProps.layoutMap.getHeaderField(col, row);
         }
@@ -70191,7 +70224,19 @@
             const { layoutMap } = this.internalProps;
             const isHeader = layoutMap.isHeader(col, row);
             if (isHeader) {
-                let cacheStyle = this.headerStyleCache.get(`${col}-${row}`);
+                let cacheKey;
+                if (this.isPivotTable() && !this.isBottomFrozenRow(row) && !this.isRightFrozenColumn(col)) {
+                    const define = this.getHeaderDefine(col, row);
+                    cacheKey = define?.dimensionKey
+                        ? `dim-${define.dimensionKey}`
+                        : define?.indicatorKey
+                            ? `ind-${define.indicatorKey}`
+                            : `${col}-${row}`;
+                }
+                else {
+                    cacheKey = `${col}-${row}`;
+                }
+                let cacheStyle = this.headerStyleCache.get(cacheKey);
                 if (cacheStyle) {
                     return cacheStyle;
                 }
@@ -70253,7 +70298,7 @@
                         cellHeaderPaths: this.getCellHeaderPaths(col, row)
                     }, styleClass, this.options.autoWrapText);
                 }
-                this.headerStyleCache.set(`${col}-${row}`, cacheStyle);
+                this.headerStyleCache.set(cacheKey, cacheStyle);
                 return cacheStyle;
             }
             let cacheKey;
@@ -70286,6 +70331,7 @@
         }
         clearCellStyleCache() {
             this.headerStyleCache.clear();
+            this.bodyStyleCache.clear();
         }
         clearRowHeightCache() {
             this.internalProps._rowHeightsMap.clear();
@@ -70418,7 +70464,10 @@
                 lineThrough: !!theme.text.lineThrough,
                 padding: theme._vtable.padding,
                 underlineWidth: theme.text.underline,
-                lineThroughLineWidth: theme.text.lineThrough
+                lineThroughLineWidth: theme.text.lineThrough,
+                _strokeArrayWidth: theme.group.strokeArrayWidth,
+                _strokeArrayColor: theme.group.strokeArrayColor,
+                _linkColor: getProp('linkColor', actStyle, col, row, this)
             };
         }
         getAllBodyCells(colMaxCount, rowMaxCount) {
@@ -72709,6 +72758,7 @@
                 _setRecords(this, records);
             }
             this.stateManager.initCheckedState(records);
+            this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
@@ -73023,6 +73073,7 @@
             value: '',
             children: [],
             level: -1,
+            levelSpan: 1,
             startIndex: 0,
             size: 0,
             startInTotal: 0,
@@ -73127,21 +73178,33 @@
         }
         searchPath(index, node, path, maxDeep) {
             if (!node) {
-                return false;
+                return;
             }
             if (index < node.startIndex || index >= node.startIndex + node.size) {
-                return false;
+                return;
             }
             path.push(node);
-            if (!node.children || node.children.length === 0) {
-                return true;
-            }
-            if (node.level >= maxDeep) {
-                return true;
+            if (!node.children || node.children.length === 0 || node.level >= maxDeep) {
+                return;
             }
             const cIndex = index - node.startIndex;
-            node.children.some(n => this.searchPath(cIndex, n, path, maxDeep));
-            return true;
+            let left = 0;
+            let right = node.children.length - 1;
+            while (left <= right) {
+                const middle = Math.floor((left + right) / 2);
+                const element = node.children[middle];
+                if (cIndex >= element.startIndex && cIndex < element.startIndex + element.size) {
+                    this.searchPath(cIndex, element, path, maxDeep);
+                    break;
+                }
+                else if (cIndex < element.startIndex) {
+                    right = middle - 1;
+                }
+                else {
+                    left = middle + 1;
+                }
+            }
+            return;
         }
         movePosition(level, sourceIndex, targetIndex) {
             let parNode;
@@ -73289,9 +73352,20 @@
         for (let r = row - 1; r >= 0; r--) {
             _headerCellIds[r][layoutMap.colIndex] = roots[r];
         }
+        if (hd.levelSpan > 1) {
+            for (let i = 1; i < hd.levelSpan; i++) {
+                if (!_headerCellIds[row + i]) {
+                    _headerCellIds[row + i] = [];
+                }
+                _headerCellIds[row + i][layoutMap.colIndex] = id;
+            }
+        }
         if (hd.children?.length >= 1) {
             layoutMap
-                ._addHeaders(_headerCellIds, row + 1, hd.children ?? [], [...roots, id])
+                ._addHeaders(_headerCellIds, row + (hd.levelSpan ?? 1), hd.children ?? [], [
+                ...roots,
+                ...Array(hd.levelSpan ?? 1).fill(id)
+            ])
                 .forEach(c => results.push(c));
         }
         else {
@@ -73402,6 +73476,7 @@
         colDimensionKeys = [];
         indicatorKeys = [];
         indicatorDimensionKey = IndicatorDimensionKeyPlaceholder;
+        _largeCellRangeCache;
         _CellHeaderPathMap;
         _table;
         extensionRows;
@@ -73425,6 +73500,7 @@
                 this.extensionRows = table.options.extensionRows;
             }
             this.dataset = dataset;
+            this._largeCellRangeCache = [];
             this._CellHeaderPathMap = new Map();
             this.rowTree = table.internalProps.rowTree;
             this.columnTree = table.internalProps.columnTree;
@@ -73492,6 +73568,7 @@
                 this.columnHeaderObjs = this._addHeaders(this._columnHeaderCellIds, 0, this.columnDimensionTree.tree.children, []);
             }
             if (this.columnHeaderTitle) {
+                this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
                 const id = ++this.sharedVar.seqId;
                 const firstRowIds = Array(this.colCount - this.rowHeaderLevelCount).fill(id);
                 this._columnHeaderCellIds.unshift(firstRowIds);
@@ -73525,6 +73602,7 @@
                         : this._addHeaders(this._rowHeaderCellIds_FULL, 0, this.rowDimensionTree.tree.children, []);
             }
             if (this.rowHeaderTitle) {
+                this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
                 const id = ++this.sharedVar.seqId;
                 const firstColIds = Array(this._rowHeaderCellIds_FULL[0]?.length ?? this.rowDimensionTree.tree.size).fill(id);
                 this._rowHeaderCellIds_FULL.unshift(firstColIds);
@@ -73578,6 +73656,7 @@
                     this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(rowKeys);
                 });
             }
+            this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
             if (this.cornerSetting.titleOnDimension === 'column') {
                 this.cornerHeaderObjs = this._addCornerHeaders(this.columnHeaderTitle ? [''].concat(this.colDimensionKeys) : this.colDimensionKeys, this.columnsDefine);
             }
@@ -74329,6 +74408,12 @@
             if (this.isRightFrozenColumn(col, row) || this.isBottomFrozenRow(col, row)) {
                 return result;
             }
+            for (let i = 0; i < this._largeCellRangeCache.length; i++) {
+                const range = this._largeCellRangeCache[i];
+                if (col >= range.start.col && col <= range.end.col && row >= range.start.row && row <= range.end.row) {
+                    return range;
+                }
+            }
             if (this.isHeader(col, row) && col !== -1 && row !== -1) {
                 const id = this.getCellId(col, row);
                 for (let c = col - 1; c >= 0; c--) {
@@ -74356,6 +74441,9 @@
                     result.end.row = r;
                 }
             }
+            if (result.end.col - result.start.col > 100 || result.end.row - result.start.row > 100) {
+                this._largeCellRangeCache.push(result);
+            }
             return result;
         }
         isCellRangeEqual(col, row, targetCol, targetRow) {
@@ -74406,6 +74494,12 @@
             if (this._CellHeaderPathMap.has(`${col}-${row}`)) {
                 return this._CellHeaderPathMap.get(`${col}-${row}`);
             }
+            for (let i = 0; i < this._largeCellRangeCache.length; i++) {
+                const range = this._largeCellRangeCache[i];
+                if (col >= range.start.col && col <= range.end.col && row >= range.start.row && row <= range.end.row) {
+                    break;
+                }
+            }
             const recordCol = this.getBodyIndexByCol(col);
             const recordRow = this.getBodyIndexByRow(row) + this.currentPageStartIndex;
             let colPath = [];
@@ -74581,6 +74675,7 @@
                 return o;
             }, {});
             this._CellHeaderPathMap = new Map();
+            this._largeCellRangeCache.length = 0;
             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;
@@ -74798,6 +74893,7 @@
                     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._largeCellRangeCache.length = 0;
                     return {
                         sourceIndex: sourceCellRange.start.col,
                         targetIndex,
@@ -74831,6 +74927,7 @@
                     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._largeCellRangeCache.length = 0;
                     return {
                         sourceIndex: sourceCellRange.start.row,
                         targetIndex: targetIndex + this.columnHeaderLevelCount,
@@ -75133,6 +75230,7 @@
             return undefined;
         }
         clearCellRangeMap() {
+            this._largeCellRangeCache.length = 0;
             this._CellHeaderPathMap = new Map();
         }
         getDimensionKeyInChartSpec(_col, _row) {
@@ -76063,12 +76161,12 @@
                 }
                 else {
                     if (this.rowHierarchyType === 'tree') {
-                        this.rowHeaderTree = this.ArrToTree1(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this?.totals?.row?.showGrandTotals ||
+                        this.rowHeaderTree = this.ArrToTree1(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this.totals?.row?.showGrandTotals ||
                             (!this.indicatorsAsCol && this.columns.length === 0) ||
                             (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel);
                     }
                     else {
-                        this.rowHeaderTree = this.ArrToTree(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this.rowsIsTotal, this?.totals?.row?.showGrandTotals || (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel, this.rowSubTotalLabel);
+                        this.rowHeaderTree = this.ArrToTree(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this.rowsIsTotal, this.totals?.row?.showGrandTotals || (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel, this.rowSubTotalLabel, this.totals?.row?.showGrandTotalsOnTop ?? false, this.totals?.row?.showSubTotalsOnTop ?? false);
                     }
                 }
                 if (this.customColTree) {
@@ -76078,7 +76176,7 @@
                     this.colHeaderTree = this.customColTree;
                 }
                 else {
-                    this.colHeaderTree = this.ArrToTree(this.colKeys, this.columns, this.indicatorsAsCol ? this.indicators : undefined, this.colsIsTotal, this.totals?.column?.showGrandTotals || (!this.indicatorsAsCol && this.columns.length === 0), this.colGrandTotalLabel, this.colSubTotalLabel);
+                    this.colHeaderTree = this.ArrToTree(this.colKeys, this.columns, this.indicatorsAsCol ? this.indicators : undefined, this.colsIsTotal, this.totals?.column?.showGrandTotals || (!this.indicatorsAsCol && this.columns.length === 0), this.colGrandTotalLabel, this.colSubTotalLabel, this.totals?.column?.showGrandTotalsOnLeft ?? false, this.totals?.column?.showSubTotalsOnLeft ?? false);
                 }
                 typeof window !== 'undefined' ? window.performance.now() : 0;
                 if (this.dataConfig?.isPivotChart) {
@@ -76795,7 +76893,7 @@
             }
             return result;
         }
-        ArrToTree(arr, rows, indicators, subTotalFlags, isGrandTotal, grandTotalLabel, subTotalLabel) {
+        ArrToTree(arr, rows, indicators, subTotalFlags, isGrandTotal, grandTotalLabel, subTotalLabel, showGrandTotalsOnTop, showSubTotalsOnTop) {
             let result = [];
             const concatStr = this.stringJoinChar;
             const map = new Map();
@@ -76827,32 +76925,31 @@
                         };
                         if (subTotalFlags[index]) {
                             let curChild = item.children;
-                            for (let i = index; i < list.length - 1; i++) {
-                                const totalChild = {
-                                    value: subTotalLabel,
-                                    dimensionKey: rows[index + 1],
-                                    children: index + 1 === list.length - 1 && indicators?.length >= 1
-                                        ? indicators?.map(indicator => {
-                                            if (typeof indicator === 'string') {
-                                                return {
-                                                    indicatorKey: indicator,
-                                                    value: indicator
-                                                };
-                                            }
+                            const totalChild = {
+                                value: subTotalLabel,
+                                dimensionKey: rows[index + 1],
+                                levelSpan: subTotalFlags.length - index - 1,
+                                children: indicators?.length >= 1
+                                    ? indicators?.map(indicator => {
+                                        if (typeof indicator === 'string') {
                                             return {
-                                                indicatorKey: indicator.indicatorKey,
-                                                value: indicator.title
+                                                indicatorKey: indicator,
+                                                value: indicator
                                             };
-                                        })
-                                        : []
-                                };
-                                curChild.push(totalChild);
-                                curChild = totalChild.children;
-                            }
+                                        }
+                                        return {
+                                            indicatorKey: indicator.indicatorKey,
+                                            value: indicator.title
+                                        };
+                                    })
+                                    : []
+                            };
+                            curChild.push(totalChild);
+                            curChild = totalChild.children;
                         }
                         map.set(flatKey, item);
                         if (node) {
-                            if (subTotalFlags[index - 1]) {
+                            if (subTotalFlags[index - 1] && !showSubTotalsOnTop) {
                                 node.children.splice(node.children.length - 1, 0, item);
                             }
                             else {
@@ -76878,7 +76975,7 @@
                 const node = {
                     value: grandTotalLabel,
                     dimensionKey: rows[0],
-                    rowSpan: subTotalFlags.length,
+                    levelSpan: subTotalFlags.length,
                     children: indicators?.map(indicator => {
                         if (typeof indicator === 'string') {
                             return {
@@ -76892,7 +76989,12 @@
                         };
                     }) ?? []
                 };
-                result.push(node);
+                if (showGrandTotalsOnTop) {
+                    result.unshift(node);
+                }
+                else {
+                    result.push(node);
+                }
             }
             return result;
         }
@@ -77625,6 +77727,7 @@
             }
             this.refreshHeader();
             this.scenegraph.clearCells();
+            this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
@@ -78520,6 +78623,7 @@
             internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset);
             this.refreshHeader();
             this.scenegraph.clearCells();
+            this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
@@ -79037,7 +79141,7 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.16.4-alpha.1";
+    const version = "0.17.0";
     function getIcons() {
         return get$2();
     }