@visactor/vtable-calendar 1.17.0-alpha.4 → 1.17.1-alpha.0

package/dist/vtable-calendar.js

@@ -26272,6 +26272,110 @@
       }
     };
 
+    function loadSwitchComponent() {
+      registerGroup(), registerRect(), registerText(), registerCircle();
+    }
+
+    loadSwitchComponent();
+    class Switch extends AbstractComponent {
+      constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Switch.defaultAttributes, attributes)), this._handlePointerUp = () => {
+          this.attribute.disabled || (this.attribute.checked ? this.setAttribute("checked", !1) : this.setAttribute("checked", !0), this._dispatchEvent("switch_state_change", {
+            eventType: "switch_state_change",
+            checked: this.attribute.checked
+          }), this.stage.renderNextFrame());
+        }, this.renderGroup(), this.onBeforeAttributeUpdate = (val, attributes, key) => {
+          "interactive" in val && this.setAttribute("pickable", val.interactive), "disabled" in val && this.setAttribute("cursor", val.disable ? this.attribute.disableCursor : this.attribute.cursor);
+        }, this.addEventListener("pointerup", this._handlePointerUp);
+      }
+      render() {
+        this.removeAllChild(!0), this.renderBox(), this.renderCircle(), this.renderText(), this.layout();
+      }
+      renderBox() {
+        this._box = new Rect$1(merge$1({}, this.attribute.box)), this.attribute.disabled && this.attribute.checked ? this._box.setAttributes({
+          fill: this.attribute.box.disableCheckedFill
+        }) : this.attribute.disabled && !this.attribute.checked ? this._box.setAttributes({
+          fill: this.attribute.box.disableUncheckedFill
+        }) : this.attribute.checked ? this._box.setAttributes({
+          fill: this.attribute.box.checkedFill
+        }) : this._box.setAttributes({
+          fill: this.attribute.box.uncheckedFill
+        }), this.appendChild(this._box);
+      }
+      renderCircle() {
+        this._circle = new Circle(merge$1({}, this.attribute.circle)), this.appendChild(this._circle);
+      }
+      renderText() {
+        var _a, _b, _c;
+        this._text = new Text(merge$1({}, null !== (_a = this.attribute.text) && void 0 !== _a ? _a : {})), this.attribute.checked && (null === (_b = this.attribute.text) || void 0 === _b ? void 0 : _b.checkedText) ? this._text.setAttributes({
+          text: this.attribute.text.checkedText
+        }) : (null === (_c = this.attribute.text) || void 0 === _c ? void 0 : _c.uncheckedText) && this._text.setAttributes({
+          text: this.attribute.text.uncheckedText
+        }), this.appendChild(this._text);
+      }
+      renderGroup() {
+        this.attribute.interactive || this.setAttribute("pickable", !1), this.attribute.disabled && this.setAttribute("cursor", this.attribute.disableCursor);
+      }
+      layout() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const space = this.attribute.spaceBetweenTextAndCircle,
+          radius = this.attribute.circle.radius,
+          boxHeight = this.attribute.box.height,
+          circleHeight = 2 * radius,
+          textHeight = this._text.AABBBounds.height(),
+          maxHeight = Math.max(boxHeight, circleHeight, textHeight),
+          circleY = maxHeight / 2 - circleHeight / 2 + radius,
+          textY = maxHeight / 2 - textHeight / 2,
+          boxWidth = this.attribute.box.width,
+          circleWidth = 2 * radius,
+          textWidth = measureTextSize((null !== (_c = null === (_b = null === (_a = this.attribute.text) || void 0 === _a ? void 0 : _a.checkedText) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0) > (null !== (_f = null === (_e = null === (_d = this.attribute.text) || void 0 === _d ? void 0 : _d.uncheckedText) || void 0 === _e ? void 0 : _e.length) && void 0 !== _f ? _f : 0) ? null !== (_h = null === (_g = this.attribute.text) || void 0 === _g ? void 0 : _g.checkedText) && void 0 !== _h ? _h : "" : null !== (_k = null === (_j = this.attribute.text) || void 0 === _j ? void 0 : _j.uncheckedText) && void 0 !== _k ? _k : "", this._text.attribute).width,
+          maxWidth = Math.max(boxWidth, circleWidth + textWidth + 3 * space),
+          circleX = boxHeight / 2 - circleWidth / 2 + radius,
+          textX = circleX + radius + space;
+        this._box.setAttributes({
+          width: maxWidth,
+          height: maxHeight
+        }), this._circle.setAttributes({
+          y: circleY,
+          x: this.attribute.checked ? circleX : maxWidth - circleX
+        }), this._text.setAttributes({
+          x: this.attribute.checked ? textX : maxWidth - textX - textWidth,
+          y: textY
+        });
+      }
+      initAttributes(params, options) {
+        params = (null == options ? void 0 : options.skipDefault) ? params : merge$1({}, Switch.defaultAttributes, params), super.initAttributes(params), this.renderGroup(), this.render();
+      }
+    }
+    Switch.defaultAttributes = {
+      interactive: !0,
+      disabled: !1,
+      checked: !1,
+      cursor: "pointer",
+      disableCursor: "not-allowed",
+      circle: {
+        radius: 8,
+        fill: "#FFF",
+        pickable: !1
+      },
+      box: {
+        width: 40,
+        height: 24,
+        cornerRadius: 12,
+        uncheckedFill: "rgb(201,205,212)",
+        checkedFill: "#165DFF",
+        disableUncheckedFill: "rgb(242,243,245)",
+        disableCheckedFill: "rgb(148,191,255)",
+        pickable: !1
+      },
+      text: {
+        textAlign: "left",
+        textBaseline: "top",
+        pickable: !1
+      },
+      spaceBetweenTextAndCircle: 6
+    };
+
     let registed = !1;
     function registerForVrender() {
       registed || (registed = !0, preLoadAllModule(), isBrowserEnv() ? loadBrowserEnv(container) : isNodeEnv() && loadNodeEnv(container), registerArc(), registerCircle(), registerGroup(), registerImage(), registerLine(), registerRect(), registerRichtext(), registerShadowRoot(), registerSymbol(), registerText(), registerFlexLayoutPlugin(), loadPoptip(), registerFlexLayoutPlugin());
@@ -26628,7 +26732,7 @@
       }
     };
 
-    let defaultStyle$9;
+    let defaultStyle$b;
     const STYLE_EVENT_TYPE = {
       CHANGE_STYLE: "change_style"
     };
@@ -26637,7 +26741,7 @@
         return STYLE_EVENT_TYPE;
       }
       static get DEFAULT() {
-        return defaultStyle$9 || (defaultStyle$9 = new Style());
+        return defaultStyle$b || (defaultStyle$b = new Style());
       }
       constructor() {
         let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -26818,10 +26922,10 @@
       }
     };
 
-    let defaultStyle$8;
+    let defaultStyle$a;
     let ImageStyle$1 = class ImageStyle extends Style$1 {
       static get DEFAULT() {
-        return defaultStyle$8 || (defaultStyle$8 = new ImageStyle());
+        return defaultStyle$a || (defaultStyle$a = new ImageStyle());
       }
       constructor() {
         let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -26833,10 +26937,10 @@
       }
     };
 
-    let defaultStyle$7;
+    let defaultStyle$9;
     class TextStyle extends Style$1 {
       static get DEFAULT() {
-        return defaultStyle$7 || (defaultStyle$7 = new TextStyle());
+        return defaultStyle$9 || (defaultStyle$9 = new TextStyle());
       }
       constructor() {
         let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -26861,10 +26965,10 @@
       }
     }
 
-    let defaultStyle$6;
+    let defaultStyle$8;
     let CheckboxStyle$1 = class CheckboxStyle extends Style$1 {
       static get DEFAULT() {
-        return defaultStyle$6 || (defaultStyle$6 = new CheckboxStyle());
+        return defaultStyle$8 || (defaultStyle$8 = new CheckboxStyle());
       }
       constructor() {
         let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -26947,10 +27051,10 @@
       }
     };
 
-    let defaultStyle$5;
+    let defaultStyle$7;
     class RadioStyle extends Style$1 {
       static get DEFAULT() {
-        return defaultStyle$5 || (defaultStyle$5 = new RadioStyle());
+        return defaultStyle$7 || (defaultStyle$7 = new RadioStyle());
       }
       constructor() {
         let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -27039,12 +27143,178 @@
       }
     }
 
