@visactor/vtable 1.2.1-alpha.2 → 1.2.1-alpha.5

package/dist/vtable.js

@@ -22113,6 +22113,7 @@
     };
     let Style$1 = class Style extends EventTarget$1 {
         _color;
+        _strokeColor;
         _fontSize;
         _fontFamily;
         _fontWeight;
@@ -22151,6 +22152,7 @@
             this._textAlign = style?.textAlign ?? bodyStyle?.textAlign;
             this._textBaseline = style?.textBaseline ?? bodyStyle?.textBaseline;
             this._color = style?.color ?? bodyStyle?.color;
+            this._strokeColor = style?.strokeColor ?? bodyStyle?.strokeColor;
             this._fontSize = style.fontSize ?? bodyStyle?.fontSize;
             this._fontFamily = style.fontFamily ?? bodyStyle?.fontFamily;
             this._fontWeight = style.fontWeight ?? bodyStyle?.fontWeight;
@@ -22182,6 +22184,12 @@
         set color(color) {
             this._color = color;
         }
+        get strokeColor() {
+            return this._strokeColor;
+        }
+        set strokeColor(strokeColor) {
+            this._strokeColor = strokeColor;
+        }
         get fontSize() {
             return this._fontSize;
         }
@@ -22642,6 +22650,7 @@
     };
     class Style extends EventTarget$1 {
         _color;
+        _strokeColor;
         _fontSize;
         _fontFamily;
         _fontWeight;
@@ -22678,6 +22687,7 @@
         constructor(style = {}, headerStyle = {}) {
             super();
             this._color = style.color ?? headerStyle?.color;
+            this._strokeColor = style?.strokeColor ?? headerStyle?.strokeColor;
             this._fontSize = style.fontSize ?? headerStyle?.fontSize;
             this._fontFamily = style.fontFamily ?? headerStyle?.fontFamily;
             this._fontWeight = style.fontWeight ?? headerStyle?.fontWeight;
@@ -22717,6 +22727,12 @@
         set color(color) {
             this._color = color;
         }
+        get strokeColor() {
+            return this._strokeColor;
+        }
+        set strokeColor(strokeColor) {
+            this._strokeColor = strokeColor;
+        }
         get fontSize() {
             return this._fontSize;
         }
@@ -23179,6 +23195,18 @@
         }
         return scrollStyle?.width ?? 7;
     }
