@visactor/vtable-calendar 1.17.1-alpha.9 → 1.17.1

package/dist/vtable-calendar.js

@@ -2735,6 +2735,8 @@
             return color.getLuminance2();
           case "lum3":
             return color.getLuminance3();
+          case "wcag":
+            return color.getLuminanceWCAG();
         }
       }
       static parseColorString(value) {
@@ -2836,6 +2838,14 @@
       getLuminance3() {
         return (.299 * this.color.r + .587 * this.color.g + .114 * this.color.b) / 255;
       }
+      getLuminanceWCAG() {
+        const RsRGB = this.color.r / 255,
+          GsRGB = this.color.g / 255,
+          BsRGB = this.color.b / 255;
+        let R, G, B;
+        R = RsRGB <= .03928 ? RsRGB / 12.92 : Math.pow((RsRGB + .055) / 1.055, 2.4), G = GsRGB <= .03928 ? GsRGB / 12.92 : Math.pow((GsRGB + .055) / 1.055, 2.4), B = BsRGB <= .03928 ? BsRGB / 12.92 : Math.pow((BsRGB + .055) / 1.055, 2.4);
+        return .2126 * R + .7152 * G + .0722 * B;
+      }
       clone() {
         return new Color(this.color.toString());
       }
@@ -4876,6 +4886,9 @@
       }
       compatibleMetrics(metrics, options) {
         if (null == metrics.actualBoundingBoxAscent || null == metrics.actualBoundingBoxDescent || null == metrics.fontBoundingBoxAscent || null == metrics.fontBoundingBoxDescent) {
+          metrics = {
+            width: metrics.width
+          };
           const {
             ascent: ascent,
             descent: descent
@@ -4883,6 +4896,13 @@
           metrics.actualBoundingBoxAscent = ascent, metrics.actualBoundingBoxDescent = descent, metrics.fontBoundingBoxAscent = ascent, metrics.fontBoundingBoxDescent = descent;
         }
         if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
+          metrics = {
+            width: metrics.width,
+            actualBoundingBoxAscent: metrics.actualBoundingBoxAscent,
+            actualBoundingBoxDescent: metrics.actualBoundingBoxDescent,
+            fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
+            fontBoundingBoxDescent: metrics.fontBoundingBoxDescent
+          };
           const {
             left: left,
             right: right
@@ -41410,7 +41430,8 @@
         updateReactContainer(this.table);
       }
       setLoadingHierarchyState(col, row) {
-        const iconGraphic = this.getCell(col, row).getChildByName("collapse", !0);
+        const cellGroup = this.getCell(col, row),
+          iconGraphic = cellGroup.getChildByName("collapse", !0) || cellGroup.getChildByName("expand", !0);
         if (iconGraphic) {
           const loadingIcon = get$2()[InternalIconName.loadingIconName];
           loadingIcon && dealWithIcon(loadingIcon, iconGraphic, col, row);
@@ -41751,7 +41772,7 @@
               }) : state.select.ranges.push({
                 start: {
                   col: cellRange.start.col,
-                  row: row
+                  row: cellRange.start.row
                 },
                 end: {
                   col: cellRange.end.col,
@@ -41773,7 +41794,7 @@
                 skipBodyMerge: !0
               }) : state.select.ranges.push({
                 start: {
-                  col: col,
+                  col: cellRange.start.col,
                   row: cellRange.start.row
                 },
                 end: {
@@ -42313,14 +42334,7 @@
       if (recordIndex >= 0) {
         const dataIndex = state.table.dataSource.getIndexKey(recordIndex).toString();
         if (isValid$3(null === (_b = state.checkedState.get(dataIndex)) || void 0 === _b ? void 0 : _b[field])) return state.checkedState.get(dataIndex)[field];
-        if (state.checkedState.has(dataIndex)) state.checkedState.get(dataIndex)[field] = checked;else if (dataIndex.includes(",")) {
-          const parentDataIndex = dataIndex.split(",").slice(0, -1).join(",");
-          state.checkedState.has(parentDataIndex) && !0 === state.checkedState.get(parentDataIndex)[field] ? state.checkedState.set(dataIndex, {
-            [field]: !0
-          }) : state.checkedState.set(dataIndex, {
-            [field]: checked
-          });
-        } else state.checkedState.set(dataIndex, {
+        state.checkedState.has(dataIndex) ? state.checkedState.get(dataIndex)[field] = checked : state.checkedState.set(dataIndex, {
           [field]: checked
         });
       }
@@ -42817,7 +42831,7 @@
         if (this.select.selecting) {
           if (this.select.selecting = !1, 0 === this.select.ranges.length) return;
           const currentRange = this.select.ranges[this.select.ranges.length - 1];
-          expendCellRange(currentRange, this.table);
+          this.table.isSeriesNumber(this.select.cellPos.col, this.select.cellPos.row) || this.table.isHeader(this.select.cellPos.col, this.select.cellPos.row) || expendCellRange(currentRange, this.table);
           let isSame = !1;
           for (let i = 0; i < this.select.ranges.length - 1; i++) {
             const range = this.select.ranges[i];
@@ -43639,7 +43653,7 @@
         callback: globalPointerdownCallback
       }), vglobal.addEventListener("pointerup", globalPointerupCallback), vglobal.addEventListener("pointerdown", globalPointerdownCallback), table.scenegraph.tableGroup.addEventListener("pointerdown", e => {
         var _a, _b, _c, _d, _e;
-        if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE) && table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
+        table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE) && table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
           event: e.nativeEvent
         }), table.eventManager.isDown = !0, table.eventManager.LastBodyPointerXY = {
           x: e.x,
@@ -43647,22 +43661,42 @@
         }, table.eventManager.LastPointerXY = {
           x: e.x,
           y: e.y
-        }, 0 !== e.button) return;
+        };
         const eventArgsSet = getCellEventArgsSet(e);
         if (eventManager.downIcon = void 0, stateManager.interactionState !== InteractionState.default) return;
         if (table.isPivotChart() && "chart" !== (null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target.type) && table.scenegraph.updateChartState(null), (null === (_b = eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target) !== (null === (_c = stateManager.residentHoverIcon) || void 0 === _c ? void 0 : _c.icon) && stateManager.hideMenu(), "chart" === (null === (_d = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _d ? void 0 : _d.target.type)) return;
         const isCompleteEdit = null === (_e = table.editorManager) || void 0 === _e ? void 0 : _e.completeEdit(e.nativeEvent);
         getPromiseValue(isCompleteEdit, isCompleteEdit => {
-          var _a, _b, _c, _d, _e, _f, _g;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
           if (!1 === isCompleteEdit) return;
           const hitIcon = (null === (_c = null === (_b = null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target) || void 0 === _b ? void 0 : _b.role) || void 0 === _c ? void 0 : _c.startsWith("icon")) ? eventArgsSet.eventArgs.target : (null === (_d = e.target.role) || void 0 === _d ? void 0 : _d.startsWith("icon")) ? e.target : void 0;
-          if (eventManager.downIcon = hitIcon, hitIcon && !1 !== hitIcon.attribute.interactive) hitIcon.attribute.funcType === IconFuncTypeEnum.dragReorder && (stateManager.startMoveCol(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_f = null === (_e = eventArgsSet.eventArgs) || void 0 === _e ? void 0 : _e.event) || void 0 === _f ? void 0 : _f.nativeEvent), stateManager.updateInteractionState(InteractionState.grabing));else if ("touch" === e.pointerType) eventManager.touchEnd = !1, eventManager.touchSetTimeout = setTimeout(() => {
-            eventManager.isTouchdown = !1, eventManager.touchMove = !0, (eventManager.touchEnd || !eventManager.checkColumnResize(eventArgsSet, !0) && !eventManager.checkRowResize(eventArgsSet, !0)) && (eventManager.touchEnd || !eventManager.chechColumnMover(eventArgsSet)) ? eventManager.dealTableSelect(eventArgsSet) && !eventManager.touchEnd && stateManager.updateInteractionState(InteractionState.grabing) : stateManager.updateInteractionState(InteractionState.grabing);
-          }, 500), eventManager.dealTableHover(eventArgsSet);else {
-            if (!eventManager.checkCellFillhandle(eventArgsSet) && (eventManager.checkColumnResize(eventArgsSet, !0) || eventManager.checkRowResize(eventArgsSet, !0))) return table.scenegraph.updateChartState(null), void stateManager.updateInteractionState(InteractionState.grabing);
-            if (eventManager.chechColumnMover(eventArgsSet)) return void stateManager.updateInteractionState(InteractionState.grabing);
-            if (eventManager.checkCellFillhandle(eventArgsSet, !0) && eventManager.dealFillSelect(eventArgsSet)) return void stateManager.updateInteractionState(InteractionState.grabing);
-            eventManager.dealTableSelect(eventArgsSet) && stateManager.updateInteractionState(InteractionState.grabing);
+          if (eventManager.downIcon = hitIcon, hitIcon && !1 !== hitIcon.attribute.interactive) hitIcon.attribute.funcType === IconFuncTypeEnum.dragReorder && (stateManager.startMoveCol(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_k = null === (_j = eventArgsSet.eventArgs) || void 0 === _j ? void 0 : _j.event) || void 0 === _k ? void 0 : _k.nativeEvent), stateManager.updateInteractionState(InteractionState.grabing));else {
+            if (eventManager.cellIsHeaderCheck(eventArgsSet)) return;
+            if ("touch" === e.pointerType) {
+              if (eventManager.touchEnd = !1, eventManager.touchSetTimeout = setTimeout(() => {
+                eventManager.isTouchdown = !1, eventManager.touchMove = !0, (eventManager.touchEnd || !eventManager.checkColumnResize(eventArgsSet, !0) && !eventManager.checkRowResize(eventArgsSet, !0)) && (eventManager.touchEnd || !eventManager.checkColumnMover(eventArgsSet)) ? eventManager.dealTableSelect(eventArgsSet) && !eventManager.touchEnd && stateManager.updateInteractionState(InteractionState.grabing) : stateManager.updateInteractionState(InteractionState.grabing);
+              }, 500), table.hasListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL)) {
+                const cellGoup = e.path.find(node => "cell" === node.role);
+                "cell" !== (null == cellGoup ? void 0 : cellGoup.role) || !isValid$3(cellGoup.col) || !isValid$3(cellGoup.row) || cellGoup.col === table.stateManager.hover.cellPos.col && cellGoup.row === table.stateManager.hover.cellPos.row || cellGoup.col === (null === (_e = table.stateManager.hover.cellPosContainHeader) || void 0 === _e ? void 0 : _e.col) && cellGoup.row === (null === (_f = table.stateManager.hover.cellPosContainHeader) || void 0 === _f ? void 0 : _f.row) || table.fireListeners(TABLE_EVENT_TYPE.MOUSEENTER_CELL, {
+                  col: cellGoup.col,
+                  row: cellGoup.row,
+                  cellRange: table.getCellRangeRelativeRect({
+                    col: cellGoup.col,
+                    row: cellGoup.row
+                  }),
+                  scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
+                  event: e.nativeEvent,
+                  target: null === (_g = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _g ? void 0 : _g.target,
+                  mergeCellInfo: null === (_h = eventArgsSet.eventArgs) || void 0 === _h ? void 0 : _h.mergeInfo
+                });
+              }
+              eventManager.dealTableHover(eventArgsSet);
+            } else {
+              if (!eventManager.checkCellFillhandle(eventArgsSet) && (eventManager.checkColumnResize(eventArgsSet, !0) || eventManager.checkRowResize(eventArgsSet, !0))) return table.scenegraph.updateChartState(null), void stateManager.updateInteractionState(InteractionState.grabing);
+              if (eventManager.checkColumnMover(eventArgsSet)) return void stateManager.updateInteractionState(InteractionState.grabing);
+              if (eventManager.checkCellFillhandle(eventArgsSet, !0) && eventManager.dealFillSelect(eventArgsSet)) return void stateManager.updateInteractionState(InteractionState.grabing);
+              eventManager.dealTableSelect(eventArgsSet) && stateManager.updateInteractionState(InteractionState.grabing);
+            }
           }
           if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_CELL)) {
             const eventArgsSet = getCellEventArgsSet(e);
@@ -43670,7 +43704,7 @@
               col: eventArgsSet.eventArgs.col,
               row: eventArgsSet.eventArgs.row,
               event: e.nativeEvent,
-              target: null === (_g = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _g ? void 0 : _g.target,
+              target: null === (_l = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _l ? void 0 : _l.target,
               mergeCellInfo: eventArgsSet.eventArgs.mergeInfo
             });
           }
@@ -44544,22 +44578,20 @@
 
     function bindGroupTitleCheckboxChange(table) {
       table.on("checkbox_state_change", args => {
-        var _a, _b;
+        var _a;
+        if (!0 !== (null === (_a = table.internalProps.rowSeriesNumber) || void 0 === _a ? void 0 : _a.enableTreeCheckbox)) return;
         const {
-          col: col,
-          row: row,
-          checked: checked,
-          field: field
-        } = args;
-        if ("_vtable_rowSeries_number" !== field || !0 !== (null === (_a = table.internalProps.rowSeriesNumber) || void 0 === _a ? void 0 : _a.enableTreeCheckbox)) return;
-        if (table.isHeader(col, row)) return;
-        const record = table.getCellOriginRecord(col, row),
+            col: col,
+            row: row,
+            checked: checked
+          } = args,
+          record = table.getCellOriginRecord(col, row),
           indexedData = table.dataSource.currentPagerIndexedData,
           titleShowIndex = table.getRecordShowIndexByCell(col, row);
         let titleIndex = indexedData[titleShowIndex];
-        if (isNumber$4(titleIndex) && (titleIndex = [titleIndex]), record.vtableMerge || (null === (_b = record.children) || void 0 === _b ? void 0 : _b.length)) {
-          if (checked) getHierarchyState(table, col, row) === HierarchyState.collapse ? updateChildrenCheckboxState(!0, titleIndex, table) : setAllChildrenCheckboxState(!0, titleShowIndex, titleIndex, indexedData, table), updateGroupTitleCheckboxState(titleShowIndex, titleIndex, indexedData, table);else {
-            getHierarchyState(table, col, row) === HierarchyState.collapse ? updateChildrenCheckboxState(!1, titleIndex, table) : setAllChildrenCheckboxState(!1, titleShowIndex, titleIndex, indexedData, table), updateGroupTitleCheckboxState(titleShowIndex, titleIndex, indexedData, table);
+        if (isNumber$4(titleIndex) && (titleIndex = [titleIndex]), record.vtableMerge) {
+          if (checked) table.getHierarchyState(col, row) === HierarchyState.collapse ? updateChildrenCheckboxState(!0, titleIndex, table) : setAllChildrenCheckboxState(!0, titleShowIndex, titleIndex, indexedData, table), updateGroupTitleCheckboxState(titleShowIndex, titleIndex, indexedData, table);else {
+            table.getHierarchyState(col, row) === HierarchyState.collapse ? updateChildrenCheckboxState(!1, titleIndex, table) : setAllChildrenCheckboxState(!1, titleShowIndex, titleIndex, indexedData, table), updateGroupTitleCheckboxState(titleShowIndex, titleIndex, indexedData, table);
             const oldHeaderCheckedState = table.stateManager.headerCheckedState._vtable_rowSeries_number,
               newHeaderCheckedState = table.stateManager.updateHeaderCheckedState("_vtable_rowSeries_number", col, row);
             oldHeaderCheckedState !== newHeaderCheckedState && table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState);
@@ -44595,23 +44627,8 @@
         key = currentIndex.toString(),
         currentIndexLength = isArray$7(currentIndex) ? currentIndex.length : 1;
       let start = !1;
-      const result = [],
-        keys = Array.from(checkedState.keys()).sort((a, b) => {
-          var _a, _b;
-          const aArr = a.split(","),
-            bArr = b.split(","),
-            maxLength = Math.max(aArr.length, bArr.length);
-          for (let i = 0; i < maxLength; i++) {
-            const a = null !== (_a = Number(aArr[i])) && void 0 !== _a ? _a : 0,
-              b = null !== (_b = Number(bArr[i])) && void 0 !== _b ? _b : 0;
-            if (a !== b) return a - b;
-          }
-          return 0;
-        }),
-        stateArr = keys.map(key => checkedState.get(key));
-      if (stateArr.forEach((state, i) => {
-        const index = keys[i],
-          value = state;
+      const result = [];
+      if (checkedState.forEach((value, index) => {
         if (start) {
           index.split(",").length === currentIndexLength ? start = !1 : result.push(value._vtable_rowSeries_number);
         }
@@ -44621,60 +44638,20 @@
         allUnChecked = result.every(item => !item);
       allChecked ? (table.stateManager.setCheckedState(col, row, "_vtable_rowSeries_number", !0), setCellCheckboxStateByAttribute(col, row, !0, table)) : allUnChecked ? (table.stateManager.setCheckedState(col, row, "_vtable_rowSeries_number", !1), setCellCheckboxStateByAttribute(col, row, !1, table)) : (table.stateManager.setCheckedState(col, row, "_vtable_rowSeries_number", "indeterminate"), setCellCheckboxStateByAttribute(col, row, "indeterminate", table));
     }
-    function updateChildrenCheckboxState(parentState, currentIndex, table) {
+    function updateChildrenCheckboxState(state, currentIndex, table) {
       const {
           checkedState: checkedState
         } = table.stateManager,
         key = currentIndex.toString(),
         currentIndexLength = isArray$7(currentIndex) ? currentIndex.length : 1;
       let start = !1;
-      const keys = Array.from(checkedState.keys()).sort((a, b) => {
-          var _a, _b;
-          const aArr = a.split(","),
-            bArr = b.split(","),
-            maxLength = Math.max(aArr.length, bArr.length);
-          for (let i = 0; i < maxLength; i++) {
-            const a = null !== (_a = Number(aArr[i])) && void 0 !== _a ? _a : 0,
-              b = null !== (_b = Number(bArr[i])) && void 0 !== _b ? _b : 0;
-            if (a !== b) return a - b;
-          }
-          return 0;
-        }),
-        stateArr = keys.map(key => checkedState.get(key));
-      stateArr.forEach((state, i) => {
-        const index = keys[i],
-          value = state;
+      checkedState.forEach((value, index) => {
         if (start) {
-          index.split(",").length === currentIndexLength ? start = !1 : value._vtable_rowSeries_number = parentState;
+          index.split(",").length === currentIndexLength ? start = !1 : value._vtable_rowSeries_number = state;
         }
         index === key && (start = !0);
       });
     }
-    function bindHeaderCheckboxChange(table) {
-      table.on("checkbox_state_change", args => {
-        const {
-          col: col,
-          row: row,
-          checked: checked,
-          field: field
-        } = args;
-        if (table.isHeader(col, row)) {
-          table.stateManager.setHeaderCheckedState(field, checked);
-          "checkbox" === table.getCellType(col, row) && table.scenegraph.updateCheckboxCellState(col, row, checked);
-        } else {
-          table.stateManager.setCheckedState(col, row, field, checked);
-          if ("checkbox" === table.getCellType(col, row)) {
-            const oldHeaderCheckedState = table.stateManager.headerCheckedState[field],
-              newHeaderCheckedState = table.stateManager.updateHeaderCheckedState(field, col, row);
-            oldHeaderCheckedState !== newHeaderCheckedState && table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState);
-          }
-        }
-      });
-    }
-    function getHierarchyState(table, col, row) {
-      const index = table.getRecordShowIndexByCell(col, row);
-      return table.dataSource.getHierarchyState(index);
-    }
 
     function bindButtonClickEvent(table) {
       table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
@@ -44752,7 +44729,7 @@
               });
             }
           }
-        }), this.table.isPivotTable() && checkHaveDrill(this.table) && bindDrillEvent(this.table), bindSparklineHoverEvent(this.table), bindAxisClickEvent(this.table), bindAxisHoverEvent(this.table), bindGroupTitleCheckboxChange(this.table), bindHeaderCheckboxChange(this.table), bindButtonClickEvent(this.table);
+        }), this.table.isPivotTable() && checkHaveDrill(this.table) && bindDrillEvent(this.table), bindSparklineHoverEvent(this.table), bindAxisClickEvent(this.table), bindAxisHoverEvent(this.table), bindGroupTitleCheckboxChange(this.table), bindButtonClickEvent(this.table);
       }
       dealTableHover(eventArgsSet) {
         if (!eventArgsSet) return void this.table.stateManager.updateHoverPos(-1, -1);
@@ -44829,6 +44806,18 @@
         }
         return !1;
       }
+      cellIsHeaderCheck(eventArgsSet, update) {
+        const {
+            eventArgs: eventArgs
+          } = eventArgsSet,
+          {
+            col: col,
+            row: row,
+            target: target
+          } = eventArgs;
+        if (!this.table.isHeader(col, row)) return !1;
+        return "checkbox" === this.table.getCellType(eventArgs.col, eventArgs.row) && "checkbox" === target.name;
+      }
       checkCellFillhandle(eventArgsSet, update) {
         var _a, _b, _c, _d;
         if (null === (_a = this.table.options.excelOptions) || void 0 === _a ? void 0 : _a.fillHandle) {
@@ -44853,7 +44842,7 @@
       dealRowResize(xInTable, yInTable) {
         this.table.stateManager.updateResizeRow(xInTable, yInTable);
       }
-      chechColumnMover(eventArgsSet) {
+      checkColumnMover(eventArgsSet) {
         var _a;
         const {
           eventArgs: eventArgs
@@ -47246,7 +47235,17 @@
           const styles = [];
           return customStyleIds.forEach(customStyleId => {
             const styleOption = this.getCustomCellStyleOption(customStyleId);
-            (null == styleOption ? void 0 : styleOption.style) && styles.push(styleOption.style);
+            if (isFunction$5(null == styleOption ? void 0 : styleOption.style)) {
+              const style = styleOption.style({
+                col: col,
+                row: row,
+                table: this.table,
+                value: this.table.getCellValue(col, row),
+                dataValue: this.table.getCellOriginValue(col, row),
+                cellHeaderPaths: this.table.getCellHeaderPaths(col, row)
+              });
+              styles.push(style);
+            } else (null == styleOption ? void 0 : styleOption.style) && styles.push(styleOption.style);
           }), merge$1({}, ...styles);
         }
       }
@@ -47481,8 +47480,8 @@
       }
       constructor(container) {
         let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.17.1-alpha.9", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        if (super(), this.showFrozenIcon = !0, this.version = "1.17.1", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         !1 === (null === (_a = options.customConfig) || void 0 === _a ? void 0 : _a.imageAnonymous) && (vglobal.isImageAnonymous = !1);
         const {
           frozenColCount = 0,
@@ -47505,6 +47504,7 @@
           rowResizeMode = "none",
           resize: resize,
           dragHeaderMode: dragHeaderMode,
+          dragOrder: dragOrder,
           showFrozenIcon: showFrozenIcon,
           allowFrozenColCount: allowFrozenColCount,
           padding: padding,
@@ -47531,7 +47531,7 @@
           bottom: 0
         }, padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), padding.right && (this.padding.right = padding.right))), isValid$3(canvasHeight) && isValid$3(canvasWidth) && (this.canvasSizeSeted = !0), this.tableNoFrameWidth = 0, this.tableNoFrameHeight = 0, this.canvasWidth = isNumber$4(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$4(canvasHeight) ? canvasHeight : void 0, this.columnWidthComputeMode = null !== (_b = options.columnWidthComputeMode) && void 0 !== _b ? _b : "normal";
         const internalProps = this.internalProps = {};
-        void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), this.options.canvas ? ("node" !== Env.mode && (internalProps.element = this.options.canvas.parentElement, internalProps.element.style.position = "relative"), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = this.options.canvas, internalProps.context = internalProps.canvas.getContext("2d")) : "node" !== Env.mode && (internalProps.element = createRootElement(this.padding), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = document.createElement("canvas"), internalProps.element.appendChild(internalProps.canvas), internalProps.context = internalProps.canvas.getContext("2d"), (null === (_c = options.customConfig) || void 0 === _c ? void 0 : _c.createReactContainer) && createReactContainer(this)), internalProps.handler = new EventHandler(), isNumber$4(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), internalProps.pixelRatio = pixelRatio, internalProps.frozenColCount = frozenColCount, internalProps.frozenRowCount = frozenRowCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.columnResizeMode = null !== (_d = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _d ? _d : columnResizeMode, internalProps.rowResizeMode = null !== (_e = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _e ? _e : rowResizeMode, internalProps.dragHeaderMode = null != dragHeaderMode ? dragHeaderMode : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map(), internalProps._widthResizedColMap = new Set(), internalProps._heightResizedRowMap = new Set(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {};
+        void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), this.options.canvas ? ("node" !== Env.mode && (internalProps.element = this.options.canvas.parentElement, internalProps.element.style.position = "relative"), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = this.options.canvas, internalProps.context = internalProps.canvas.getContext("2d")) : "node" !== Env.mode && (internalProps.element = createRootElement(this.padding), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = document.createElement("canvas"), internalProps.element.appendChild(internalProps.canvas), internalProps.context = internalProps.canvas.getContext("2d"), (null === (_c = options.customConfig) || void 0 === _c ? void 0 : _c.createReactContainer) && createReactContainer(this)), internalProps.handler = new EventHandler(), isNumber$4(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), internalProps.pixelRatio = pixelRatio, internalProps.frozenColCount = frozenColCount, internalProps.frozenRowCount = frozenRowCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.columnResizeMode = null !== (_d = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _d ? _d : columnResizeMode, internalProps.rowResizeMode = null !== (_e = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _e ? _e : rowResizeMode, internalProps.dragHeaderMode = null !== (_g = null !== (_f = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _f ? _f : dragHeaderMode) && void 0 !== _g ? _g : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map(), internalProps._widthResizedColMap = new Set(), internalProps._heightResizedRowMap = new Set(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {};
         const that = this;
         if (internalProps.calcWidthContext = {
           _: internalProps,
@@ -47539,7 +47539,7 @@
             var _a;
             return "node" === Env.mode ? that.canvasWidth / (null != pixelRatio ? pixelRatio : 1) : this._.canvas.width / (null !== (_a = this._.context.pixelRatio) && void 0 !== _a ? _a : window.devicePixelRatio);
           }
-        }, internalProps.cellTextOverflows = {}, internalProps.focusedTable = !1, internalProps.theme = themes.of(null !== (_f = options.theme) && void 0 !== _f ? _f : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), container ? (clearDOM && (container.innerHTML = ""), container.appendChild(internalProps.element), this._updateSize()) : this._updateSize(), internalProps.bodyHelper = new BodyHelper(this), internalProps.headerHelper = new HeaderHelper(this), internalProps.rowSeriesNumberHelper = new RowSeriesNumberHelper(this), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_g = options.allowFrozenColCount) && void 0 !== _g ? _g : 0, internalProps.limitMaxAutoWidth = null !== (_h = options.limitMaxAutoWidth) && void 0 !== _h ? _h : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, this.scenegraph = new Scenegraph(this), this.stateManager = new StateManager(this), this.eventManager = new EventManager(this), this.animationManager = new TableAnimationManager(this), options.legends) {
+        }, internalProps.cellTextOverflows = {}, internalProps.focusedTable = !1, internalProps.theme = themes.of(null !== (_h = options.theme) && void 0 !== _h ? _h : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), container ? (clearDOM && (container.innerHTML = ""), container.appendChild(internalProps.element), this._updateSize()) : this._updateSize(), internalProps.bodyHelper = new BodyHelper(this), internalProps.headerHelper = new HeaderHelper(this), internalProps.rowSeriesNumberHelper = new RowSeriesNumberHelper(this), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_j = options.allowFrozenColCount) && void 0 !== _j ? _j : 0, internalProps.limitMaxAutoWidth = null !== (_k = options.limitMaxAutoWidth) && void 0 !== _k ? _k : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, this.scenegraph = new Scenegraph(this), this.stateManager = new StateManager(this), this.eventManager = new EventManager(this), this.animationManager = new TableAnimationManager(this), options.legends) {
           internalProps.legends = [];
           const createLegend = Factory.getFunction("createLegend");
           if (Array.isArray(options.legends)) {
@@ -47565,7 +47565,7 @@
         }
         if (internalProps.menu = Object.assign({
           renderMode: "html"
-        }, options.menu), Array.isArray(null === (_j = options.menu) || void 0 === _j ? void 0 : _j.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_k = options.menu) || void 0 === _k ? void 0 : _k.dropDownMenuHighlight), (Array.isArray(null === (_l = options.menu) || void 0 === _l ? void 0 : _l.defaultHeaderMenuItems) || "function" == typeof (null === (_m = options.menu) || void 0 === _m ? void 0 : _m.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), "html" === internalProps.menu.renderMode) {
+        }, options.menu), Array.isArray(null === (_l = options.menu) || void 0 === _l ? void 0 : _l.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_m = options.menu) || void 0 === _m ? void 0 : _m.dropDownMenuHighlight), (Array.isArray(null === (_o = options.menu) || void 0 === _o ? void 0 : _o.defaultHeaderMenuItems) || "function" == typeof (null === (_p = options.menu) || void 0 === _p ? void 0 : _p.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), "html" === internalProps.menu.renderMode) {
           const MenuHandler = Factory.getComponent("menuHandler");
           internalProps.menuHandler = new MenuHandler(this);
         }
@@ -47573,7 +47573,7 @@
           changedCells: new Map()
         }, internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell);
         const CustomCellStylePlugin = Factory.getComponent("customCellStylePlugin");
-        CustomCellStylePlugin && (this.customCellStylePlugin = new CustomCellStylePlugin(this, null !== (_o = options.customCellStyle) && void 0 !== _o ? _o : [], null !== (_p = options.customCellStyleArrangement) && void 0 !== _p ? _p : [])), this._adjustCanvasSizeByOption();
+        CustomCellStylePlugin && (this.customCellStylePlugin = new CustomCellStylePlugin(this, null !== (_q = options.customCellStyle) && void 0 !== _q ? _q : [], null !== (_r = options.customCellStyleArrangement) && void 0 !== _r ? _r : [])), this._adjustCanvasSizeByOption();
       }
       _adjustCanvasSizeByOption() {
         "auto" !== this.options.canvasHeight && "auto" !== this.options.canvasWidth || setTimeout(() => {
@@ -48310,7 +48310,7 @@
         return super.fireListeners(type, event);
       }
       updateOption(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         this.options = options, this._hasAutoImageColumn = void 0;
         const {
           frozenColCount = 0,
@@ -48326,6 +48326,7 @@
           rowResizeMode = "none",
           resize: resize,
           dragHeaderMode: dragHeaderMode,
+          dragOrder: dragOrder,
           showFrozenIcon: showFrozenIcon,
           allowFrozenColCount: allowFrozenColCount,
           padding: padding,
@@ -48350,9 +48351,9 @@
         } = options;
         pixelRatio && pixelRatio !== this.internalProps.pixelRatio && (this.internalProps.pixelRatio = pixelRatio), padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), padding.right && (this.padding.right = padding.right))), this.showFrozenIcon = "boolean" != typeof showFrozenIcon || showFrozenIcon, "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), this.widthMode = null != widthMode ? widthMode : "standard", this.heightMode = null != heightMode ? heightMode : "standard", this._widthAdaptiveMode = null != widthAdaptiveMode ? widthAdaptiveMode : "only-body", this._heightAdaptiveMode = null != heightAdaptiveMode ? heightAdaptiveMode : "only-body", this.autoFillWidth = null != autoFillWidth && autoFillWidth, this.autoFillHeight = null != autoFillHeight && autoFillHeight, this.customRender = customRender, this.canvasWidth = isNumber$4(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$4(canvasHeight) ? canvasHeight : void 0;
         const internalProps = this.internalProps;
-        if ("node" === Env.mode || options.canvas || updateRootElementPadding(internalProps.element, this.padding), this.columnWidthComputeMode = null !== (_a = options.columnWidthComputeMode) && void 0 !== _a ? _a : "normal", internalProps.frozenColCount = frozenColCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.columnResizeMode = null !== (_b = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _b ? _b : columnResizeMode, internalProps.rowResizeMode = null !== (_c = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _c ? _c : rowResizeMode, internalProps.dragHeaderMode = null != dragHeaderMode ? dragHeaderMode : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps.cellTextOverflows = {}, internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map(), internalProps._widthResizedColMap = new Set(), internalProps._heightResizedRowMap = new Set(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {}, internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_d = options.theme) && void 0 !== _d ? _d : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), this.scenegraph.updateStageBackground(), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_e = options.allowFrozenColCount) && void 0 !== _e ? _e : 0, internalProps.limitMaxAutoWidth = null !== (_f = options.limitMaxAutoWidth) && void 0 !== _f ? _f : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, null === (_g = internalProps.legends) || void 0 === _g || _g.forEach(legend => {
+        if ("node" === Env.mode || options.canvas || updateRootElementPadding(internalProps.element, this.padding), this.columnWidthComputeMode = null !== (_a = options.columnWidthComputeMode) && void 0 !== _a ? _a : "normal", internalProps.frozenColCount = frozenColCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.columnResizeMode = null !== (_b = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _b ? _b : columnResizeMode, internalProps.rowResizeMode = null !== (_c = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _c ? _c : rowResizeMode, internalProps.dragHeaderMode = null !== (_e = null !== (_d = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _d ? _d : dragHeaderMode) && void 0 !== _e ? _e : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps.cellTextOverflows = {}, internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map(), internalProps._widthResizedColMap = new Set(), internalProps._heightResizedRowMap = new Set(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {}, internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_f = options.theme) && void 0 !== _f ? _f : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), this.scenegraph.updateStageBackground(), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_g = options.allowFrozenColCount) && void 0 !== _g ? _g : 0, internalProps.limitMaxAutoWidth = null !== (_h = options.limitMaxAutoWidth) && void 0 !== _h ? _h : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, null === (_j = internalProps.legends) || void 0 === _j || _j.forEach(legend => {
           null == legend || legend.release();
-        }), null === (_h = internalProps.title) || void 0 === _h || _h.release(), internalProps.title = null, null === (_j = internalProps.emptyTip) || void 0 === _j || _j.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
+        }), null === (_k = internalProps.title) || void 0 === _k || _k.release(), internalProps.title = null, null === (_l = internalProps.emptyTip) || void 0 === _l || _l.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
           internalProps.legends = [];
           const createLegend = Factory.getFunction("createLegend");
           if (Array.isArray(options.legends)) {
@@ -48378,11 +48379,11 @@
         }
         if (internalProps.menu = Object.assign({
           renderMode: "html"
-        }, options.menu), Array.isArray(null === (_k = options.menu) || void 0 === _k ? void 0 : _k.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_l = options.menu) || void 0 === _l ? void 0 : _l.dropDownMenuHighlight), (Array.isArray(null === (_m = options.menu) || void 0 === _m ? void 0 : _m.defaultHeaderMenuItems) || "function" == typeof (null === (_o = options.menu) || void 0 === _o ? void 0 : _o.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), "html" === internalProps.menu.renderMode && !internalProps.menuHandler) {
+        }, options.menu), Array.isArray(null === (_m = options.menu) || void 0 === _m ? void 0 : _m.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_o = options.menu) || void 0 === _o ? void 0 : _o.dropDownMenuHighlight), (Array.isArray(null === (_p = options.menu) || void 0 === _p ? void 0 : _p.defaultHeaderMenuItems) || "function" == typeof (null === (_q = options.menu) || void 0 === _q ? void 0 : _q.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), "html" === internalProps.menu.renderMode && !internalProps.menuHandler) {
           const MenuHandler = Factory.getComponent("menuHandler");
           internalProps.menuHandler = new MenuHandler(this);
         }
-        this.clearCellStyleCache(), this.clearColWidthCache(), this.clearRowHeightCache(), internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell), null === (_p = this.customCellStylePlugin) || void 0 === _p || _p.updateCustomCell(null !== (_q = options.customCellStyle) && void 0 !== _q ? _q : [], null !== (_r = options.customCellStyleArrangement) && void 0 !== _r ? _r : []), this._adjustCanvasSizeByOption();
+        this.clearCellStyleCache(), this.clearColWidthCache(), this.clearRowHeightCache(), internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell), null === (_r = this.customCellStylePlugin) || void 0 === _r || _r.updateCustomCell(null !== (_s = options.customCellStyle) && void 0 !== _s ? _s : [], null !== (_t = options.customCellStyleArrangement) && void 0 !== _t ? _t : []), this._adjustCanvasSizeByOption();
       }
       renderWithRecreateCells() {
         this.internalProps.stick.changedCells.clear();
@@ -49206,13 +49207,13 @@
       }
       getBodyIndexByTableIndex(col, row) {
         return {
-          col: col - this.rowHeaderLevelCount,
+          col: col - this.rowHeaderLevelCount - this.leftRowSeriesNumberCount,
           row: row - this.columnHeaderLevelCount
         };
       }
       getTableIndexByBodyIndex(col, row) {
         return {
-          col: col + this.rowHeaderLevelCount,
+          col: col + this.rowHeaderLevelCount + this.leftRowSeriesNumberCount,
           row: row + this.columnHeaderLevelCount
         };
       }
@@ -51391,7 +51392,8 @@
         return !1;
       }
       moveHeaderPosition(source, target) {
-        if (this.canMoveHeaderPosition(source, target)) {
+        var _a, _b;
+        if (((null === (_a = this._table.options.dragOrder) || void 0 === _a ? void 0 : _a.validateDragOrderOnEnd(source, target)) || !(null === (_b = this._table.options.dragOrder) || void 0 === _b ? void 0 : _b.validateDragOrderOnEnd)) && this.canMoveHeaderPosition(source, target)) {
           let sourceCellRange = this.getCellRange(source.col, source.row);
           if (this.isColumnHeader(source.col, source.row)) {
             const sourceSize = sourceCellRange.end.col - sourceCellRange.start.col + 1;
@@ -52160,18 +52162,18 @@
 
     class ListTable extends BaseTable {
       constructor(container, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), super(container, options), this.showHeader = !0;
         const internalProps = this.internalProps;
-        if (internalProps.frozenColDragHeaderMode = options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.multipleSort = !!options.multipleSort, internalProps.dataConfig = options.groupBy ? getGroupByDataConfig(options.groupBy) : {}, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_b = null !== (_a = options.enableTreeNodeMerge) && void 0 !== _a ? _a : isValid$3(options.groupBy)) && void 0 !== _b && _b, this.internalProps.headerHelper.setTableColumnsEditor(), this.showHeader = null === (_c = options.showHeader) || void 0 === _c || _c, this.internalProps.columnWidthConfig = options.columnWidthConfig, this.transpose = null !== (_d = options.transpose) && void 0 !== _d && _d, "node" !== Env.mode && (this.editorManager = new EditManager(this)), this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, options.dataSource ? this.dataSource = options.dataSource : options.records ? this.setRecords(options.records, {
+        if (internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.multipleSort = !!options.multipleSort, internalProps.dataConfig = options.groupBy ? getGroupByDataConfig(options.groupBy) : {}, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_d = null !== (_c = options.enableTreeNodeMerge) && void 0 !== _c ? _c : isValid$3(options.groupBy)) && void 0 !== _d && _d, this.internalProps.headerHelper.setTableColumnsEditor(), this.showHeader = null === (_e = options.showHeader) || void 0 === _e || _e, this.internalProps.columnWidthConfig = options.columnWidthConfig, this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, "node" !== Env.mode && (this.editorManager = new EditManager(this)), this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, options.dataSource ? this.dataSource = options.dataSource : options.records ? this.setRecords(options.records, {
           sortState: internalProps.sortState
         }) : this.setRecords([]), options.title) {
           const Title = Factory.getComponent("title");
           internalProps.title = new Title(options.title, this), this.scenegraph.resize();
         }
-        if (this.options.emptyTip) if (this.internalProps.emptyTip) null === (_e = this.internalProps.emptyTip) || void 0 === _e || _e.resetVisible();else {
+        if (this.options.emptyTip) if (this.internalProps.emptyTip) null === (_g = this.internalProps.emptyTip) || void 0 === _g || _g.resetVisible();else {
           const EmptyTip = Factory.getComponent("emptyTip");
-          this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_f = this.internalProps.emptyTip) || void 0 === _f || _f.resetVisible();
+          this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_h = this.internalProps.emptyTip) || void 0 === _h || _h.resetVisible();
         }
         if (options.enableTreeStickCell) {
           const ListTreeStickCellPlugin = Factory.getComponent("listTreeStickCellPlugin");
@@ -52373,9 +52375,9 @@
         return ifCan;
       }
       updateOption(options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const internalProps = this.internalProps;
-        if (super.updateOption(options), internalProps.frozenColDragHeaderMode = options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = options.groupBy ? getGroupByDataConfig(options.groupBy) : {}, this.showHeader = null === (_a = options.showHeader) || void 0 === _a || _a, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_c = null !== (_b = options.enableTreeNodeMerge) && void 0 !== _b ? _b : isValid$3(options.groupBy)) && void 0 !== _c && _c, this.internalProps.headerHelper.setTableColumnsEditor(), this.transpose = null !== (_d = options.transpose) && void 0 !== _d && _d, this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, this.internalProps.columnWidthConfig = options.columnWidthConfig, internalProps.releaseList && (internalProps.releaseList.forEach(releaseObj => {
+        if (super.updateOption(options), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = options.groupBy ? getGroupByDataConfig(options.groupBy) : {}, this.showHeader = null === (_c = options.showHeader) || void 0 === _c || _c, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_e = null !== (_d = options.enableTreeNodeMerge) && void 0 !== _d ? _d : isValid$3(options.groupBy)) && void 0 !== _e && _e, this.internalProps.headerHelper.setTableColumnsEditor(), this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, this.internalProps.columnWidthConfig = options.columnWidthConfig, internalProps.releaseList && (internalProps.releaseList.forEach(releaseObj => {
           var _a;
           return null === (_a = null == releaseObj ? void 0 : releaseObj.release) || void 0 === _a ? void 0 : _a.call(releaseObj);
         }), internalProps.releaseList = null), options.dataSource ? this.dataSource = options.dataSource : options.records ? this.setRecords(options.records, {
@@ -52384,9 +52386,9 @@
           const Title = Factory.getComponent("title");
           internalProps.title = new Title(options.title, this), this.scenegraph.resize();
         }
-        if (this.options.emptyTip) if (this.internalProps.emptyTip) null === (_e = this.internalProps.emptyTip) || void 0 === _e || _e.resetVisible();else {
+        if (this.options.emptyTip) if (this.internalProps.emptyTip) null === (_g = this.internalProps.emptyTip) || void 0 === _g || _g.resetVisible();else {
           const EmptyTip = Factory.getComponent("emptyTip");
-          this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_f = this.internalProps.emptyTip) || void 0 === _f || _f.resetVisible();
+          this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_h = this.internalProps.emptyTip) || void 0 === _h || _h.resetVisible();
         }
         return new Promise(resolve => {
           setTimeout(resolve, 0);
@@ -52575,19 +52577,8 @@
       }
       getCheckboxState(field) {
         if (this.stateManager.checkedState.size < this.rowCount - this.columnHeaderLevelCount && this.stateManager.initLeftRecordsCheckState(this.records), isValid$3(field)) {
-          let stateArr = Array.from(this.stateManager.checkedState.keys()).sort((a, b) => {
-            var _a, _b;
-            const aArr = a.split(","),
-              bArr = b.split(","),
-              maxLength = Math.max(aArr.length, bArr.length);
-            for (let i = 0; i < maxLength; i++) {
-              const a = null !== (_a = Number(aArr[i])) && void 0 !== _a ? _a : 0,
-                b = null !== (_b = Number(bArr[i])) && void 0 !== _b ? _b : 0;
-              if (a !== b) return a - b;
-            }
-            return 0;
-          }).map(key => this.stateManager.checkedState.get(key));
-          return this.options.groupBy && (stateArr = getGroupCheckboxState(this)), Array.from(stateArr, state => state && state[field]);
+          let stateArr = Array.from(this.stateManager.checkedState.keys()).sort((a, b) => Number(a) - Number(b)).map(key => this.stateManager.checkedState.get(key));
+          return this.options.groupBy && (stateArr = getGroupCheckboxState(this)), Array.from(stateArr, state => state[field]);
         }
         return new Array(...this.stateManager.checkedState.values());
       }