+    let defaultStyle$6;
+    class SwitchStyle extends Style$1 {
+      static get DEFAULT() {
+        return defaultStyle$6 || (defaultStyle$6 = new SwitchStyle());
+      }
+      constructor() {
+        let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        let headerStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        let switchThemeStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        super(style, headerStyle), this._spaceBetweenTextAndCircle = (null !== (_b = null !== (_a = null == style ? void 0 : style.spaceBetweenTextAndCircle) && void 0 !== _a ? _a : null == headerStyle ? void 0 : headerStyle.spaceBetweenTextAndCircle) && void 0 !== _b ? _b : null == switchThemeStyle ? void 0 : switchThemeStyle.spaceBetweenTextAndCircle) || 6, this._circleRadius = (null !== (_d = null === (_c = null == style ? void 0 : style.switchStyle) || void 0 === _c ? void 0 : _c.circleRadius) && void 0 !== _d ? _d : null == switchThemeStyle ? void 0 : switchThemeStyle.circleRadius) || 8, this._boxWidth = (null !== (_f = null === (_e = null == style ? void 0 : style.switchStyle) || void 0 === _e ? void 0 : _e.boxWidth) && void 0 !== _f ? _f : null == switchThemeStyle ? void 0 : switchThemeStyle.boxWidth) || 40, this._boxHeight = (null !== (_h = null === (_g = null == style ? void 0 : style.switchStyle) || void 0 === _g ? void 0 : _g.boxHeight) && void 0 !== _h ? _h : null == switchThemeStyle ? void 0 : switchThemeStyle.boxHeight) || 24, this._checkedFill = (null !== (_k = null === (_j = null == style ? void 0 : style.switchStyle) || void 0 === _j ? void 0 : _j.checkedFill) && void 0 !== _k ? _k : null == switchThemeStyle ? void 0 : switchThemeStyle.checkedFill) || "#165DFF", this._uncheckedFill = (null !== (_m = null === (_l = null == style ? void 0 : style.switchStyle) || void 0 === _l ? void 0 : _l.uncheckedFill) && void 0 !== _m ? _m : null == switchThemeStyle ? void 0 : switchThemeStyle.uncheckedFill) || "#c9cdd4", this._disableCheckedFill = (null !== (_p = null === (_o = null == style ? void 0 : style.switchStyle) || void 0 === _o ? void 0 : _o.disableCheckedFill) && void 0 !== _p ? _p : null == switchThemeStyle ? void 0 : switchThemeStyle.disableCheckedFill) || "#94bfff", this._disableUncheckedFill = (null !== (_r = null === (_q = null == style ? void 0 : style.switchStyle) || void 0 === _q ? void 0 : _q.disableUncheckedFill) && void 0 !== _r ? _r : null == switchThemeStyle ? void 0 : switchThemeStyle.disableUncheckedFill) || "#f2f3f5", this._circleFill = (null !== (_t = null === (_s = null == style ? void 0 : style.switchStyle) || void 0 === _s ? void 0 : _s.circleFill) && void 0 !== _t ? _t : null == switchThemeStyle ? void 0 : switchThemeStyle.circleFill) || "#FFF";
+      }
+      get spaceBetweenTextAndCircle() {
+        return this._spaceBetweenTextAndCircle;
+      }
+      set spaceBetweenTextAndCircle(spaceBetweenTextAndCircle) {
+        this._spaceBetweenTextAndCircle = spaceBetweenTextAndCircle;
+      }
+      get circleRadius() {
+        return this._circleRadius;
+      }
+      set circleRadius(circleRadius) {
+        this._circleRadius = circleRadius;
+      }
+      get boxWidth() {
+        return this._boxWidth;
+      }
+      set boxWidth(boxWidth) {
+        this._boxWidth = boxWidth;
+      }
+      get boxHeight() {
+        return this._boxHeight;
+      }
+      set boxHeight(boxHeight) {
+        this._boxHeight = boxHeight;
+      }
+      get checkedFill() {
+        return this._checkedFill;
+      }
+      set checkedFill(checkedFill) {
+        this._checkedFill = checkedFill;
+      }
+      get uncheckedFill() {
+        return this._uncheckedFill;
+      }
+      set uncheckedFill(uncheckedFill) {
+        this._uncheckedFill = uncheckedFill;
+      }
+      get disableCheckedFill() {
+        return this._disableCheckedFill;
+      }
+      set disableCheckedFill(disableCheckedFill) {
+        this._disableCheckedFill = disableCheckedFill;
+      }
+      get disableUncheckedFill() {
+        return this._disableUncheckedFill;
+      }
+      set disableUncheckedFill(disableUncheckedFill) {
+        this._disableUncheckedFill = disableUncheckedFill;
+      }
+      get circleFill() {
+        return this._circleFill;
+      }
+      set circleFill(circleFill) {
+        this._circleFill = circleFill;
+      }
+      getStyle(style) {
+        return new SwitchStyle(style, this);
+      }
+      clone() {
+        return new SwitchStyle(this);
+      }
+    }
+
+    let defaultStyle$5;
+    class ButtonStyle extends Style$1 {
+      static get DEFAULT() {
+        return defaultStyle$5 || (defaultStyle$5 = new ButtonStyle());
+      }
+      constructor() {
+        let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        let headerStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        let buttonThemeStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        super(style, headerStyle), this._buttonColor = (null !== (_b = null === (_a = null == style ? void 0 : style.buttonStyle) || void 0 === _a ? void 0 : _a.buttonColor) && void 0 !== _b ? _b : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonColor) || "#165DFF", this._buttonBorderColor = (null !== (_d = null === (_c = null == style ? void 0 : style.buttonStyle) || void 0 === _c ? void 0 : _c.buttonBorderColor) && void 0 !== _d ? _d : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonBorderColor) || "#165DFF", this._buttonLineWidth = (null !== (_f = null === (_e = null == style ? void 0 : style.buttonStyle) || void 0 === _e ? void 0 : _e.buttonLineWidth) && void 0 !== _f ? _f : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonLineWidth) || 1, this._buttonBorderRadius = (null !== (_h = null === (_g = null == style ? void 0 : style.buttonStyle) || void 0 === _g ? void 0 : _g.buttonBorderRadius) && void 0 !== _h ? _h : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonBorderRadius) || 2, this._buttonHoverColor = (null !== (_k = null === (_j = null == style ? void 0 : style.buttonStyle) || void 0 === _j ? void 0 : _j.buttonHoverColor) && void 0 !== _k ? _k : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonHoverColor) || "#4080FF", this._buttonHoverBorderColor = (null !== (_m = null === (_l = null == style ? void 0 : style.buttonStyle) || void 0 === _l ? void 0 : _l.buttonHoverBorderColor) && void 0 !== _m ? _m : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonHoverBorderColor) || "#4080FF", this._buttonTextHoverColor = null !== (_p = null === (_o = null == style ? void 0 : style.buttonStyle) || void 0 === _o ? void 0 : _o.buttonTextHoverColor) && void 0 !== _p ? _p : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonTextHoverColor, this._buttonDisableColor = (null !== (_r = null === (_q = null == style ? void 0 : style.buttonStyle) || void 0 === _q ? void 0 : _q.buttonDisableColor) && void 0 !== _r ? _r : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonDisableColor) || "#94bfff", this._buttonDisableBorderColor = (null !== (_t = null === (_s = null == style ? void 0 : style.buttonStyle) || void 0 === _s ? void 0 : _s.buttonDisableBorderColor) && void 0 !== _t ? _t : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonDisableBorderColor) || "#94bfff", this._buttonTextDisableColor = null !== (_v = null === (_u = null == style ? void 0 : style.buttonStyle) || void 0 === _u ? void 0 : _u.buttonTextDisableColor) && void 0 !== _v ? _v : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonTextDisableColor, this._buttonPadding = (null !== (_x = null === (_w = null == style ? void 0 : style.buttonStyle) || void 0 === _w ? void 0 : _w.buttonPadding) && void 0 !== _x ? _x : null == buttonThemeStyle ? void 0 : buttonThemeStyle.buttonPadding) || 10;
+      }
+      get buttonColor() {
+        return this._buttonColor;
+      }
+      set buttonColor(buttonColor) {
+        this._buttonColor = buttonColor;
+      }
+      get buttonBorderColor() {
+        return this._buttonBorderColor;
+      }
+      set buttonBorderColor(buttonBorderColor) {
+        this._buttonBorderColor = buttonBorderColor;
+      }
+      get buttonLineWidth() {
+        return this._buttonLineWidth;
+      }
+      set buttonLineWidth(buttonLineWidth) {
+        this._buttonLineWidth = buttonLineWidth;
+      }
+      get buttonBorderRadius() {
+        return this._buttonBorderRadius;
+      }
+      set buttonBorderRadius(buttonBorderRadius) {
+        this._buttonBorderRadius = buttonBorderRadius;
+      }
+      get buttonHoverColor() {
+        return this._buttonHoverColor;
+      }
+      set buttonHoverColor(buttonHoverColor) {
+        this._buttonHoverColor = buttonHoverColor;
+      }
+      get buttonHoverBorderColor() {
+        return this._buttonHoverBorderColor;
+      }
+      set buttonHoverBorderColor(buttonHoverBorderColor) {
+        this._buttonHoverBorderColor = buttonHoverBorderColor;
+      }
+      get buttonTextHoverColor() {
+        return this._buttonTextHoverColor;
+      }
+      set buttonTextHoverColor(buttonTextHoverColor) {
+        this._buttonTextHoverColor = buttonTextHoverColor;
+      }
+      get buttonDisableColor() {
+        return this._buttonDisableColor;
+      }
+      set buttonDisableColor(buttonDisableColor) {
+        this._buttonDisableColor = buttonDisableColor;
+      }
+      get buttonDisableBorderColor() {
+        return this._buttonDisableBorderColor;
+      }
+      set buttonDisableBorderColor(buttonDisableBorderColor) {
+        this._buttonDisableBorderColor = buttonDisableBorderColor;
+      }
+      get buttonTextDisableColor() {
+        return this._buttonTextDisableColor;
+      }
+      set buttonTextDisableColor(buttonTextDisableColor) {
+        this._buttonTextDisableColor = buttonTextDisableColor;
+      }
+      get buttonTextHoverBorderColor() {
+        return this._buttonTextHoverBorderColor;
+      }
+      set buttonTextHoverBorderColor(buttonTextHoverBorderColor) {
+        this._buttonTextHoverBorderColor = buttonTextHoverBorderColor;
+      }
+      get buttonPadding() {
+        return this._buttonPadding;
+      }
+      set buttonPadding(buttonPadding) {
+        this._buttonPadding = buttonPadding;
+      }
+      getStyle(style) {
+        return new ButtonStyle(style, this);
+      }
+      clone() {
+        return new ButtonStyle(this);
+      }
+    }
+
     function of$2(columnStyle, bodyStyle, styleArg) {
       let StyleClassDef = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Style$1;
       let globalAutoWrapText = arguments.length > 4 ? arguments[4] : undefined;
       let theme = arguments.length > 5 ? arguments[5] : undefined;
-      var _a, _b;
-      return columnStyle || bodyStyle ? columnStyle instanceof Style$1 ? columnStyle : "function" == typeof columnStyle ? of$2(columnStyle(styleArg), bodyStyle, styleArg, StyleClassDef, globalAutoWrapText, theme) : (columnStyle || (columnStyle = {}), globalAutoWrapText && !isValid$3(columnStyle.autoWrapText) && (columnStyle.autoWrapText = !0), StyleClassDef === CheckboxStyle$1 ? new CheckboxStyle$1(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {}, null !== (_a = theme.checkboxStyle) && void 0 !== _a ? _a : {}) : StyleClassDef === RadioStyle ? new RadioStyle(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {}, null !== (_b = theme.radioStyle) && void 0 !== _b ? _b : {}) : new StyleClassDef(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {})) : StyleClassDef.DEFAULT;
+      var _a, _b, _c, _d;
+      return columnStyle || bodyStyle ? columnStyle instanceof Style$1 ? columnStyle : "function" == typeof columnStyle ? of$2(columnStyle(styleArg), bodyStyle, styleArg, StyleClassDef, globalAutoWrapText, theme) : (columnStyle || (columnStyle = {}), globalAutoWrapText && !isValid$3(columnStyle.autoWrapText) && (columnStyle.autoWrapText = !0), StyleClassDef === CheckboxStyle$1 ? new CheckboxStyle$1(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {}, null !== (_a = theme.checkboxStyle) && void 0 !== _a ? _a : {}) : StyleClassDef === RadioStyle ? new RadioStyle(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {}, null !== (_b = theme.radioStyle) && void 0 !== _b ? _b : {}) : StyleClassDef === SwitchStyle ? new SwitchStyle(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {}, null !== (_c = theme.switchStyle) && void 0 !== _c ? _c : {}) : StyleClassDef === ButtonStyle ? new ButtonStyle(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {}, null !== (_d = theme.buttonStyle) && void 0 !== _d ? _d : {}) : new StyleClassDef(null != columnStyle ? columnStyle : {}, null != bodyStyle ? bodyStyle : {})) : StyleClassDef.DEFAULT;
     }
 
     class Env {
@@ -27453,6 +27723,7 @@
       MOUSELEAVE_AXIS: "mouseleave_axis",
       CHECKBOX_STATE_CHANGE: "checkbox_state_change",
       RADIO_STATE_CHANGE: "radio_state_change",
+      SWITCH_STATE_CHANGE: "switch_state_change",
       AFTER_RENDER: "after_render",
       INITIALIZED: "initialized",
       CHANGE_CELL_VALUE: "change_cell_value",
@@ -27460,7 +27731,8 @@
       MOUSEDOWN_FILL_HANDLE: "mousedown_fill_handle",
       DBLCLICK_FILL_HANDLE: "dblclick_fill_handle",
       EMPTY_TIP_CLICK: "empty_tip_click",
-      EMPTY_TIP_DBLCLICK: "empty_tip_dblclick"
+      EMPTY_TIP_DBLCLICK: "empty_tip_dblclick",
+      BUTTON_CLICK: "button_click"
     };
 
     const judgeType = value => {
@@ -28345,7 +28617,7 @@
     }
     class TableTheme {
       constructor(obj, superTheme) {
-        this._defaultStyle = null, this._header = null, this._cornerHeader = null, this._cornerRightTopCell = null, this._cornerLeftBottomCell = null, this._cornerRightBottomCell = null, this._rightFrozen = null, this._bottomFrozen = null, this._rowHeader = null, this._body = null, this._groupTitle = null, this._scroll = null, this._tooltip = null, this._frameStyle = null, this._columnResize = null, this._dragHeaderSplitLine = null, this._frozenColumnLine = null, this._selectionStyle = null, this._axisStyle = null, this._checkboxStyle = null, this._radioStyle = null, this._textPopTipStyle = null, this._internalIconsStyle = null, this.isPivot = !1, this.name = "", this.internalTheme = {
+        this._defaultStyle = null, this._header = null, this._cornerHeader = null, this._cornerRightTopCell = null, this._cornerLeftBottomCell = null, this._cornerRightBottomCell = null, this._rightFrozen = null, this._bottomFrozen = null, this._rowHeader = null, this._body = null, this._groupTitle = null, this._scroll = null, this._tooltip = null, this._frameStyle = null, this._columnResize = null, this._dragHeaderSplitLine = null, this._frozenColumnLine = null, this._selectionStyle = null, this._axisStyle = null, this._checkboxStyle = null, this._radioStyle = null, this._switchStyle = null, this._buttonStyle = null, this._textPopTipStyle = null, this._internalIconsStyle = null, this.isPivot = !1, this.name = "", this.internalTheme = {
           obj: obj,
           superTheme: superTheme
         }, this.name = getProp$1(obj, superTheme, ["name"]);
@@ -28979,6 +29251,28 @@
         }
         return this._radioStyle;
       }
+      get switchStyle() {
+        if (!this._switchStyle) {
+          const {
+              obj: obj,
+              superTheme: superTheme
+            } = this.internalTheme,
+            switchStyle = ingoreNoneValueMerge({}, superTheme.switchStyle, obj.switchStyle);
+          this._switchStyle = switchStyle;
+        }
+        return this._switchStyle;
+      }
+      get buttonStyle() {
+        if (!this._buttonStyle) {
+          const {
+              obj: obj,
+              superTheme: superTheme
+            } = this.internalTheme,
+            buttonStyle = ingoreNoneValueMerge({}, superTheme.buttonStyle, obj.buttonStyle);
+          this._buttonStyle = buttonStyle;
+        }
+        return this._buttonStyle;
+      }
       get textPopTipStyle() {
         if (!this._textPopTipStyle) {
           const {
@@ -32019,6 +32313,12 @@
         super.setAttributes(params, forceUpdateTag, context), params.gif && this.loadGif();
       }
     }
+    class TextIcon extends Text {
+      constructor(params) {
+        var _a, _b, _c, _d, _e;
+        params.fill = null !== (_a = params.fill) && void 0 !== _a ? _a : "#00F", params.fontSize = null !== (_b = params.fontSize) && void 0 !== _b ? _b : 12, params.underline = null !== (_c = params.underline) && void 0 !== _c ? _c : 1, params.textBaseline = null !== (_d = params.textBaseline) && void 0 !== _d ? _d : "top", params.cursor = null !== (_e = params.cursor) && void 0 !== _e ? _e : "pointer", super(params);
+      }
+    }
 
     function emptyCustomLayout(args) {
       return {
@@ -33046,7 +33346,7 @@
       updateCenterLayout(contentWidth) {
         let textWidth = contentWidth;
         this._centerGroup.forEachChildren(child => {
-          child instanceof Icon && (textWidth -= child.AABBBounds.width());
+          (child instanceof Icon || child instanceof TextIcon) && (textWidth -= child.AABBBounds.width());
         });
         const text = this._centerGroup.getChildByName("text");
         text instanceof RichText ? text.setAttribute("width", textWidth) : text instanceof Text && text.setAttribute("maxLineWidth", textWidth);
@@ -33231,10 +33531,9 @@
       var _a, _b, _c, _d, _e, _f;
       const iconAttribute = {};
       "image" === icon.type ? icon.isGif ? (iconAttribute.gif = icon.src, iconAttribute.image = icon.src) : iconAttribute.image = icon.src : ("svg" === icon.type || "svg" in icon) && (iconAttribute.image = icon.svg), iconAttribute.width = icon.width, iconAttribute.height = icon.height, iconAttribute.visibleTime = null !== (_a = icon.visibleTime) && void 0 !== _a ? _a : "always", iconAttribute.funcType = icon.funcType, iconAttribute.interactive = icon.interactive, iconAttribute.isGif = icon.isGif;
-      let hierarchyOffset = 0;
-      if (dealWithIconComputeVar && 0 !== (null == dealWithIconComputeVar ? void 0 : dealWithIconComputeVar.addedHierarchyOffset) || !isNumber$4(col) || !isNumber$4(row) || !table || icon.funcType !== IconFuncTypeEnum.collapse && icon.funcType !== IconFuncTypeEnum.expand && icon.positionType !== IconPosition.contentLeft && icon.positionType !== IconPosition.contentRight || (hierarchyOffset = range ? getHierarchyOffset(range.start.col, range.start.row, table) : getHierarchyOffset(col, row, table), dealWithIconComputeVar && (dealWithIconComputeVar.addedHierarchyOffset = 1)), iconAttribute.marginLeft = (null !== (_b = icon.marginLeft) && void 0 !== _b ? _b : 0) + hierarchyOffset, iconAttribute.marginRight = null !== (_c = icon.marginRight) && void 0 !== _c ? _c : 0, !1 === icon.interactive && (iconAttribute.pickable = !1), icon.hover && (iconAttribute.backgroundWidth = null !== (_d = icon.hover.width) && void 0 !== _d ? _d : icon.width, iconAttribute.backgroundHeight = null !== (_e = icon.hover.width) && void 0 !== _e ? _e : icon.width, iconAttribute.backgroundColor = null !== (_f = icon.hover.bgColor) && void 0 !== _f ? _f : "rgba(22,44,66,0.2)", iconAttribute.hoverImage = icon.hover.image), icon.cursor && (iconAttribute.cursor = icon.cursor), "shape" in icon && "circle" === icon.shape && (iconAttribute.shape = icon.shape), mark) return mark.setAttributes(iconAttribute), mark.loadImage(iconAttribute.image), mark.tooltip = icon.tooltip, mark.name = icon.name, mark;
-      const iconMark = new Icon(iconAttribute);
-      return iconMark.tooltip = icon.tooltip, iconMark.name = icon.name, iconMark;
+      let iconMark,
+        hierarchyOffset = 0;
+      return dealWithIconComputeVar && 0 !== (null == dealWithIconComputeVar ? void 0 : dealWithIconComputeVar.addedHierarchyOffset) || !isNumber$4(col) || !isNumber$4(row) || !table || icon.funcType !== IconFuncTypeEnum.collapse && icon.funcType !== IconFuncTypeEnum.expand && icon.positionType !== IconPosition.contentLeft && icon.positionType !== IconPosition.contentRight || (hierarchyOffset = range ? getHierarchyOffset(range.start.col, range.start.row, table) : getHierarchyOffset(col, row, table), dealWithIconComputeVar && (dealWithIconComputeVar.addedHierarchyOffset = 1)), iconAttribute.marginLeft = (null !== (_b = icon.marginLeft) && void 0 !== _b ? _b : 0) + hierarchyOffset, iconAttribute.marginRight = null !== (_c = icon.marginRight) && void 0 !== _c ? _c : 0, !1 === icon.interactive && (iconAttribute.pickable = !1), icon.hover && (iconAttribute.backgroundWidth = null !== (_d = icon.hover.width) && void 0 !== _d ? _d : icon.width, iconAttribute.backgroundHeight = null !== (_e = icon.hover.width) && void 0 !== _e ? _e : icon.width, iconAttribute.backgroundColor = null !== (_f = icon.hover.bgColor) && void 0 !== _f ? _f : "rgba(22,44,66,0.2)", iconAttribute.hoverImage = icon.hover.image), icon.cursor && (iconAttribute.cursor = icon.cursor), "shape" in icon && "circle" === icon.shape && (iconAttribute.shape = icon.shape), mark ? (mark.setAttributes(iconAttribute), mark.loadImage(iconAttribute.image), mark.tooltip = icon.tooltip, mark.name = icon.name, mark) : ("text" === icon.type ? (iconAttribute.text = icon.content, merge$1(iconAttribute, icon.style), iconMark = new TextIcon(iconAttribute), iconMark.tooltip = icon.tooltip, iconMark.name = icon.name) : (iconMark = new Icon(iconAttribute), iconMark.tooltip = icon.tooltip, iconMark.name = icon.name), iconMark);
     }
     function dealWithRichTextIcon(icon) {
       var _a, _b, _c, _d, _e, _f;
@@ -33719,6 +34018,10 @@
         cellGroup = Factory.getFunction("createCheckboxCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
       } else if ("radio" === type) {
         cellGroup = Factory.getFunction("createRadioCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range);
+      } else if ("switch" === type) {
+        cellGroup = Factory.getFunction("createSwitchCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
+      } else if ("button" === type) {
+        cellGroup = Factory.getFunction("createButtonCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
       }
       return cellGroup.onBeforeAttributeUpdate = onBeforeAttributeUpdateForInvertHighlight, cellGroup;
     }
@@ -34011,7 +34314,8 @@
     }
 
     const utilCheckBoxMark = new CheckBox({}),
-      utilRadioMark = new Radio({});
+      utilRadioMark = new Radio({}),
+      utilButtonMark = new Tag({});
     function computeCheckboxCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table) {
       const text = isObject$7(cellValue) ? cellValue.text : cellValue,
         lines = validToString(text).split("\n") || [],
@@ -34094,6 +34398,41 @@
       } else maxHeight = Math.max(size, lines.length * lineHeight);
       return maxHeight;
     }
+    function computeSwitchCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table) {
+      return getProp("boxWidth", actStyle, col, row, table);
+    }
+    function computeButtonCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table) {
+      const text = isObject$7(cellValue) ? cellValue.text : cellValue,
+        lines = validToString(text).split("\n") || [],
+        cellWidth = table.getColsWidth(col, endCol),
+        buttonPadding = getProp("buttonPadding", actStyle, col, row, table),
+        buttonLineWidth = getProp("buttonLineWidth", actStyle, col, row, table);
+      let maxHeight = 0;
+      if (autoWrapText) {
+        const maxLineWidth = cellWidth - (padding[1] + padding[3]);
+        utilButtonMark.setAttributes({
+          text: lines,
+          textStyle: {
+            maxLineWidth: maxLineWidth,
+            fontSize: fontSize,
+            fontStyle: fontStyle,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily,
+            lineHeight: lineHeight,
+            wordBreak: "break-word",
+            lineClamp: lineClamp
+          },
+          padding: buttonPadding,
+          panel: {
+            visible: !0,
+            fill: "red",
+            stroke: "red",
+            lineWidth: buttonLineWidth
+          }
+        }), utilRadioMark.render(), maxHeight = utilRadioMark.AABBBounds.height();
+      } else maxHeight = lines.length * lineHeight + 2 * buttonPadding;
+      return maxHeight;
+    }
 
     let customAlphabetCharSet = "",
       textMeasureMode = "quick";
@@ -34519,7 +34858,7 @@
         underline = getProp("underline", actStyle, col, row, table),
         underlineOffset = null !== (_c = getProp("underlineOffset", actStyle, col, row, table)) && void 0 !== _c ? _c : 0;
       let text;
-      if ("text" !== cellType && "link" !== cellType && "progressbar" !== cellType && "checkbox" !== cellType && "radio" !== cellType) maxHeight = lineHeight;else if ("checkbox" === cellType) maxHeight = computeCheckboxCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);else if ("radio" === cellType) maxHeight = computeRadioCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);else {
+      if ("text" !== cellType && "link" !== cellType && "progressbar" !== cellType && "checkbox" !== cellType && "radio" !== cellType && "switch" !== cellType && "button" !== cellType) maxHeight = lineHeight;else if ("checkbox" === cellType) maxHeight = computeCheckboxCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);else if ("radio" === cellType) maxHeight = computeRadioCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);else if ("switch" === cellType) maxHeight = computeSwitchCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);else if ("button" === cellType) maxHeight = computeButtonCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);else {
         text = cellValue;
         const lines = breakString(text, table).text,
           cellWidth = table.getColsWidth(col, endCol);
@@ -35150,10 +35489,12 @@
       getMenuInfo(col, row, type) {
         var _a;
         if (type === MenuType.dropDown) {
-          const {
-            dropDownMenu = this._table.globalDropDownMenu,
-            pivotInfo: pivotInfo
-          } = this._table._getHeaderLayoutMap(col, row);
+          let dropDownMenu = this._table.globalDropDownMenu;
+          dropDownMenu = this._table._getHeaderLayoutMap(col, row).dropDownMenu, "function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
+            row: row,
+            col: col,
+            table: this._table
+          }));
           let highlightIndex = -1;
           if (Array.isArray(dropDownMenu)) for (let i = 0; i < dropDownMenu.length; i++) if (this._table._dropDownMenuIsHighlight(col, row, i)) {
             highlightIndex = i;
@@ -36114,7 +36455,7 @@
         }
       }
       activate(table) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         this.active = !0;
         const {
             col: col,
@@ -36132,7 +36473,7 @@
             y1: y1 - table.scrollTop,
             y2: y2 - table.scrollTop
           });