+    function isValidStyle(style) {
+        if (!isValid$1(style)) {
+            return false;
+        }
+        if (isArray$1(style)) {
+            return style.some(s => isValid$1(s));
+        }
+        return true;
+    }
+    function isZeroStyle(style) {
+        return style === 0 || (isArray$1(style) && style.every(s => s === 0));
+    }
 
     const judgeType$1 = (value) => {
         switch (Object.prototype.toString.call(value)) {
@@ -25235,6 +25263,9 @@
                 get color() {
                     return style.color;
                 },
+                get strokeColor() {
+                    return style.strokeColor;
+                },
                 get borderColor() {
                     return style.borderColor;
                 },
@@ -35065,6 +35096,7 @@
         const textAlign = getProp('textAlign', headerStyle, col, row, table);
         const textBaseline = getProp('textBaseline', headerStyle, col, row, table);
         const color = getProp('color', headerStyle, col, row, table);
+        const strokeColor = getProp('strokeColor', headerStyle, col, row, table);
         const lineHeight = getProp('lineHeight', headerStyle, col, row, table);
         const underline = getProp('underline', headerStyle, col, row, table);
         const underlineDash = getProp('underlineDash', headerStyle, col, row, table);
@@ -35101,6 +35133,7 @@
                 fontStyle,
                 fontVariant,
                 fill: color,
+                stroke: strokeColor ?? false,
                 textAlign,
                 textBaseline,
                 lineHeight: lineHeight ?? fontSize,
@@ -36330,7 +36363,9 @@
     function getCellBorderStrokeWidth(col, row, cellTheme, table) {
         const frameBorderLineWidths = style.toBoxArray(table.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
         let strokeArrayWidth = cellTheme?.group?.strokeArrayWidth ?? undefined;
-        if (table.theme.cellInnerBorder) {
+        if (table.theme.cellInnerBorder ||
+            !isValidStyle(table.theme.frameStyle.borderLineWidth) ||
+            isZeroStyle(table.theme.frameStyle.borderLineWidth)) {
             return strokeArrayWidth;
         }
         if (col === 0 && frameBorderLineWidths[3]) {
@@ -38236,7 +38271,7 @@
             else if (child.role === 'icon-absolute-right') {
                 child.setAttribute('x', child.attribute.x + detaX);
             }
-            else if (child.name === 'content' || child.name === 'text') {
+            else if (child.name === 'content' || (child.name === 'text' && child.type !== 'richtext')) {
                 const childTextAlign = child.attribute.textAlign ?? textAlign;
                 if (childTextAlign === 'center') {
                     child.setAttribute('x', padding[3] + leftIconWidth + (distWidth - (padding[1] + padding[3]) - leftIconWidth - rightIconWidth) / 2);
@@ -48520,6 +48555,7 @@
                     },
                     placement: baseIcon.tooltip.placement
                 },
+                disappearDelay: baseIcon.tooltip.disappearDelay,
                 style: Object.assign({}, scene.table.internalProps.theme?.tooltipStyle, baseIcon.tooltip?.style)
             };
             if (!scene.table.internalProps.tooltipHandler.isBinded(tooltipOptions)) {
@@ -50707,6 +50743,10 @@
             !table.stateManager.isResizeCol()) {
             const currentRange = state.select.ranges[state.select.ranges.length - 1];
             if (isShift && currentRange) {
+                if (!isCtrl) {
+                    cellPos.col = col;
+                    cellPos.row = row;
+                }
                 if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) {
                     const startCol = Math.min(currentRange.start.col, currentRange.end.col, col);
                     const endCol = Math.max(currentRange.start.col, currentRange.end.col, col);
@@ -52239,7 +52279,8 @@
                             rect: iconInfo.position,
                             placement: inlineIcon.attribute.tooltip.placement
                         },
-                        style: Object.assign({}, this.table.internalProps.theme?.tooltipStyle, inlineIcon.tooltip?.style, inlineIcon.attribute?.tooltip?.style)
+                        style: Object.assign({}, this.table.internalProps.theme?.tooltipStyle, inlineIcon.tooltip?.style, inlineIcon.attribute?.tooltip?.style),
+                        disappearDelay: inlineIcon.attribute.tooltip.disappearDelay
                     };
                     if (!this.table.internalProps.tooltipHandler.isBinded(tooltipOptions)) {
                         this.table.showTooltip(col, row, tooltipOptions);
@@ -52400,12 +52441,15 @@
             endMoveCol(this);
         }
         checkFrozen() {
-            const originalFrozenColCount = this.table.isListTable() && !this.table.internalProps.transpose
+            let originalFrozenColCount = this.table.isListTable() && !this.table.internalProps.transpose
                 ? this.table.options.frozenColCount
                 : this.table.isPivotChart()
                     ? this.table.rowHeaderLevelCount ?? 0
                     : Math.max((this.table.rowHeaderLevelCount ?? 0) + this.table.internalProps.layoutMap.leftRowSeriesNumberColumnCount, this.table.options.frozenColCount ?? 0);
             if (originalFrozenColCount) {
+                if (originalFrozenColCount > this.table.colCount) {
+                    originalFrozenColCount = this.table.colCount;
+                }
                 if (this.table.tableNoFrameWidth - this.table.getColsWidth(0, originalFrozenColCount - 1) <= 120) {
                     this.table._setFrozenColCount(0);
                     this.setFrozenCol(-1);
@@ -52734,7 +52778,10 @@
         }
         triggerSort(col, row, iconMark, event) {
             if (this.table.isPivotTable()) {
-                const order = this.table.getPivotSortState(col, row);
+                const sortState = this.table.getPivotSortState(col, row);
+                const order = sortState ? sortState.toUpperCase() : 'DESC';
+                const new_order = order === 'ASC' ? 'DESC' : 'ASC';
+                this.table.sort(col, row, new_order);
                 this.table.fireListeners(PIVOT_TABLE_EVENT_TYPE.PIVOT_SORT_CLICK, {
                     col: col,
                     row: row,
@@ -53284,7 +53331,9 @@
             table.editorManager?.completeEdit(e.nativeEvent);
             const hitIcon = eventArgsSet?.eventArgs?.target?.role?.startsWith('icon')
                 ? eventArgsSet.eventArgs.target
-                : undefined;
+                : e.target.role?.startsWith('icon')
+                    ? e.target
+                    : undefined;
             eventManager.downIcon = hitIcon;
             if (!hitIcon || hitIcon.attribute.interactive === false) {
                 if (e.pointerType === 'touch') {
@@ -53500,11 +53549,16 @@
         });
         table.scenegraph.stage.addEventListener('pointerdown', (e) => {
             const eventArgsSet = getCellEventArgsSet(e);
-            if (eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
+            if (!eventArgsSet.eventArgs?.target ||
+                eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
                 stateManager.hideMenu();
             }
             table.editorManager?.completeEdit(e.nativeEvent);
-            if (!eventManager.checkCellFillhandle(eventArgsSet) && eventManager.checkColumnResize(eventArgsSet, true)) {
+            const hitIcon = e.target.role?.startsWith('icon') ? e.target : undefined;
+            eventManager.downIcon = hitIcon;
+            if (!hitIcon &&
+                !eventManager.checkCellFillhandle(eventArgsSet) &&
+                eventManager.checkColumnResize(eventArgsSet, true)) {
                 table.scenegraph.updateChartState(null);
                 stateManager.updateInteractionState(InteractionState.grabing);
                 const { eventArgs } = eventArgsSet;
@@ -54060,22 +54114,62 @@
                 let targetCol;
                 let targetRow;
                 if (e.key === 'ArrowUp') {
-                    targetCol = stateManager.select.cellPos.col;
-                    targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row - 1));
+                    if (e.ctrlKey || e.metaKey) {
+                        targetCol = stateManager.select.cellPos.col;
+                        targetRow = 0;
+                    }
+                    else if (e.shiftKey) {
+                        targetCol = stateManager.select.cellPos.col;
+                        targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row - 1));
+                    }
+                    else {
+                        targetCol = stateManager.select.cellPos.col;
+                        targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row - 1));
+                    }
                 }
                 else if (e.key === 'ArrowDown') {
-                    targetCol = stateManager.select.cellPos.col;
-                    targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1));
+                    if (e.ctrlKey || e.metaKey) {
+                        targetCol = stateManager.select.cellPos.col;
+                        targetRow = table.rowCount - 1;
+                    }
+                    else if (e.shiftKey) {
+                        targetCol = stateManager.select.cellPos.col;
+                        targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1));
+                    }
+                    else {
+                        targetCol = stateManager.select.cellPos.col;
+                        targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1));
+                    }
                 }
                 else if (e.key === 'ArrowLeft') {
-                    targetRow = stateManager.select.cellPos.row;
-                    targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col - 1));
+                    if (e.ctrlKey || e.metaKey) {
+                        targetCol = 0;
+                        targetRow = stateManager.select.cellPos.row;
+                    }
+                    else if (e.shiftKey) {
+                        targetRow = stateManager.select.cellPos.row;
+                        targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col - 1));
+                    }
+                    else {
+                        targetRow = stateManager.select.cellPos.row;
+                        targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col - 1));
+                    }
                 }
                 else if (e.key === 'ArrowRight') {
-                    targetRow = stateManager.select.cellPos.row;
-                    targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col + 1));
+                    if (e.ctrlKey || e.metaKey) {
+                        targetCol = table.colCount - 1;
+                        targetRow = stateManager.select.cellPos.row;
+                    }
+                    else if (e.shiftKey) {
+                        targetRow = stateManager.select.cellPos.row;
+                        targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col + 1));
+                    }
+                    else {
+                        targetRow = stateManager.select.cellPos.row;
+                        targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col + 1));
+                    }
                 }