-        this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge$1({}, this.attribute.tableChartOption, {
+        null === (_a = this.activeChartInstance) || void 0 === _a || _a.release(), this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge$1({}, this.attribute.tableChartOption, {
           renderCanvas: this.attribute.canvas,
           mode: "desktop-browser",
           canvasControled: !1,
@@ -36160,7 +36501,7 @@
         const chartStage = this.activeChartInstance.getStage(),
           matrix = this.globalTransMatrix.clone(),
           stageMatrix = this.stage.window.getViewBoxTransform();
-        matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f), chartStage.window.setViewBoxTransform && chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f), this.activeChartInstance.renderSync(), null === (_b = null === (_a = table.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.updateDataStateToActiveChartInstance) || void 0 === _b || _b.call(_a, this.activeChartInstance), this.activeChartInstance.on("click", params => {
+        matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f), chartStage.window.setViewBoxTransform && chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f), this.activeChartInstance.renderSync(), null === (_c = null === (_b = table.internalProps.layoutMap) || void 0 === _b ? void 0 : _b.updateDataStateToActiveChartInstance) || void 0 === _c || _c.call(_b, this.activeChartInstance), this.activeChartInstance.on("click", params => {
           var _a;
           !1 === (null === (_a = this.attribute.spec.select) || void 0 === _a ? void 0 : _a.enable) ? table.scenegraph.updateChartState(null) : Chart.temp && table.scenegraph.updateChartState(null == params ? void 0 : params.datum);
         }), this.activeChartInstance.on("brushEnd", params => {
@@ -36168,7 +36509,7 @@
           table.scenegraph.updateChartState(null === (_a = null == params ? void 0 : params.value) || void 0 === _a ? void 0 : _a.inBrushData), Chart.temp = 0, setTimeout(() => {
             Chart.temp = 1;
           }, 0);
-        }), null === (_d = (_c = table)._bindChartEvent) || void 0 === _d || _d.call(_c, this.activeChartInstance);
+        }), null === (_e = (_d = table)._bindChartEvent) || void 0 === _e || _e.call(_d, this.activeChartInstance);
       }
       deactivate() {
         var _a, _b;
@@ -36223,7 +36564,7 @@
       return isHandlingChartQueue;
     }
     function renderChart(chart) {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g;
       const {
         axes: axes,
         dataId: dataId,
@@ -36270,10 +36611,10 @@
       } = chart.getRootNode();
       let updateSpec = !1;
       if (table.options.specFormat) {
-        const formatResult = table.options.specFormat(chart.attribute.spec);
+        const formatResult = table.options.specFormat(chart.attribute.spec, chartInstance, chart);
         if (formatResult.needFormatSpec && formatResult.spec) {
           const spec = formatResult.spec;
-          chartInstance.updateSpecSync(spec), updateSpec = !0;
+          chartInstance.updateSpecSync(spec), updateSpec = null === (_a = formatResult.updateSpec) || void 0 === _a || _a;
         }
       }
       if (!updateSpec) if (null == axes || axes.forEach((axis, index) => {
@@ -36293,7 +36634,7 @@
             tickMode: null === (_e = axis.tick) || void 0 === _e ? void 0 : _e.tickMode
           }
         }, !0);
-      }), null === (_b = null === (_a = table.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.updateDataStateToActiveChartInstance) || void 0 === _b || _b.call(_a, chartInstance), "string" == typeof dataId) chartInstance.updateDataSync(dataId, null != data ? data : []);else {
+      }), null === (_c = null === (_b = table.internalProps.layoutMap) || void 0 === _b ? void 0 : _b.updateDataStateToActiveChartInstance) || void 0 === _c || _c.call(_b, chartInstance), "string" == typeof dataId) chartInstance.updateDataSync(dataId, null != data ? data : []);else {
         const dataBatch = [];
         for (const dataIdStr in dataId) {
           const dataIdAndField = dataId[dataIdStr],
@@ -36303,11 +36644,11 @@
             });
           dataBatch.push({
             id: dataIdStr,
-            values: dataIdAndField ? null !== (_c = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _c ? _c : [] : null != data ? data : [],
-            fields: null === (_d = null == series ? void 0 : series.data) || void 0 === _d ? void 0 : _d.fields
-          }), chartInstance.updateFullDataSync || chartInstance.updateDataSync(dataIdStr, dataIdAndField ? null !== (_e = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _e ? _e : [] : null != data ? data : []);
+            values: dataIdAndField ? null !== (_d = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _d ? _d : [] : null != data ? data : [],
+            fields: null === (_e = null == series ? void 0 : series.data) || void 0 === _e ? void 0 : _e.fields
+          }), chartInstance.updateFullDataSync || chartInstance.updateDataSync(dataIdStr, dataIdAndField ? null !== (_f = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _f ? _f : [] : null != data ? data : []);
         }
-        null === (_f = chartInstance.updateFullDataSync) || void 0 === _f || _f.call(chartInstance, dataBatch);
+        null === (_g = chartInstance.updateFullDataSync) || void 0 === _g || _g.call(chartInstance, dataBatch);
       }
       cacheStageCanvas(chartInstance.getStage(), chart);
     }