-                table.selectCell(targetCol, targetRow);
+                table.selectCell(targetCol, targetRow, e.shiftKey);
                 if ((table.options.keyboardOptions?.moveEditCellOnArrowKeys ?? false) &&
                     table.editorManager.editingEditor) {
                     table.editorManager.completeEdit();
@@ -55492,6 +55586,8 @@
 	cursor: default;
 	width: max-content;
 	box-shadow: 0px 8px 16px rgba(27, 31, 35, 0.12);
+  max-height: 100%;
+  overflow-y: auto;
 }
 .vtable__menu-element--hidden {
 	opacity: 0;
@@ -55920,8 +56016,8 @@
                 rootElement.style.left = `0px`;
                 const maxWidth = containerWidth * 0.8;
                 rootElement.style.maxWidth = `${maxWidth}px`;
-                const rootElementWidth = rootElement.clientWidth;
-                const rootElementHeight = rootElement.clientHeight;
+                const rootElementWidth = rootElement.offsetWidth;
+                const rootElementHeight = rootElement.offsetHeight;
                 let rootElementLeft;
                 let rootElementTop;
                 if (position) {
@@ -56099,10 +56195,19 @@
         getIcons(col, row) {
             const icons = [];
             if (this._table.isPivotTable()) {
-                const { showSort } = this._table.internalProps.layoutMap.getHeader(col, row);
+                const { showSort, sort } = this._table.internalProps.layoutMap.getHeader(col, row);
                 if (showSort) {
-                    const order = this._table.getPivotSortState(col, row);
-                    const sortIcon = order === 'asc' ? this.downIcon : order === 'desc' ? this.upIcon : this.normalIcon;
+                    let order = this._table.getPivotSortState(col, row);
+                    if (order) {
+                        order = order.toUpperCase();
+                    }
+                    const sortIcon = order === 'ASC' ? this.downIcon : order === 'DESC' ? this.upIcon : this.normalIcon;
+                    if (sortIcon) {
+                        icons.push(sortIcon);
+                    }
+                }
+                else if (sort) {
+                    const sortIcon = this.getSortIconForPivotTable(this._table.getPivotSortState(col, row), this._table, col, row);
                     if (sortIcon) {
                         icons.push(sortIcon);
                     }
@@ -56225,6 +56330,17 @@
             }
             return icon;
         }
+        getSortIconForPivotTable(order, _table, col, row) {
+            const headerC = _table.getHeaderDefine(col, row);
+            if (!headerC ||
+                headerC.showSort === false ||
+                (!isValid$1(headerC.showSort) && !headerC.sort) ||
+                (headerC.columns && headerC.columns.length > 0)) {
+                return null;
+            }
+            const icon = order === 'ASC' ? this.downIcon : order === 'DESC' ? this.upIcon : this.normalIcon;
+            return icon;
+        }
         getDropDownStateIcons(_table, col, row) {
             const headerC = _table.getHeaderDefine(col, row);
             const headerL = _table._getHeaderLayoutMap(col, row);
@@ -56441,8 +56557,8 @@
 .vtable__bubble-tooltip-element {
 	position: absolute;
 	
-	pointer-events: none;
-	user-select: none;
+	// pointer-events: none;
+	//user-select: none;
 	max-width: 300px;
 	z-index: 99999;
 
@@ -56456,6 +56572,8 @@
 }
 .vtable__bubble-tooltip-element--hidden {
 	opacity: 0;
+  pointer-events: none;
+	user-select: none;
 	/* transform: translate(-50%, -50%); */
 	transition: opacity 75ms linear;
 }
@@ -56508,6 +56626,8 @@
         _rootElement;
         _messageElement;
         _triangleElement;
+        _disappearDelay;
+        _disappearDelayId;
         constructor() {
             this._handler = new EventHandler();
             const rootElement = (this._rootElement = createElement('div', [TOOLTIP_CLASS, HIDDEN_CLASS]));
@@ -56517,8 +56637,17 @@
             rootElement.appendChild(messageElement);
             this._messageElement = rootElement.querySelector(`.${CONTENT_CLASS}`) || undefined;
             this._triangleElement = rootElement.querySelector(`.${TRIANGLE_CLASS}`) || undefined;
+            rootElement.addEventListener('mousemove', () => {
+                this._disappearDelayId && clearTimeout(this._disappearDelayId);
+            });
+            rootElement.addEventListener('mouseleave', () => {
+                this._disappearDelay = undefined;
+                this.unbindFromCell();
+            });
         }
         bindToCell(table, col, row, tooltipInstanceInfo, confine) {
+            this._disappearDelay = tooltipInstanceInfo?.disappearDelay;
+            this._disappearDelayId && clearTimeout(this._disappearDelayId);
             const rootElement = this._rootElement;
             const messageElement = this._messageElement;
             const triangle = this._triangleElement;
@@ -56574,10 +56703,21 @@
             }
         }
         unbindFromCell() {
-            const rootElement = this._rootElement;
-            if (rootElement?.parentElement) {
-                rootElement.classList.remove(SHOWN_CLASS);
-                rootElement.classList.add(HIDDEN_CLASS);
+            if (this._disappearDelay) {
+                this._disappearDelayId = setTimeout(() => {
+                    const rootElement = this._rootElement;
+                    if (rootElement?.parentElement) {
+                        rootElement.classList.remove(SHOWN_CLASS);
+                        rootElement.classList.add(HIDDEN_CLASS);
+                    }
+                }, this._disappearDelay ?? 0);
+            }
+            else {
+                const rootElement = this._rootElement;
+                if (rootElement?.parentElement) {
+                    rootElement.classList.remove(SHOWN_CLASS);
+                    rootElement.classList.add(HIDDEN_CLASS);
+                }
             }
         }
         _canBindToCell(table, col, row) {
@@ -56905,6 +57045,7 @@
                         placement: Placement.bottom,
                         rect
                     },
+                    disappearDelay: table.internalProps.tooltip.overflowTextTooltipDisappearDelay ?? 0,
                     style: { arrowMark: false }
                 };
             }
@@ -56921,6 +57062,7 @@
                             placement: Placement.bottom,
                             rect
                         },
+                        disappearDelay: table.internalProps.tooltip.overflowTextTooltipDisappearDelay ?? 0,
                         style: table.theme.tooltipStyle
                     };
                 }