@@ -36429,10 +36770,10 @@
           context.drawImage(canvas, x, y, width, height);
         }) : context.drawImage(cacheCanvas, x, y, width, height);else if (activeChartInstance) {
           if (table.options.specFormat) {
-            const formatResult = table.options.specFormat(chart.attribute.spec);
+            const formatResult = table.options.specFormat(chart.attribute.spec, activeChartInstance, chart);
             if (formatResult.needFormatSpec && formatResult.spec) {
               const spec = formatResult.spec;
-              return void activeChartInstance.updateSpecSync(spec);
+              activeChartInstance.updateSpecSync(spec);
             }
           }
           const viewBox = chart.getViewBox();
@@ -37272,10 +37613,10 @@
           actualWidth = 0;
         for (let col = 0; col < table.colCount; col++) {
           const colWidth = update && null !== (_f = newWidths[col]) && void 0 !== _f ? _f : table.getColWidth(col);
-          (col < table.rowHeaderLevelCount || table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount) && (actualHeaderWidth += colWidth), actualWidth += colWidth;
+          (col < table.rowHeaderLevelCount + table.leftRowSeriesNumberCount || table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount) && (actualHeaderWidth += colWidth), actualWidth += colWidth;
         }
         if (actualWidth < canvasWidth && actualWidth > actualHeaderWidth) {
-          getAdaptiveWidth(canvasWidth - actualHeaderWidth, table.rowHeaderLevelCount, table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount, update, newWidths, table);
+          getAdaptiveWidth(canvasWidth - actualHeaderWidth, table.rowHeaderLevelCount + table.leftRowSeriesNumberCount, table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount, update, newWidths, table);
         }
       }
       if (update) {
@@ -37329,7 +37670,7 @@
           continue;
         }
         const cellType = table.isHeader(col, row) ? null === (_a = table._getHeaderLayoutMap(col, row)) || void 0 === _a ? void 0 : _a.headerType : table.getBodyColumnType(col, row);
-        if (isValid$3(cellType) && "text" !== cellType && "link" !== cellType && "progressbar" !== cellType && "checkbox" !== cellType && "radio" !== cellType) {
+        if (isValid$3(cellType) && "text" !== cellType && "link" !== cellType && "progressbar" !== cellType && "checkbox" !== cellType && "radio" !== cellType && "switch" !== cellType && "button" !== cellType) {
           maxWidth = Math.max(maxWidth, table.getColWidthDefinedNumber(col) || 0);
           continue;
         }
@@ -37398,7 +37739,7 @@
       }
     }
     function computeTextWidth(col, row, cellType, table) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       let maxWidth = 0;
       const cellValue = table.getCellValue(col, row),
         actStyle = table._getCellStyle(col, row);
@@ -37437,6 +37778,17 @@
             text += (isObject$7(line) ? line.text : line).toString();
           });
         } else text = isObject$7(cellValue) ? cellValue.text : cellValue;