@@ -58651,7 +58793,7 @@
                 : Object.assign({}, (indicatorInfo ?? dimensionInfo)?.headerStyle),
             headerType: indicatorInfo?.headerType ?? dimensionInfo?.headerType ?? 'text',
             headerIcon: indicatorInfo?.headerIcon ?? dimensionInfo?.headerIcon,
-            define: Object.assign({}, hd, indicatorInfo ?? dimensionInfo),
+            define: Object.assign({}, hd, indicatorInfo ?? Object.assign({}, dimensionInfo, { sort: undefined })),
             fieldFormat: indicatorInfo?.headerFormat ?? dimensionInfo?.headerFormat,
             dropDownMenu: indicatorInfo?.dropDownMenu ?? dimensionInfo?.dropDownMenu,
             pivotInfo: {
@@ -58663,6 +58805,7 @@
             minWidth: dimensionInfo?.minWidth,
             maxWidth: dimensionInfo?.maxWidth,
             showSort: indicatorInfo?.showSort ?? dimensionInfo?.showSort,
+            sort: indicatorInfo?.sort,
             description: dimensionInfo?.description
         };
         if (indicatorInfo) {
@@ -59079,7 +59222,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.2.1-alpha.2";
+        version = "1.2.1-alpha.5";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -59298,11 +59441,7 @@
             this.internalProps.colCount = colCount;
         }
         get frozenColCount() {
-            let frozenColCount = this.internalProps.layoutMap?.frozenColCount ?? this.internalProps.frozenColCount ?? 0;
-            if (frozenColCount > this.colCount) {
-                frozenColCount = 0;
-            }
-            return frozenColCount;
+            return this.internalProps.layoutMap?.frozenColCount ?? this.internalProps.frozenColCount ?? 0;
         }
         set frozenColCount(frozenColCount) {
             if (frozenColCount >= this.colCount) {
@@ -60695,8 +60834,8 @@
         clearSelected() {
             this.stateManager.updateSelectPos(-1, -1);
         }
-        selectCell(col, row) {
-            this.stateManager.updateSelectPos(col, row);
+        selectCell(col, row, isShift, isCtrl) {
+            this.stateManager.updateSelectPos(col, row, isShift, isCtrl);
             this.stateManager.endSelectCells();
         }
         selectCells(cellRanges) {
@@ -61008,8 +61147,11 @@
                 let cacheKey;
                 if (this.isPivotTable() && !this.isBottomFrozenRow(row) && !this.isRightFrozenColumn(col)) {
                     const define = this.getHeaderDefine(col, row);
+                    const isCorner = this.isCornerHeader(col, row);
                     cacheKey = define?.dimensionKey
-                        ? `dim-${define.dimensionKey}`
+                        ? isCorner
+                            ? `dim-cor-${define.dimensionKey}`
+                            : `dim-${define.dimensionKey}`
                         : define?.indicatorKey
                             ? `ind-${define.indicatorKey}`
                             : `${col}-${row}`;
@@ -61323,6 +61465,9 @@
                     ? getProp('bgColor', actStyle, col, row, this)
                     : theme.group.fill,
                 color: isBoolean$2(theme.text.fill) ? getProp('color', actStyle, col, row, this) : theme.text.fill,
+                strokeColor: isBoolean$2(theme.text.stroke)
+                    ? getProp('strokeColor', actStyle, col, row, this)
+                    : theme.text.stroke,
                 fontFamily: theme.text.fontFamily,
                 fontSize: theme.text.fontSize,
                 fontWeight: theme.text.fontWeight,
@@ -64676,7 +64821,7 @@
             const cellType = this.getCellType(col, row);
             if (isValid$1(field) && cellType === 'checkbox') {
                 const dataIndex = this.dataSource.getIndexKey(this.getRecordShowIndexByCell(col, row));
-                return this.stateManager.checkedState[dataIndex][field];
+                return this.stateManager.checkedState[dataIndex]?.[field];
             }
             return undefined;
         }
@@ -65775,11 +65920,15 @@
                                 : dimensionKey === 'axis'
                                     ? ''
                                     : dimensionKey,
-                        field: '维度名称',
+                        field: dimensionKey,
                         style: this.cornerSetting.headerStyle,
                         headerType: this.cornerSetting.headerType ?? 'text',
+                        showSort: dimensionInfo?.showSortInCorner,
+                        sort: dimensionInfo?.sort,
                         define: {
-                            dimensionKey: '维度名称',
+                            showSort: dimensionInfo?.showSortInCorner,
+                            sort: dimensionInfo?.sort,
+                            dimensionKey: dimensionKey,
                             id,
                             value: dimensionKey,
                             disableHeaderHover: !!this.cornerSetting.disableHeaderHover,
@@ -67063,6 +67212,7 @@
         getCellAdressByHeaderPath(dimensionPaths) {
             let colHeaderPaths;
             let rowHeaderPaths;
+            let isCornerCell = false;
             let forceBody = false;
             if (Array.isArray(dimensionPaths)) {
                 if (dimensionPaths.length > this.rowDimensionKeys.length + this.colDimensionKeys.length) {
@@ -67091,6 +67241,32 @@
                 return (this.fullRowDimensionKeys.indexOf(a.dimensionKey ?? this.indicatorDimensionKey) -
                     this.fullRowDimensionKeys.indexOf(b.dimensionKey ?? this.indicatorDimensionKey));
             });
+            colHeaderPaths?.forEach(a => {
+                if (a.isPivotCorner) {
+                    isCornerCell = true;
+                }
+            });
+            rowHeaderPaths?.forEach(a => {
+                if (a.isPivotCorner) {
+                    isCornerCell = true;
+                }
+            });
+            if (isCornerCell) {
+                if (this.cornerSetting.titleOnDimension === 'row') {
+                    for (let i = 0; i < this.rowDimensionKeys.length; i++) {
+                        if (rowHeaderPaths[0].dimensionKey === this.rowDimensionKeys[i]) {
+                            return { col: i + this.leftRowSeriesNumberColumnCount, row: 0 };
+                        }
+                    }
+                }
+                else {
+                    for (let i = 0; i < this.colDimensionKeys.length; i++) {
+                        if (colHeaderPaths[0].dimensionKey === this.colDimensionKeys[i]) {
+                            return { col: 0, row: i };
+                        }
+                    }
+                }
+            }
             let needLowestLevel = false;
             if (colHeaderPaths?.length >= 1 && rowHeaderPaths?.length >= 1) {
                 needLowestLevel = true;
@@ -67191,7 +67367,7 @@
                 }
             }
             if (colDimensionFinded || forceBody) {
-                col = this.rowHeaderLevelCount;
+                col = this.rowHeaderLevelCount + this.leftRowSeriesNumberColumnCount;
                 const { startInTotal, level } = colDimensionFinded ?? defaultDimension;
                 col += startInTotal ?? 0;
                 defaultRow = this.columnHeaderTitle ? level + 1 : level;
@@ -67710,7 +67886,9 @@
             return totalCount;
         }
         resetHeaderTree() {
+            this.colIndex = 0;
             this._rowHeaderCellFullPathIds_FULL = [];
+            this._columnHeaderCellFullPathIds = [];
             this._columnHeaderCellIds = [];
             const dataset = this.dataset;
             this.rowTree = dataset.rowHeaderTree;
@@ -67726,6 +67904,8 @@
                 o[e.id] = e;
                 return o;
             }, {});
+            this._CellHeaderPathMap = new Map();
+            this._largeCellRangeCache.length = 0;
             this.generateCellIdsConsiderHideHeader();
             this.setPagination(this.pagination);
         }
@@ -69330,9 +69510,10 @@
                     }
                     this.internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset, columnDimensionTree, rowDimensionTree);
                 }
-                this.pivotSortState = [];
-                if (options.pivotSortState) {
-                    this.updatePivotSortState(options.pivotSortState);
+                this._changePivotSortStateBySortRules();
+                if ((options.pivotSortState?.length ?? 0) > 0) {
+                    this.pivotSortState = [];
+                    this.pivotSortState = options.pivotSortState;
                 }
                 if (Env.mode !== 'node') {
                     this.editorManager = new EditManeger(this);
@@ -69467,9 +69648,10 @@
                 }
                 internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset, columnDimensionTree, rowDimensionTree);
             }
-            this.pivotSortState = [];
-            if (options.pivotSortState) {
-                this.updatePivotSortState(options.pivotSortState);
+            this._changePivotSortStateBySortRules();
+            if ((options.pivotSortState?.length ?? 0) > 0) {
+                this.pivotSortState = [];
+                this.pivotSortState = options.pivotSortState;
             }
             this.refreshHeader();
             if (internalProps.releaseList) {
@@ -69907,24 +70089,147 @@
             }
         }
         updateSortRules(sortRules) {
-            this.internalProps.dataConfig.sortRules = sortRules;
+            if (this.internalProps.dataConfig) {
+                this.internalProps.dataConfig.sortRules = sortRules;
+            }
+            else {
+                this.internalProps.dataConfig = { sortRules };
+            }
             this.dataset.updateSortRules(sortRules);
+            this._changePivotSortStateBySortRules();
             this.internalProps.layoutMap.resetHeaderTree();
             this.scenegraph.clearCells();
             this.refreshHeader();
             this.scenegraph.createSceneGraph();
             this.render();
         }