+      } else if ("button" === cellType) {
+        const define = table.getBodyColumnDefine(col, row),
+          buttonTextValue = getOrApply(define.text, {
+            col: col,
+            row: row,
+            table: table,
+            context: null,
+            value: cellValue,
+            dataValue: table.getCellOriginValue(col, row)
+          });
+        text = null !== (_c = null != buttonTextValue ? buttonTextValue : cellValue) && void 0 !== _c ? _c : "";
       } else text = cellValue;
       const lines = breakString(text, table).text;
       if (lines.length >= 1 && (1 !== lines.length || "" !== lines[0]) ? lines.forEach(line => {
@@ -37460,9 +37812,15 @@
         if (isArray$7(cellValue)) {
           const define = table.getBodyColumnDefine(col, row),
             spaceBetweenRadio = getProp("spaceBetweenRadio", actStyle, col, row, table),
-            radioDirectionInCell = null !== (_c = null == define ? void 0 : define.radioDirectionInCell) && void 0 !== _c ? _c : "vertical";
+            radioDirectionInCell = null !== (_d = null == define ? void 0 : define.radioDirectionInCell) && void 0 !== _d ? _d : "vertical";
           "vertical" === radioDirectionInCell ? (maxWidth += circleSize, maxWidth += spaceBetweenTextAndIcon) : "horizontal" === radioDirectionInCell && (maxWidth += (circleSize + spaceBetweenTextAndIcon) * cellValue.length, maxWidth += spaceBetweenRadio * (cellValue.length - 1));
         } else maxWidth += circleSize, text && (maxWidth += spaceBetweenTextAndIcon);
+      } else if ("switch" === cellType) {
+        const boxWidth = getProp("boxWidth", actStyle, col, row, table);
+        maxWidth = boxWidth;
+      } else if ("button" === cellType) {
+        const buttonPadding = getProp("buttonPadding", actStyle, col, row, table);
+        maxWidth += 2 * buttonPadding;
       }
       return maxWidth;
     }
@@ -40319,7 +40677,7 @@
     class Scenegraph {
       constructor(table) {
         let width, height;
-        this._needUpdateContainer = !1, this.table = table, this.hasFrozen = !1, this.clear = !0, this.mergeMap = new Map(), setPoptipTheme(this.table.theme.textPopTipStyle), table.options.canvas && table.options.viewBox ? (vglobal.setEnv("browser"), width = table.options.viewBox.x2 - table.options.viewBox.x1, height = table.options.viewBox.y2 - table.options.viewBox.y1) : "node" === Env.mode ? (vglobal.setEnv("node", table.options.modeParams), width = table.canvasWidth, height = table.canvasHeight) : (vglobal.setEnv("browser"), width = table.canvas.width, height = table.canvas.height), this.stage = createStage(Object.assign({
+        this._needUpdateContainer = !1, this.table = table, this.hasFrozen = !1, this.clear = !0, this.mergeMap = new Map(), setPoptipTheme(this.table.theme.textPopTipStyle), "node" === Env.mode ? (vglobal.setEnv("node", table.options.modeParams), width = table.canvasWidth, height = table.canvasHeight) : table.options.canvas && table.options.viewBox ? (vglobal.setEnv("browser"), width = table.options.viewBox.x2 - table.options.viewBox.x1, height = table.options.viewBox.y2 - table.options.viewBox.y1) : (vglobal.setEnv("browser"), width = table.canvas.width, height = table.canvas.height), this.stage = createStage(Object.assign({
           canvas: table.canvas,
           width: width,
           height: height,
@@ -40571,10 +40929,10 @@
         null === (_b = null === (_a = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _a ? void 0 : _a.deactivate) || void 0 === _b || _b.call(_a);
       }
       activateChart(col, row) {
-        var _a, _b;
+        var _a, _b, _c;
         if (-1 === col || -1 === row) return;
         const cellGroup = this.getCell(col, row);
-        null === (_b = null === (_a = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _a ? void 0 : _a.activate) || void 0 === _b || _b.call(_a, this.table);
+        return null === (_b = null === (_a = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _a ? void 0 : _a.activate) || void 0 === _b || _b.call(_a, this.table), null === (_c = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _c ? void 0 : _c.activeChartInstance;
       }
       removeInteractionBorder(col, row) {
         const cellGroup = this.getCell(col, row);
@@ -41866,7 +42224,7 @@
       const define = table.getBodyColumnDefine(col, row),
         field = null == define ? void 0 : define.field,
         cellType = table.getCellType(col, row);
-      if (isValid$3(field) && "checkbox" === cellType) {
+      if (isValid$3(field) && "radio" === cellType) {
         const dataIndex = table.dataSource.getIndexKey(table.getRecordShowIndexByCell(col, row)),
           columnState = null === (_a = table.stateManager.radioState) || void 0 === _a ? void 0 : _a[field];
         if (isNumber$4(columnState)) {
@@ -42733,8 +43091,12 @@
             col = cellAddress.col, row = cellAddress.row;
           }
           if (isValid$3(col) && isValid$3(row) && this.table.isCellRangeEqual(colNow, rowNow, col, row)) {
-            const dropDownMenu = this.table._getHeaderLayoutMap(null != col ? col : colNow, null != row ? row : rowNow).dropDownMenu || this.table.globalDropDownMenu;
-            if (dropDownMenu) for (let i = 0; i < dropDownMenu.length; i++) {
+            let dropDownMenu = this.table._getHeaderLayoutMap(null != col ? col : colNow, null != row ? row : rowNow).dropDownMenu || this.table.globalDropDownMenu;
+            if ("function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
+              row: row,
+              col: col,
+              table: this.table
+            })), dropDownMenu) for (let i = 0; i < dropDownMenu.length; i++) {
               const item = dropDownMenu[i];
               if (isObject$7(item) && (item.menuKey || item.text) === (menuKey || "") && i === index) return !0;
               if (isString$4(item) && item === menuKey && i === index) return !0;
@@ -43528,6 +43890,30 @@
           radioIndexInCell: radioIndexInCell
         });
         table.fireListeners(TABLE_EVENT_TYPE.RADIO_STATE_CHANGE, cellsEvent), table.scenegraph.updateNextFrame();
+      }), table.scenegraph.tableGroup.addEventListener("switch_state_change", e => {
+        var _a, _b;
+        const eventArgsSet = getCellEventArgsSet(e),
+          {
+            col: col,
+            row: row,
+            target: target
+          } = eventArgsSet.eventArgs,
+          cellInfo = table.getCellInfo(col, row),
+          mergeRange = getCellMergeInfo(table, col, row);
+        if (mergeRange) for (let col = mergeRange.start.col; col <= mergeRange.end.col; col++) for (let row = mergeRange.start.row; row <= mergeRange.end.row; row++) {
+          table.scenegraph.getCell(col, row).forEachChildren(switchComponent => {
+            "switch" === switchComponent.name && switchComponent.setAttributes({
+              checked: e.target.attribute.checked
+            });
+          });
+        }
+        const cellsEvent = Object.assign(Object.assign({}, cellInfo), {
+          event: e.nativeEvent,
+          target: null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target,
+          mergeCellInfo: null === (_b = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.mergeInfo,
+          checked: e.detail.checked
+        });
+        table.stateManager.setCheckedState(col, row, cellInfo.field, e.detail.checked), table.fireListeners(TABLE_EVENT_TYPE.SWITCH_STATE_CHANGE, cellsEvent), table.scenegraph.updateNextFrame();
       }), table.scenegraph.stage.addEventListener("wheel", e => {
         var _a;
         e.path.find(node => "legend" === node.name) || (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit(), table.eventManager._enableTableScroll && handleWhell(e, stateManager));
@@ -43813,7 +44199,7 @@
         !1 !== (null === (_a = table.eventOptions) || void 0 === _a ? void 0 : _a.preventDefaultContextMenu) && e.preventDefault();
       }), table.options.canvas || handler.on(table.getContainer(), "resize", e => {
         var _a;
-        0 === e.width && 0 === e.height || ((table.autoFillWidth || table.autoFillHeight) && (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit()), isValid$3(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio()), e.windowSizeNotChange || table.resize());
+        table.isReleased || 0 === e.width && 0 === e.height || ((table.autoFillWidth || table.autoFillHeight) && (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit()), isValid$3(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio()), e.windowSizeNotChange || table.resize());
       });
       const regex = /<tr[^>]*>([\s\S]*?)<\/tr>/g,
         cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/g;
@@ -44226,6 +44612,21 @@
       });
     }
 
+    function bindButtonClickEvent(table) {
+      table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
+        const {
+          col: col,
+          row: row,
+          target: target
+        } = e;
+        "button" !== target.name || target.attribute.disable || table.hasListeners(TABLE_EVENT_TYPE.BUTTON_CLICK) && table.fireListeners(TABLE_EVENT_TYPE.BUTTON_CLICK, {
+          col: col,
+          row: row,
+          event: e.event
+        });
+      });
+    }
+
     class EventManager {
       constructor(table) {
         this.isDown = !1, this.isDraging = !1, this.globalEventListeners = [], this._enableTableScroll = !0, this.table = table, this.handleTextStickBindId = [], this.inertiaScroll = new InertiaScroll(table.stateManager), "node" === Env.mode || table.options.disableInteraction || (this.bindOuterEvent(), setTimeout(() => {
@@ -44270,11 +44671,12 @@
         }), this.table.on(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, () => {
           stateManager.hideMenu();
         }), this.updateEventBinder(), bindMediaClick(this.table), this.table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
-          var _a;
+          var _a, _b, _c;
           if (e.federatedEvent) {
             const eventArgsSet = getCellEventArgsSet(e.federatedEvent),
-              resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell);
-            if (this.table.eventManager.checkCellFillhandle(eventArgsSet)) this.table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_FILL_HANDLE, {});else if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0 && !this.table.options.disableDblclickAutoResizeColWidth) {
+              resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell),
+              disableDblclickAutoResizeColWidth = null !== (_b = this.table.options.disableDblclickAutoResizeColWidth) && void 0 !== _b ? _b : null === (_c = this.table.options.resize) || void 0 === _c ? void 0 : _c.disableDblclickAutoResizeColWidth;
+            if (this.table.eventManager.checkCellFillhandle(eventArgsSet)) this.table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_FILL_HANDLE, {});else if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0 && !disableDblclickAutoResizeColWidth) {
               this.table.scenegraph.updateAutoColWidth(resizeCol.col), this.table.internalProps._widthResizedColMap.add(resizeCol.col), this.table.scenegraph.updateChartSizeForResizeColWidth(resizeCol.col);
               const state = this.table.stateManager;
               state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
@@ -44286,7 +44688,7 @@
               });
             }
           }
-        }), this.table.isPivotTable() && checkHaveDrill(this.table) && bindDrillEvent(this.table), bindSparklineHoverEvent(this.table), bindAxisClickEvent(this.table), bindAxisHoverEvent(this.table), bindGroupTitleCheckboxChange(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);
@@ -44309,7 +44711,7 @@
           eventArgs: eventArgs
         } = eventArgsSet;
         if (eventArgs) {
-          if ("checkbox" === eventArgs.target.name || "radio" === eventArgs.target.name) return !1;
+          if ("checkbox" === eventArgs.target.name || "radio" === eventArgs.target.name || "switch" === eventArgs.target.name || "button" === eventArgs.target.name) return !1;
           if (this.table.isHeader(eventArgs.col, eventArgs.row) && isCellDisableSelect(this.table, eventArgs.col, eventArgs.row)) return isSelectMoving || this.table.stateManager.updateSelectPos(-1, -1), !1;
           if (!this.table.isHeader(eventArgs.col, eventArgs.row) && isCellDisableSelect(this.table, eventArgs.col, eventArgs.row)) {
             if (!isSelectMoving) {
@@ -44566,7 +44968,7 @@
       }
     }
 
-    const ICON_PROP_KEYS = ["type", "content", "font", "color", "width", "height", "marginRight", "marginLeft", "src", "svg", "name", "path", "positionType", "tooltip", "hover", "cursor", "shape", "interactive", "isGif"];
+    const ICON_PROP_KEYS = ["type", "content", "style", "color", "width", "height", "marginRight", "marginLeft", "src", "svg", "name", "path", "positionType", "tooltip", "hover", "cursor", "shape", "interactive", "isGif"];
     const iconPropKeys = ICON_PROP_KEYS;
 
     class BodyHelper {
@@ -44623,6 +45025,10 @@
             return CheckboxStyle$1;
           case "radio":
             return RadioStyle;
+          case "switch":
+            return SwitchStyle;
+          case "button":
+            return ButtonStyle;
         }
         return TextStyle;
       }
@@ -45442,13 +45848,24 @@
       getDropDownStateIcons(_table, col, row) {
         var _a, _b, _c;
         const headerC = _table.getHeaderDefine(col, row),
-          headerL = _table._getHeaderLayoutMap(col, row),
-          {
-            dropDownMenu: dropDownMenu
-          } = headerL,
-          results = [];
-        if (Array.isArray(dropDownMenu) && dropDownMenu.length || Array.isArray(_table.globalDropDownMenu) && _table.globalDropDownMenu.length && !(null === (_a = null == headerC ? void 0 : headerC.columns) || void 0 === _a ? void 0 : _a.length)) {
-          const menus = dropDownMenu || _table.globalDropDownMenu;
+          headerL = _table._getHeaderLayoutMap(col, row);
+        let {
+          dropDownMenu: dropDownMenu
+        } = headerL;
+        "function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
+          row: row,
+          col: col,
+          table: _table
+        }));
+        let globalDropDownMenu = _table.globalDropDownMenu;
+        "function" == typeof globalDropDownMenu && (globalDropDownMenu = globalDropDownMenu({
+          row: row,
+          col: col,
+          table: _table
+        }));
+        const results = [];
+        if (Array.isArray(dropDownMenu) && dropDownMenu.length || Array.isArray(globalDropDownMenu) && globalDropDownMenu.length && !(null === (_a = null == headerC ? void 0 : headerC.columns) || void 0 === _a ? void 0 : _a.length)) {
+          const menus = dropDownMenu || globalDropDownMenu;
           let highlightIndex = -1,
             subHighlightIndex = -1;
           for (let i = 0; i < menus.length; i++) {
@@ -45467,7 +45884,7 @@
           }
           if (-1 !== highlightIndex) {
             let menu;
-            menu = -1 !== subHighlightIndex ? (dropDownMenu || _table.globalDropDownMenu)[highlightIndex].children[subHighlightIndex] : (dropDownMenu || _table.globalDropDownMenu)[highlightIndex], menu.stateIcon && (menu.stateIcon.svg ? results.push({
+            menu = -1 !== subHighlightIndex ? menus[highlightIndex].children[subHighlightIndex] : menus[highlightIndex], menu.stateIcon && (menu.stateIcon.svg ? results.push({
               type: "svg",
               name: menu.stateIcon.src || menu.stateIcon.svg,
               width: menu.stateIcon.width || 22,
@@ -45525,11 +45942,21 @@
       checkDropDownIcon(_table, col, row) {
         var _a;
         if (_table.isPivotTable()) {
-          const headerC = _table._getHeaderLayoutMap(col, row);
-          if (Array.isArray(headerC.dropDownMenu) && headerC.dropDownMenu.length) return !0;
+          let dropDownMenu = _table._getHeaderLayoutMap(col, row).dropDownMenu;
+          if ("function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
+            row: row,
+            col: col,
+            table: _table
+          })), Array.isArray(dropDownMenu) && dropDownMenu.length) return !0;
         } else {
-          const headerC = _table.getHeaderDefine(col, row);
-          if (Array.isArray(headerC.dropDownMenu) && headerC.dropDownMenu.length || (!Array.isArray(headerC.dropDownMenu) || 0 !== headerC.dropDownMenu.length) && Array.isArray(_table.globalDropDownMenu) && _table.globalDropDownMenu.length && !(null === (_a = null == headerC ? void 0 : headerC.columns) || void 0 === _a ? void 0 : _a.length)) return !0;
+          const headerC = _table.getHeaderDefine(col, row),
+            dropDownMenu = headerC.dropDownMenu;
+          let globalDropDownMenu = _table.globalDropDownMenu;
+          if ("function" == typeof globalDropDownMenu && (globalDropDownMenu = globalDropDownMenu({
+            row: row,
+            col: col,
+            table: _table
+          })), Array.isArray(dropDownMenu) && dropDownMenu.length || (!Array.isArray(headerC.dropDownMenu) || 0 !== headerC.dropDownMenu.length) && Array.isArray(globalDropDownMenu) && globalDropDownMenu.length && !(null === (_a = null == headerC ? void 0 : headerC.columns) || void 0 === _a ? void 0 : _a.length)) return !0;
         }
         return !1;
       }
@@ -46079,7 +46506,7 @@
         right: 0,
         width: 0
       };
-      if (isConsider && absoluteX > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() && absoluteX < _this.tableNoFrameWidth && absoluteX <= _this.getAllColsWidth()) for (let i = 0; i < _this.rightFrozenColCount; i++) if (absoluteX > _this.tableNoFrameWidth - _this.getColsWidth(_this.colCount - i - 1, _this.colCount - 1)) return {
+      if (absoluteX -= _this.tableX, isConsider && absoluteX > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() && absoluteX < _this.tableNoFrameWidth && absoluteX <= _this.getAllColsWidth()) for (let i = 0; i < _this.rightFrozenColCount; i++) if (absoluteX > _this.tableNoFrameWidth - _this.getColsWidth(_this.colCount - i - 1, _this.colCount - 1)) return {
         col: _this.colCount - i - 1,
         left: void 0,
         right: void 0,
@@ -46131,8 +46558,8 @@
       y > _this.tableNoFrameHeight - _this.getBottomFrozenRowsHeight() && y < _this.tableNoFrameHeight && y <= _this.getAllRowsHeight() && (bottomFrozen = !0);
       let rightFrozen = !1;
       x > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() && x < _this.tableNoFrameWidth && x <= _this.getAllColsWidth() && (rightFrozen = !0);
-      const colInfo = getTargetColAtConsiderRightFrozen(leftFrozen || rightFrozen ? x : x + _this.scrollLeft, rightFrozen, _this),
-        rowInfo = getTargetRowAtConsiderBottomFrozen(topFrozen || bottomFrozen ? y : y + _this.scrollTop, bottomFrozen, _this);
+      const colInfo = getTargetColAtConsiderRightFrozen((leftFrozen || rightFrozen ? x : x + _this.scrollLeft) + _this.tableX, rightFrozen, _this),
+        rowInfo = getTargetRowAtConsiderBottomFrozen((topFrozen || bottomFrozen ? y : y + _this.scrollTop) + _this.tableY, bottomFrozen, _this);
       if (colInfo && rowInfo) {
         const {
             row: row,
@@ -46755,7 +47182,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);
         }
       }
@@ -46990,8 +47427,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;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.17.0-alpha.4", 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;
+        if (super(), this.showFrozenIcon = !0, this.version = "1.17.1-alpha.0", 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,
@@ -47012,6 +47449,7 @@
           rowSeriesNumber: rowSeriesNumber,
           columnResizeMode: columnResizeMode,
           rowResizeMode = "none",
+          resize: resize,
           dragHeaderMode: dragHeaderMode,
           showFrozenIcon: showFrozenIcon,
           allowFrozenColCount: allowFrozenColCount,
@@ -47039,7 +47477,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 ? (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 = columnResizeMode, internalProps.rowResizeMode = 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 != 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 = {};
         const that = this;
         if (internalProps.calcWidthContext = {
           _: internalProps,
@@ -47047,7 +47485,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 !== (_d = options.theme) && void 0 !== _d ? _d : 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 !== (_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, 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 !== (_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.legends = [];
           const createLegend = Factory.getFunction("createLegend");
           if (Array.isArray(options.legends)) {
@@ -47073,7 +47511,7 @@
         }
         if (internalProps.menu = Object.assign({
           renderMode: "html"
-        }, options.menu), Array.isArray(null === (_g = options.menu) || void 0 === _g ? void 0 : _g.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_h = options.menu) || void 0 === _h ? void 0 : _h.dropDownMenuHighlight), Array.isArray(null === (_j = options.menu) || void 0 === _j ? void 0 : _j.defaultHeaderMenuItems) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), "html" === internalProps.menu.renderMode) {
+        }, 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) {
           const MenuHandler = Factory.getComponent("menuHandler");
           internalProps.menuHandler = new MenuHandler(this);
         }
@@ -47081,7 +47519,7 @@
           changedCells: new Map()
         }, internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell);
         const CustomCellStylePlugin = Factory.getComponent("customCellStylePlugin");
-        CustomCellStylePlugin && (this.customCellStylePlugin = new CustomCellStylePlugin(this, null !== (_k = options.customCellStyle) && void 0 !== _k ? _k : [], null !== (_l = options.customCellStyleArrangement) && void 0 !== _l ? _l : [])), this._adjustCanvasSizeByOption();
+        CustomCellStylePlugin && (this.customCellStylePlugin = new CustomCellStylePlugin(this, null !== (_o = options.customCellStyle) && void 0 !== _o ? _o : [], null !== (_p = options.customCellStyleArrangement) && void 0 !== _p ? _p : [])), this._adjustCanvasSizeByOption();
       }
       _adjustCanvasSizeByOption() {
         "auto" !== this.options.canvasHeight && "auto" !== this.options.canvasWidth || setTimeout(() => {
@@ -47330,7 +47768,8 @@
         return this.internalProps.pixelRatio;
       }
       setPixelRatio(pixelRatio) {
-        if (pixelRatio !== this.internalProps.pixelRatio) {
+        var _a;
+        if (pixelRatio !== (null === (_a = this.internalProps) || void 0 === _a ? void 0 : _a.pixelRatio)) {
           this.internalProps.pixelRatio = pixelRatio;
           const canvasWidth = this.canvasWidth;
           this.internalProps.calcWidthContext = {
@@ -47817,7 +48256,7 @@
         return super.fireListeners(type, event);
       }
       updateOption(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         this.options = options, this._hasAutoImageColumn = void 0;
         const {
           frozenColCount = 0,
@@ -47831,6 +48270,7 @@
           rowSeriesNumber: rowSeriesNumber,
           columnResizeMode: columnResizeMode,
           rowResizeMode = "none",
+          resize: resize,
           dragHeaderMode: dragHeaderMode,
           showFrozenIcon: showFrozenIcon,
           allowFrozenColCount: allowFrozenColCount,
@@ -47856,9 +48296,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 = columnResizeMode, internalProps.rowResizeMode = 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 !== (_b = options.theme) && void 0 !== _b ? _b : 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 !== (_c = options.allowFrozenColCount) && void 0 !== _c ? _c : 0, internalProps.limitMaxAutoWidth = null !== (_d = options.limitMaxAutoWidth) && void 0 !== _d ? _d : 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 === (_e = internalProps.legends) || void 0 === _e || _e.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 != 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 => {
           null == legend || legend.release();
-        }), null === (_f = internalProps.title) || void 0 === _f || _f.release(), internalProps.title = null, null === (_g = internalProps.emptyTip) || void 0 === _g || _g.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
+        }), 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) {
           internalProps.legends = [];
           const createLegend = Factory.getFunction("createLegend");
           if (Array.isArray(options.legends)) {
@@ -47884,11 +48324,11 @@
         }
         if (internalProps.menu = Object.assign({
           renderMode: "html"
-        }, options.menu), Array.isArray(null === (_h = options.menu) || void 0 === _h ? void 0 : _h.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_j = options.menu) || void 0 === _j ? void 0 : _j.dropDownMenuHighlight), Array.isArray(null === (_k = options.menu) || void 0 === _k ? void 0 : _k.defaultHeaderMenuItems) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), "html" === internalProps.menu.renderMode && !internalProps.menuHandler) {
+        }, 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) {
           const MenuHandler = Factory.getComponent("menuHandler");
           internalProps.menuHandler = new MenuHandler(this);
         }
-        this.clearCellStyleCache(), this.clearColWidthCache(), this.clearRowHeightCache(), internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell), null === (_l = this.customCellStylePlugin) || void 0 === _l || _l.updateCustomCell(null !== (_m = options.customCellStyle) && void 0 !== _m ? _m : [], null !== (_o = options.customCellStyleArrangement) && void 0 !== _o ? _o : []), this._adjustCanvasSizeByOption();
+        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();
       }
       renderWithRecreateCells() {
         this.internalProps.stick.changedCells.clear();
@@ -51046,32 +51486,37 @@
 
     class EditManager {
       constructor(table) {
-        this.isValidatingValue = !1, this.table = table, this.bindEvent();
+        this.isValidatingValue = !1, this.listenersId = [], this.table = table, this.bindEvent();
       }
       bindEvent() {
-        this.table.internalProps.handler;
-        const editCellTrigger = this.table.options.editCellTrigger;
-        this.table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
-          var _a;
-          if (!editCellTrigger || "doubleclick" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("doubleclick")) {
+        const table = this.table,
+          doubleClickEventId = table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
+            var _a;
+            const {
+              editCellTrigger = "doubleclick"
+            } = table.options;
+            if (!editCellTrigger.includes("doubleclick")) return;
             const {
                 col: col,
                 row: row
               } = e,
               eventArgsSet = getCellEventArgsSet(e.federatedEvent),
-              resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell);
-            if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) return;
-            this.startEditCell(col, row);
-          }
-        }), this.table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
-          if ("click" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("click")) {
+              resizeCol = table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell);
+            table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0 || this.startEditCell(col, row);
+          }),
+          clickEventId = table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
             const {
-              col: col,
-              row: row
-            } = e;
-            this.startEditCell(col, row);
-          }
-        });
+              editCellTrigger = "doubleclick"
+            } = table.options;
+            if ("click" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("click")) {
+              const {
+                col: col,
+                row: row
+              } = e;
+              this.startEditCell(col, row);
+            }
+          });
+        this.listenersId.push(doubleClickEventId, clickEventId);
       }
       startEditCell(col, row, value) {
         var _a, _b, _c, _d, _e;
@@ -51102,9 +51547,9 @@
             },
             referencePosition: referencePosition,
             container: this.table.getElement(),
-            table: this.table,
             col: col,
-            row: row
+            row: row,
+            table: this.table
           });
         }
       }
@@ -51150,6 +51595,11 @@
         var _a, _b, _c, _d;
         this.editingEditor && (null === (_b = (_a = this.editingEditor).exit) || void 0 === _b || _b.call(_a), null === (_d = (_c = this.editingEditor).onEnd) || void 0 === _d || _d.call(_c), this.editingEditor = null);
       }
+      release() {
+        this.listenersId.forEach(id => {
+          this.table.off(id);
+        });
+      }
     }
     function dealWithValidateValue(validateValue, editManager, oldValue, resolve) {
       return editManager.isValidatingValue = !1, "validate-exit" === validateValue ? (editManager.doExit(), null == resolve || resolve(!0), !0) : "invalidate-exit" === validateValue ? (editManager.editingEditor.setValue(oldValue), editManager.doExit(), null == resolve || resolve(!0), !0) : "validate-not-exit" === validateValue || "invalidate-not-exit" === validateValue ? (null == resolve || resolve(!1), !1) : !0 === validateValue ? (editManager.doExit(), null == resolve || resolve(!0), !0) : (null == resolve || resolve(!1), !1);
@@ -52081,7 +52531,7 @@
         const define = this.getBodyColumnDefine(col, row),
           field = null == define ? void 0 : define.field,
           cellType = this.getCellType(col, row);
-        if (isValid$3(field) && "checkbox" === cellType) {
+        if (isValid$3(field) && ("checkbox" === cellType || "switch" === cellType)) {
           const dataIndex = this.dataSource.getIndexKey(this.getRecordShowIndexByCell(col, row)).toString();
           return null === (_a = this.stateManager.checkedState.get(dataIndex)) || void 0 === _a ? void 0 : _a[field];
         }
@@ -52098,6 +52548,15 @@
       setCellRadioState(col, row, index) {
         setCellRadioState(col, row, index, this);
       }
+      getSwitchState(field) {
+        return this.getCheckboxState(field);
+      }
+      getCellSwitchState(col, row) {
+        return this.getCellCheckboxState(col, row);
+      }
+      setCellSwitchState(col, row, checked) {
+        this.setCellCheckboxState(col, row, checked);
+      }
       setRecords(records, option) {
         var _a, _b, _c, _d;
         let sort;
@@ -52266,6 +52725,9 @@
           }
         }
       }