-        updatePivotSortState(pivotSortStateConfig) {
-            for (let i = 0; i < pivotSortStateConfig.length; i++) {
-                const { dimensions, order } = pivotSortStateConfig[i];
-                const cellAddress = this.internalProps.layoutMap.getPivotCellAdress(dimensions);
-                cellAddress &&
+        _changePivotSortStateBySortRules() {
+            this.pivotSortState = [];
+            const sortRules = this.internalProps.dataConfig?.sortRules ?? [];
+            for (let i = 0; i < sortRules.length; i++) {
+                const sortRule = sortRules[i];
+                if (sortRule.sortType) {
+                    const dimensions = [];
+                    if (sortRule.sortByIndicator) {
+                        if (sortRule.sortField ===
+                            (this.dataset.indicatorsAsCol
+                                ? this.dataset.rows[this.dataset.rows.length - 1]
+                                : this.dataset.columns[this.dataset.columns.length - 1])) {
+                            for (let j = 0; j < sortRule.query.length; j++) {
+                                dimensions.push({
+                                    dimensionKey: this.dataset.indicatorsAsCol ? this.dataset.columns[j] : this.dataset.rows[j],
+                                    value: sortRule.query[j]
+                                });
+                            }
+                            dimensions.push({
+                                indicatorKey: sortRule.sortByIndicator,
+                                value: this.internalProps.layoutMap.getIndicatorInfo(sortRule.sortByIndicator)
+                                    ?.title ?? sortRule.sortByIndicator
+                            });
+                        }
+                    }
+                    else {
+                        dimensions.push({
+                            dimensionKey: sortRule.sortField,
+                            isPivotCorner: true,
+                            value: sortRule.sortField
+                        });
+                    }
                     this.pivotSortState.push({
-                        col: cellAddress.col,
-                        row: cellAddress.row,
-                        order
+                        dimensions,
+                        order: sortRule.sortType
                     });
+                }
+            }
+        }
+        updatePivotSortState(pivotSortStateConfig) {
+            this.pivotSortState = pivotSortStateConfig;
+        }
+        sort(col, row, order) {
+            let dimensions;
+            if (this.isCornerHeader(col, row)) {
+                const dimensionInfo = this.getHeaderDefine(col, row);
+                dimensions = [];
+                const dimension = {
+                    isPivotCorner: true,
+                    dimensionKey: dimensionInfo.value,
+                    value: dimensionInfo.value
+                };
+                dimensions.push(dimension);
+            }
+            else if (this.isColumnHeader(col, row)) {
+                dimensions = this.getCellHeaderPaths(col, row).colHeaderPaths;
+            }
+            else {
+                dimensions = this.getCellHeaderPaths(col, row).rowHeaderPaths;
+            }
+            const sortIndicator = dimensions[dimensions.length - 1].indicatorKey;
+            const headerDefine = this.getHeaderDefine(col, row);
+            if (headerDefine.sort) {
+                if (this.dataset.sortRules) {
+                    for (let i = this.dataset.sortRules.length - 1; i >= 0; i--) {
+                        const sortRule = this.dataset.sortRules[i];
+                        if (headerDefine.dimensionKey && sortRule.sortField === headerDefine.dimensionKey) {
+                            this.dataset.sortRules.splice(i, 1);
+                        }
+                        else if (sortIndicator &&
+                            sortRule.sortField ===
+                                (this.dataset.indicatorsAsCol
+                                    ? this.dataset.rows[this.dataset.rows.length - 1]
+                                    : this.dataset.columns[this.dataset.columns.length - 1])) {
+                            this.dataset.sortRules.splice(i, 1);
+                        }
+                    }
+                    if (sortIndicator) {
+                        this.dataset.sortRules.push({
+                            sortField: this.dataset.indicatorsAsCol
+                                ? this.dataset.rows[this.dataset.rows.length - 1]
+                                : this.dataset.columns[this.dataset.columns.length - 1],
+                            sortType: SortType[order],
+                            sortByIndicator: sortIndicator,
+                            query: dimensions.reduce((arr, dimension) => {
+                                if (dimension.dimensionKey) {
+                                    arr.push(dimension.value);
+                                }
+                                return arr;
+                            }, [])
+                        });
+                    }
+                    else {
+                        this.dataset.sortRules.push({
+                            sortField: headerDefine.dimensionKey,
+                            sortType: SortType[order]
+                        });
+                    }
+                }
+                else {
+                    if (sortIndicator) {
+                        this.dataset.sortRules = [
+                            {
+                                sortField: this.dataset.indicatorsAsCol
+                                    ? this.dataset.rows[this.dataset.rows.length - 1]
+                                    : this.dataset.columns[this.dataset.columns.length - 1],
+                                sortType: SortType[order],
+                                sortByIndicator: sortIndicator,
+                                query: dimensions.reduce((arr, dimension) => {
+                                    if (dimension.dimensionKey) {
+                                        arr.push(dimension.value);
+                                    }
+                                    return arr;
+                                }, [])
+                            }
+                        ];
+                    }
+                    else {
+                        this.dataset.sortRules = [
+                            {
+                                sortField: headerDefine.dimensionKey,
+                                sortType: SortType[order]
+                            }
+                        ];
+                    }
+                }
+                this.updateSortRules(this.dataset.sortRules);
             }
         }
         getPivotSortState(col, row) {
@@ -69933,8 +70238,11 @@
             }
             const cellRange = this.getCellRange(col, row);
             for (let i = 0; i < this.pivotSortState.length; i++) {
-                const { col: sortCol, row: sortRow, order } = this.pivotSortState[i];
-                if (cellInRange(cellRange, sortCol, sortRow)) {
+                const pivotState = this.pivotSortState[i];
+                const dimensions = pivotState.dimensions;
+                const cell = this.getCellAddressByHeaderPaths(dimensions);
+                const order = pivotState.order;
+                if (cell && cellInRange(cellRange, cell.col, cell.row)) {
                     return order;
                 }
             }
@@ -70123,7 +70431,7 @@
                 internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset, columnDimensionTree, rowDimensionTree);
                 this.pivotSortState = [];
                 if (options.pivotSortState) {
-                    this.updatePivotSortState(options.pivotSortState);
+                    this.pivotSortState = options.pivotSortState;
                 }
             }
             this.refreshHeader();
@@ -70937,7 +71245,12 @@
             return this.getCellOriginRecord(col, row);
         }
         updateSortRules(sortRules) {
-            this.internalProps.dataConfig.sortRules = sortRules;
+            if (this.internalProps.dataConfig) {
+                this.internalProps.dataConfig.sortRules = sortRules;
+            }
+            else {
+                this.internalProps.dataConfig = { sortRules };
+            }
             this.dataset.updateSortRules(sortRules);
             this.internalProps.layoutMap.resetHeaderTree();
             this.scenegraph.clearCells();
@@ -70945,18 +71258,6 @@
             this.scenegraph.createSceneGraph();
             this.render();
         }
-        updatePivotSortState(pivotSortStateConfig) {
-            for (let i = 0; i < pivotSortStateConfig.length; i++) {
-                const { dimensions, order } = pivotSortStateConfig[i];
-                const cellAddress = this.internalProps.layoutMap.getPivotCellAdress(dimensions);
-                cellAddress &&
-                    this.pivotSortState.push({
-                        col: cellAddress.col,
-                        row: cellAddress.row,
-                        order
-                    });
-            }
-        }
         getPivotSortState(col, row) {
             if (!this.pivotSortState) {
                 return undefined;
@@ -70997,27 +71298,6 @@
             return null;
         }
         toggleHierarchyState(col, row) {
-            const hierarchyState = this.getHierarchyState(col, row);
-            if (hierarchyState === HierarchyState.expand) {
-                this.fireListeners(PIVOT_CHART_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
-                    col: col,
-                    row: row,
-                    hierarchyState: HierarchyState.collapse
-                });
-            }
-            else if (hierarchyState === HierarchyState.collapse) {
-                this.fireListeners(PIVOT_CHART_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
-                    col: col,
-                    row: row,
-                    hierarchyState: HierarchyState.expand,
-                    originData: this.getCellOriginRecord(col, row)
-                });
-            }
-            const result = this.internalProps.layoutMap.toggleHierarchyState(col, row);
-            this.refreshRowColCount();
-            this.clearCellStyleCache();
-            this.scenegraph.updateHierarchyIcon(col, row);
-            this.scenegraph.updateRow(result.removeCellPositions, result.addCellPositions);
         }
         getHeaderCellAddressByPath(dimensionPaths) {
             const cellAddress = this.internalProps.layoutMap.getPivotCellAdress(dimensionPaths);
@@ -72067,7 +72347,7 @@
     }
 
     registerForVrender();
-    const version = "1.2.1-alpha.2";
+    const version = "1.2.1-alpha.5";
     function getIcons() {
         return get$2();
     }