+      release() {
+        this.editorManager.release(), super.release();
+      }
     }
 
     function isXAxis(orient) {
@@ -54505,7 +54967,7 @@
       container: table => new Container(table)
     };
     function getMenuInstanceInfo(table, col, row, type, dropDownMenuOptions) {
-      var _a;
+      var _a, _b;
       const {
         lineHeight: lineHeight,
         textBaseline: textBaseline,
@@ -54547,11 +55009,15 @@
         content: dropDownMenuOptions.content
       };
       if ("dropdown-menu" === type) {
-        const {
-          dropDownMenu = table.globalDropDownMenu,
-          pivotInfo: pivotInfo
-        } = table._getHeaderLayoutMap(col, row);
-        return {
+        let dropDownMenu = table.globalDropDownMenu;
+        const headerData = table._getHeaderLayoutMap(col, row);
+        dropDownMenu = null !== (_b = headerData.dropDownMenu) && void 0 !== _b ? _b : dropDownMenu;
+        const pivotInfo = headerData.pivotInfo;
+        return "function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
+          row: row,
+          col: col,
+          table: table
+        })), {
           type: type,
           referencePosition: {
             rect: {
@@ -55336,7 +55802,7 @@
           canvas: null !== (_0 = table.canvas) && void 0 !== _0 ? _0 : table.scenegraph.stage.window.getContext().canvas,
           mode: table.options.mode,
           modeParams: table.options.modeParams,
-          spec: chartSpec,
+          spec: table.options.specTransformInCell ? table.options.specTransformInCell(chartSpec, col, row) : chartSpec,
           ClassType: ClassType,
           width: width - padding[3] - padding[1],
           height: height - padding[2] - padding[0],
@@ -55346,7 +55812,9 @@
           cellPadding: padding,
           dpr: table.internalProps.pixelRatio,
           axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
-          tableChartOption: table.options.chartOption
+          tableChartOption: table.options.chartOption,
+          col: col,
+          row: row
         });
         cellGroup.appendChild(chartGroup), table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
       }
@@ -55638,6 +56106,167 @@
       return null !== (_a = null != isDisabled ? isDisabled : globalDisable) && void 0 !== _a && _a;
     }
 
+    function createSwitchCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+      if (!cellGroup) {
+        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
+        isAsync && (cellGroup = table.scenegraph.highPerformanceGetCell(col, row, !0)) && "cell" === cellGroup.role && cellGroup.setAttributes({
+          x: xOrigin,
+          y: yOrigin,
+          width: width,
+          height: height,
+          lineWidth: null !== (_b = null === (_a = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _a ? void 0 : _a.lineWidth) && void 0 !== _b ? _b : void 0,
+          fill: null !== (_d = null === (_c = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _c ? void 0 : _c.fill) && void 0 !== _d ? _d : void 0,
+          stroke: null !== (_f = null === (_e = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _e ? void 0 : _e.stroke) && void 0 !== _f ? _f : void 0,
+          strokeArrayWidth: strokeArrayWidth,
+          strokeArrayColor: null !== (_h = null === (_g = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _g ? void 0 : _g.strokeArrayColor) && void 0 !== _h ? _h : void 0,
+          cursor: null !== (_k = null === (_j = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _j ? void 0 : _j.cursor) && void 0 !== _k ? _k : void 0,
+          lineDash: null !== (_m = null === (_l = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _l ? void 0 : _l.lineDash) && void 0 !== _m ? _m : void 0,
+          lineCap: "butt",
+          clip: !0,
+          cornerRadius: cellTheme.group.cornerRadius
+        }), cellGroup && "cell" === cellGroup.role || ((cellGroup = new Group({
+          x: xOrigin,
+          y: yOrigin,
+          width: width,
+          height: height,
+          lineWidth: null !== (_p = null === (_o = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _o ? void 0 : _o.lineWidth) && void 0 !== _p ? _p : void 0,
+          fill: null !== (_r = null === (_q = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _q ? void 0 : _q.fill) && void 0 !== _r ? _r : void 0,
+          stroke: null !== (_t = null === (_s = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _s ? void 0 : _s.stroke) && void 0 !== _t ? _t : void 0,
+          strokeArrayWidth: strokeArrayWidth,
+          strokeArrayColor: null !== (_v = null === (_u = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _u ? void 0 : _u.strokeArrayColor) && void 0 !== _v ? _v : void 0,
+          cursor: null !== (_x = null === (_w = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _w ? void 0 : _w.cursor) && void 0 !== _x ? _x : void 0,
+          lineDash: null !== (_z = null === (_y = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _y ? void 0 : _y.lineDash) && void 0 !== _z ? _z : void 0,
+          lineCap: "butt",
+          clip: !0,
+          cornerRadius: cellTheme.group.cornerRadius
+        })).role = "cell", cellGroup.col = col, cellGroup.row = row, null == columnGroup || columnGroup.addCellGroup(cellGroup));
+      }
+      let icons;
+      if (mayHaveIcon) {
+        let iconCol = col,
+          iconRow = row;
+        range && (iconCol = range.start.col, iconRow = range.start.row), icons = table.getCellIcons(iconCol, iconRow);
+      }
+      let iconWidth = 0,
+        cellLeftIconWidth = 0;
+      if (Array.isArray(icons) && 0 !== icons.length) {
+        const {
+          leftIconWidth: leftIconWidth,
+          rightIconWidth: rightIconWidth,
+          absoluteLeftIconWidth: absoluteLeftIconWidth,
+          absoluteRightIconWidth: absoluteRightIconWidth
+        } = dealWithIconLayout(icons, cellGroup, range, table);
+        iconWidth = leftIconWidth + rightIconWidth, cellLeftIconWidth = leftIconWidth, cellGroup.forEachChildren(child => {
+          "icon-left" === child.role ? child.setAttribute("x", child.attribute.x + padding[3]) : "icon-right" === child.role ? child.setAttribute("x", child.attribute.x + width - rightIconWidth - padding[1]) : "icon-absolute-right" === child.role && child.setAttribute("x", child.attribute.x + width - absoluteRightIconWidth - padding[1]);
+        }), cellGroup.forEachChildren(child => {
+          "middle" === textBaseline ? child.setAttribute("y", (height - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", height - child.AABBBounds.height() - padding[2]) : child.setAttribute("y", padding[0]);
+        });
+      }
+      const switchComponent = createSwitch(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table);
+      return switchComponent && cellGroup.appendChild(switchComponent), switchComponent.render(), width -= padding[1] + padding[3] + iconWidth, height -= padding[0] + padding[2], "center" === textAlign ? switchComponent.setAttribute("x", padding[3] + cellLeftIconWidth + (width - switchComponent.AABBBounds.width()) / 2) : "right" === textAlign ? switchComponent.setAttribute("x", padding[3] + cellLeftIconWidth + width - switchComponent.AABBBounds.width()) : switchComponent.setAttribute("x", padding[3] + cellLeftIconWidth), "middle" === textBaseline ? switchComponent.setAttribute("y", padding[0] + (height - switchComponent.AABBBounds.height()) / 2) : "bottom" === textBaseline ? switchComponent.setAttribute("y", padding[0] + height - switchComponent.AABBBounds.height()) : switchComponent.setAttribute("y", padding[0]), cellGroup;
+    }
+    function createSwitch(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table) {
+      var _a, _b, _c, _d;
+      const style = table._getCellStyle(col, row),
+        spaceBetweenTextAndCircle = getProp("spaceBetweenTextAndCircle", style, col, row, table),
+        circleRadius = getProp("circleRadius", style, col, row, table),
+        boxWidth = getProp("boxWidth", style, col, row, table),
+        boxHeight = getProp("boxHeight", style, col, row, table),
+        checkedFill = getProp("checkedFill", style, col, row, table),
+        uncheckedFill = getProp("uncheckedFill", style, col, row, table),
+        disableCheckedFill = getProp("disableCheckedFill", style, col, row, table),
+        disableUncheckedFill = getProp("disableUncheckedFill", style, col, row, table),
+        circleFill = getProp("circleFill", style, col, row, table),
+        value = table.getCellValue(col, row),
+        dataValue = table.getCellOriginValue(col, row);
+      let isChecked,
+        isDisabled,
+        text = null !== (_a = value) && void 0 !== _a ? _a : "";
+      isObject$7(value) ? (isChecked = value.checked, isDisabled = value.disable, text = null !== (_b = value.text) && void 0 !== _b ? _b : "") : "boolean" == typeof value && (isChecked = value, text = ""), isChecked = table.stateManager.syncCheckedState(col, row, define.field, isChecked);
+      const hierarchyOffset = getHierarchyOffset(col, row, table),
+        cellStyle = table._getCellStyle(col, row),
+        autoWrapText = null !== (_c = cellStyle.autoWrapText) && void 0 !== _c ? _c : table.internalProps.autoWrapText,
+        {
+          lineClamp: lineClamp
+        } = cellStyle,
+        {
+          checked: checked,
+          disable: disable,
+          uncheckedText: uncheckedText,
+          checkedText: checkedText
+        } = define;
+      if (null == isChecked || "function" == typeof isChecked) {
+        const globalChecked = getOrApply(checked, {
+          col: col,
+          row: row,
+          table: table,
+          context: null,
+          value: value,
+          dataValue: dataValue
+        });
+        isChecked = table.stateManager.syncCheckedState(col, row, define.field, globalChecked);
+      }
+      const globalDisable = getOrApply(disable, {
+          col: col,
+          row: row,
+          table: table,
+          context: null,
+          value: value,
+          dataValue: dataValue
+        }),
+        checkedTextString = getOrApply(checkedText, {
+          col: col,
+          row: row,
+          table: table,
+          context: null,
+          value: value,
+          dataValue: dataValue
+        }),
+        uncheckedTextString = getOrApply(uncheckedText, {
+          col: col,
+          row: row,
+          table: table,
+          context: null,
+          value: value,
+          dataValue: dataValue
+        }),
+        autoColWidth = "auto" === colWidth,
+        autoRowHeight = table.isAutoRowHeight(row),
+        attribute = {
+          text: 1 === text.length ? text[0] : text,
+          maxLineWidth: autoColWidth ? 1 / 0 : cellWidth - (padding[1] + padding[3] + hierarchyOffset) - 2 * circleRadius - spaceBetweenTextAndCircle,
+          textAlign: "left",
+          textBaseline: "top",
+          autoWrapText: autoWrapText,
+          lineClamp: lineClamp,
+          wordBreak: "break-word",
+          heightLimit: autoRowHeight ? -1 : cellHeight - Math.floor(padding[0] + padding[2]),
+          pickable: !1,
+          dx: hierarchyOffset,
+          whiteSpace: 1 !== text.length || autoWrapText ? "normal" : "no-wrap",
+          checkedText: checkedTextString,
+          uncheckedText: uncheckedTextString
+        },
+        switchAttributes = {
+          x: 0,
+          y: 0,
+          text: cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute,
+          circle: {
+            radius: circleRadius
+          },
+          box: {
+            width: boxWidth,
+            height: boxHeight
+          },
+          spaceBetweenTextAndCircle: spaceBetweenTextAndCircle,
+          disabled: null !== (_d = null != isDisabled ? isDisabled : globalDisable) && void 0 !== _d && _d
+        };
+      switchAttributes.checked = isChecked, uncheckedFill && (switchAttributes.box.uncheckedFill = uncheckedFill), disableUncheckedFill && (switchAttributes.box.disableUncheckedFill = disableUncheckedFill), checkedFill && (switchAttributes.box.checkedFill = checkedFill), disableCheckedFill && (switchAttributes.box.disableCheckedFill = disableCheckedFill), circleFill && (switchAttributes.circle.fill = circleFill);
+      const switchComponent = new Switch(switchAttributes);
+      return switchComponent.name = "switch", switchComponent;
+    }
+
     const xScale = new PointScale(),
       yScale = new LinearScale();
     function createSparkLineCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, table, cellTheme, isAsync) {
@@ -56476,6 +57105,159 @@
       scale.niceMax(target.targetTicks.length);
     }
 
+    function createButtonCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+      if (!cellGroup) {
+        const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
+        isAsync && (cellGroup = table.scenegraph.highPerformanceGetCell(col, row, !0)) && "cell" === cellGroup.role && cellGroup.setAttributes({
+          x: xOrigin,
+          y: yOrigin,
+          width: width,
+          height: height,
+          lineWidth: null !== (_b = null === (_a = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _a ? void 0 : _a.lineWidth) && void 0 !== _b ? _b : void 0,
+          fill: null !== (_d = null === (_c = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _c ? void 0 : _c.fill) && void 0 !== _d ? _d : void 0,
+          stroke: null !== (_f = null === (_e = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _e ? void 0 : _e.stroke) && void 0 !== _f ? _f : void 0,
+          strokeArrayWidth: strokeArrayWidth,
+          strokeArrayColor: null !== (_h = null === (_g = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _g ? void 0 : _g.strokeArrayColor) && void 0 !== _h ? _h : void 0,
+          cursor: null !== (_k = null === (_j = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _j ? void 0 : _j.cursor) && void 0 !== _k ? _k : void 0,
+          lineDash: null !== (_m = null === (_l = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _l ? void 0 : _l.lineDash) && void 0 !== _m ? _m : void 0,
+          lineCap: "butt",
+          clip: !0,
+          cornerRadius: cellTheme.group.cornerRadius
+        }), cellGroup && "cell" === cellGroup.role || ((cellGroup = new Group({
+          x: xOrigin,
+          y: yOrigin,
+          width: width,
+          height: height,
+          lineWidth: null !== (_p = null === (_o = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _o ? void 0 : _o.lineWidth) && void 0 !== _p ? _p : void 0,
+          fill: null !== (_r = null === (_q = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _q ? void 0 : _q.fill) && void 0 !== _r ? _r : void 0,
+          stroke: null !== (_t = null === (_s = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _s ? void 0 : _s.stroke) && void 0 !== _t ? _t : void 0,
+          strokeArrayWidth: strokeArrayWidth,
+          strokeArrayColor: null !== (_v = null === (_u = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _u ? void 0 : _u.strokeArrayColor) && void 0 !== _v ? _v : void 0,
+          cursor: null !== (_x = null === (_w = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _w ? void 0 : _w.cursor) && void 0 !== _x ? _x : void 0,
+          lineDash: null !== (_z = null === (_y = null == cellTheme ? void 0 : cellTheme.group) || void 0 === _y ? void 0 : _y.lineDash) && void 0 !== _z ? _z : void 0,
+          lineCap: "butt",
+          clip: !0,
+          cornerRadius: cellTheme.group.cornerRadius
+        })).role = "cell", cellGroup.col = col, cellGroup.row = row, null == columnGroup || columnGroup.addCellGroup(cellGroup));
+      }
+      let icons;
+      if (mayHaveIcon) {
+        let iconCol = col,
+          iconRow = row;
+        range && (iconCol = range.start.col, iconRow = range.start.row), icons = table.getCellIcons(iconCol, iconRow);
+      }
+      let iconWidth = 0,
+        cellLeftIconWidth = 0;
+      if (Array.isArray(icons) && 0 !== icons.length) {
+        const {
+          leftIconWidth: leftIconWidth,
+          rightIconWidth: rightIconWidth,
+          absoluteLeftIconWidth: absoluteLeftIconWidth,
+          absoluteRightIconWidth: absoluteRightIconWidth
+        } = dealWithIconLayout(icons, cellGroup, range, table);
+        iconWidth = leftIconWidth + rightIconWidth, cellLeftIconWidth = leftIconWidth, cellGroup.forEachChildren(child => {
+          "icon-left" === child.role ? child.setAttribute("x", child.attribute.x + padding[3]) : "icon-right" === child.role ? child.setAttribute("x", child.attribute.x + width - rightIconWidth - padding[1]) : "icon-absolute-right" === child.role && child.setAttribute("x", child.attribute.x + width - absoluteRightIconWidth - padding[1]);
+        }), cellGroup.forEachChildren(child => {
+          "middle" === textBaseline ? child.setAttribute("y", (height - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", height - child.AABBBounds.height() - padding[2]) : child.setAttribute("y", padding[0]);
+        });
+      }
+      const buttonComponent = createButton(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table);
+      return buttonComponent && cellGroup.appendChild(buttonComponent), width -= padding[1] + padding[3] + iconWidth, height -= padding[0] + padding[2], "center" === textAlign ? buttonComponent.setAttribute("x", padding[3] + cellLeftIconWidth + (width - buttonComponent.AABBBounds.width()) / 2) : "right" === textAlign ? buttonComponent.setAttribute("x", padding[3] + cellLeftIconWidth + width - buttonComponent.AABBBounds.width()) : buttonComponent.setAttribute("x", padding[3] + cellLeftIconWidth), "middle" === textBaseline ? buttonComponent.setAttribute("y", padding[0] + (height - buttonComponent.AABBBounds.height()) / 2) : "bottom" === textBaseline ? buttonComponent.setAttribute("y", padding[0] + height - buttonComponent.AABBBounds.height()) : buttonComponent.setAttribute("y", padding[0]), cellGroup;
+    }
+    function createButton(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table) {
+      var _a, _b;
+      const style = table._getCellStyle(col, row),
+        buttonColor = getProp("buttonColor", style, col, row, table),
+        buttonBorderColor = getProp("buttonBorderColor", style, col, row, table),
+        buttonLineWidth = getProp("buttonLineWidth", style, col, row, table),
+        buttonBorderRadius = getProp("buttonBorderRadius", style, col, row, table),
+        buttonHoverColor = getProp("buttonHoverColor", style, col, row, table),
+        buttonHoverBorderColor = getProp("buttonHoverBorderColor", style, col, row, table),
+        buttonPadding = getProp("buttonPadding", style, col, row, table),
+        buttonTextHoverColor = getProp("buttonTextHoverColor", style, col, row, table),
+        buttonDisableColor = getProp("buttonDisableColor", style, col, row, table),
+        buttonDisableBorderColor = getProp("buttonDisableBorderColor", style, col, row, table),
+        buttonTextDisableColor = getProp("buttonTextDisableColor", style, col, row, table),
+        value = table.getCellValue(col, row),
+        dataValue = table.getCellOriginValue(col, row),
+        hierarchyOffset = getHierarchyOffset(col, row, table),
+        cellStyle = table._getCellStyle(col, row),
+        autoWrapText = null !== (_a = cellStyle.autoWrapText) && void 0 !== _a ? _a : table.internalProps.autoWrapText,
+        {
+          lineClamp: lineClamp
+        } = cellStyle,
+        autoColWidth = "auto" === colWidth,
+        autoRowHeight = table.isAutoRowHeight(row),
+        {
+          disable: disable,
+          text: text
+        } = define,
+        isDisable = getOrApply(disable, {
+          col: col,
+          row: row,
+          table: table,
+          context: null,
+          value: value,
+          dataValue: dataValue
+        }),
+        buttonTextValue = getOrApply(text, {
+          col: col,
+          row: row,
+          table: table,
+          context: null,
+          value: value,
+          dataValue: dataValue
+        }),
+        buttonText = null !== (_b = null != buttonTextValue ? buttonTextValue : value) && void 0 !== _b ? _b : "",
+        attribute = {
+          maxLineWidth: autoColWidth ? 1 / 0 : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
+          textAlign: "left",
+          textBaseline: "top",
+          autoWrapText: autoWrapText,
+          lineClamp: lineClamp,
+          wordBreak: "break-word",
+          heightLimit: autoRowHeight ? -1 : cellHeight - Math.floor(padding[0] + padding[2]),
+          pickable: !1,
+          dx: hierarchyOffset,
+          whiteSpace: 1 !== buttonText.length || autoWrapText ? "normal" : "no-wrap"
+        },
+        testAttribute = cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute,
+        buttonAttributes = {
+          x: 0,
+          y: 0,
+          cursor: isDisable ? "not-allowed" : "pointer",
+          disable: isDisable,
+          childrenPickable: !1,
+          text: 1 === buttonText.length ? buttonText[0] : buttonText,
+          textStyle: testAttribute,
+          padding: buttonPadding,
+          panel: {
+            visible: !0,
+            fill: isDisable ? buttonDisableColor : buttonColor,
+            stroke: isDisable ? buttonDisableBorderColor : buttonBorderColor,
+            lineWidth: buttonLineWidth,
+            cornerRadius: buttonBorderRadius
+          },
+          state: {
+            text: {},
+            panel: {
+              hover: {
+                fill: buttonHoverColor,
+                stroke: buttonHoverBorderColor
+              }
+            }
+          }
+        };
+      buttonTextDisableColor && (buttonAttributes.state.text.fill = buttonTextDisableColor), buttonTextHoverColor && (buttonAttributes.state.text.hover.fill = buttonTextHoverColor);
+      const buttonComponent = new Tag(buttonAttributes);
+      return buttonComponent.name = "button", isDisable || (buttonComponent.addEventListener("mouseenter", () => {
+        buttonComponent.addState("hover", !0, !1), buttonComponent.stage.renderNextFrame();
+      }), buttonComponent.addEventListener("mouseleave", () => {
+        buttonComponent.removeState("hover", !1), buttonComponent.stage.renderNextFrame();
+      })), buttonComponent;
+    }
+
     const registerChartCell = () => {
       Factory.registerFunction("createChartCellGroup", createChartCellGroup), Factory.registerFunction("getAxisDomainRangeAndLabels", getAxisDomainRangeAndLabels);
     };
@@ -56491,6 +57273,12 @@
     const registerRadioCell = () => {
       Factory.registerFunction("createRadioCellGroup", createRadioCellGroup);
     };
+    const registerSwitchCell = () => {
+      Factory.registerFunction("createSwitchCellGroup", createSwitchCellGroup);
+    };
+    const registerButtonCell = () => {
+      Factory.registerFunction("createButtonCellGroup", createButtonCellGroup);
+    };
     const registerSparkLineCell = () => {
       Factory.registerFunction("createSparkLineCellGroup", createSparkLineCellGroup);
     };
@@ -56501,7 +57289,7 @@
       Factory.registerFunction("createVideoCellGroup", createVideoCellGroup);
     };
 
-    registerAxis(), registerEmptyTip(), registerLegend(), registerMenu(), registerTitle(), registerTooltip(), registerListTreeStickCellPlugin(), registerCustomCellStylePlugin(), registerChartCell(), registerCheckboxCell(), registerImageCell(), registerProgressBarCell(), registerRadioCell(), registerSparkLineCell(), registerTextCell(), registerVideoCell();
+    registerAxis(), registerEmptyTip(), registerLegend(), registerMenu(), registerTitle(), registerTooltip(), registerListTreeStickCellPlugin(), registerCustomCellStylePlugin(), registerChartCell(), registerCheckboxCell(), registerImageCell(), registerProgressBarCell(), registerRadioCell(), registerSwitchCell(), registerButtonCell(), registerSparkLineCell(), registerTextCell(), registerVideoCell();
     class ListTableAll extends ListTable {}
 
     registerForVrender();