@visactor/vtable 1.17.0-alpha.4 → 1.17.0

package/dist/vtable.js

@@ -26370,6 +26370,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$2(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$1(merge$1({}, this.attribute.circle)), this.appendChild(this._circle);
+      }
+      renderText() {
+        var _a, _b, _c;
+        this._text = new Text$1(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 = false;
     function registerForVrender() {
         if (registed) {
@@ -27501,7 +27605,7 @@
         }
     };
 
-    let defaultStyle$9;
+    let defaultStyle$b;
     const STYLE_EVENT_TYPE = {
         CHANGE_STYLE: 'change_style'
     };
@@ -27539,7 +27643,7 @@
             return STYLE_EVENT_TYPE;
         }
         static get DEFAULT() {
-            return defaultStyle$9 ? defaultStyle$9 : (defaultStyle$9 = new Style());
+            return defaultStyle$b ? defaultStyle$b : (defaultStyle$b = new Style());
         }
         constructor(style = {}, bodyStyle = {}) {
             super();
@@ -27745,10 +27849,10 @@
         }
     };
 
-    let defaultStyle$8;
+    let defaultStyle$a;
     let ImageStyle$1 = class ImageStyle extends Style$1 {
         static get DEFAULT() {
-            return defaultStyle$8 ? defaultStyle$8 : (defaultStyle$8 = new ImageStyle());
+            return defaultStyle$a ? defaultStyle$a : (defaultStyle$a = new ImageStyle());
         }
         constructor(style = {}, bodyStyle = {}) {
             super(style, bodyStyle);
@@ -27758,12 +27862,12 @@
         }
     };
 
-    let defaultStyle$7;
+    let defaultStyle$9;
     class TextStyle extends Style$1 {
         _autoWrapText;
         _lineClamp;
         static get DEFAULT() {
-            return defaultStyle$7 ? defaultStyle$7 : (defaultStyle$7 = new TextStyle());
+            return defaultStyle$9 ? defaultStyle$9 : (defaultStyle$9 = new TextStyle());
         }
         constructor(style = {}, bodyStyle = {}) {
             super(style, bodyStyle);
@@ -27787,7 +27891,7 @@
         }
     }
 
-    let defaultStyle$6;
+    let defaultStyle$8;
     let CheckboxStyle$1 = class CheckboxStyle extends Style$1 {
         _size;
         _spaceBetweenTextAndIcon;
@@ -27801,7 +27905,7 @@
         _checkIconImage;
         _indeterminateIconImage;
         static get DEFAULT() {
-            return defaultStyle$6 ? defaultStyle$6 : (defaultStyle$6 = new CheckboxStyle());
+            return defaultStyle$8 ? defaultStyle$8 : (defaultStyle$8 = new CheckboxStyle());
         }
         constructor(style = {}, headerStyle = {}, checkboxThemeStyle = {}) {
             super(style, headerStyle);
@@ -27896,7 +28000,7 @@
         }
     };
 
-    let defaultStyle$5;
+    let defaultStyle$7;
     class RadioStyle extends Style$1 {
         _size;
         _spaceBetweenTextAndIcon;
@@ -27911,7 +28015,7 @@
         _disableCheckedFill;
         _disableCheckedStroke;
         static get DEFAULT() {
-            return defaultStyle$5 ? defaultStyle$5 : (defaultStyle$5 = new RadioStyle());
+            return defaultStyle$7 ? defaultStyle$7 : (defaultStyle$7 = new RadioStyle());
         }
         constructor(style = {}, headerStyle = {}, radioThemeStyle = {}) {
             super(style, headerStyle);
@@ -28013,6 +28117,216 @@
         }
     }
 
+    let defaultStyle$6;
+    class SwitchStyle extends Style$1 {
+        _spaceBetweenTextAndCircle;
+        _circleRadius;
+        _boxWidth;
+        _boxHeight;
+        _checkedFill;
+        _uncheckedFill;
+        _disableCheckedFill;
+        _disableUncheckedFill;
+        _circleFill;
+        static get DEFAULT() {
+            return defaultStyle$6 ? defaultStyle$6 : (defaultStyle$6 = new SwitchStyle());
+        }
+        constructor(style = {}, headerStyle = {}, switchThemeStyle = {}) {
+            super(style, headerStyle);
+            this._spaceBetweenTextAndCircle =
+                (style?.spaceBetweenTextAndCircle ??
+                    headerStyle?.spaceBetweenTextAndCircle ??
+                    switchThemeStyle?.spaceBetweenTextAndCircle) ||
+                    6;
+            this._circleRadius = (style?.switchStyle?.circleRadius ?? switchThemeStyle?.circleRadius) || 8;
+            this._boxWidth = (style?.switchStyle?.boxWidth ?? switchThemeStyle?.boxWidth) || 40;
+            this._boxHeight = (style?.switchStyle?.boxHeight ?? switchThemeStyle?.boxHeight) || 24;
+            this._checkedFill = (style?.switchStyle?.checkedFill ?? switchThemeStyle?.checkedFill) || '#165DFF';
+            this._uncheckedFill = (style?.switchStyle?.uncheckedFill ?? switchThemeStyle?.uncheckedFill) || '#c9cdd4';
+            this._disableCheckedFill =
+                (style?.switchStyle?.disableCheckedFill ?? switchThemeStyle?.disableCheckedFill) || '#94bfff';
+            this._disableUncheckedFill =
+                (style?.switchStyle?.disableUncheckedFill ?? switchThemeStyle?.disableUncheckedFill) || '#f2f3f5';
+            this._circleFill = (style?.switchStyle?.circleFill ?? 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 {
+        _buttonColor;
+        _buttonBorderColor;
+        _buttonLineWidth;
+        _buttonBorderRadius;
+        _buttonHoverColor;
+        _buttonHoverBorderColor;
+        _buttonTextHoverColor;
+        _buttonDisableColor;
+        _buttonDisableBorderColor;
+        _buttonTextDisableColor;
+        _buttonTextHoverBorderColor;
+        _buttonPadding;
+        static get DEFAULT() {
+            return defaultStyle$5 ? defaultStyle$5 : (defaultStyle$5 = new ButtonStyle());
+        }
+        constructor(style = {}, headerStyle = {}, buttonThemeStyle = {}) {
+            super(style, headerStyle);
+            this._buttonColor = (style?.buttonStyle?.buttonColor ?? buttonThemeStyle?.buttonColor) || '#165DFF';
+            this._buttonBorderColor =
+                (style?.buttonStyle?.buttonBorderColor ?? buttonThemeStyle?.buttonBorderColor) || '#165DFF';
+            this._buttonLineWidth = (style?.buttonStyle?.buttonLineWidth ?? buttonThemeStyle?.buttonLineWidth) || 1;
+            this._buttonBorderRadius = (style?.buttonStyle?.buttonBorderRadius ?? buttonThemeStyle?.buttonBorderRadius) || 2;
+            this._buttonHoverColor = (style?.buttonStyle?.buttonHoverColor ?? buttonThemeStyle?.buttonHoverColor) || '#4080FF';
+            this._buttonHoverBorderColor =
+                (style?.buttonStyle?.buttonHoverBorderColor ?? buttonThemeStyle?.buttonHoverBorderColor) || '#4080FF';
+            this._buttonTextHoverColor = style?.buttonStyle?.buttonTextHoverColor ?? buttonThemeStyle?.buttonTextHoverColor;
+            this._buttonDisableColor =
+                (style?.buttonStyle?.buttonDisableColor ?? buttonThemeStyle?.buttonDisableColor) || '#94bfff';
+            this._buttonDisableBorderColor =
+                (style?.buttonStyle?.buttonDisableBorderColor ?? buttonThemeStyle?.buttonDisableBorderColor) || '#94bfff';
+            this._buttonTextDisableColor =
+                style?.buttonStyle?.buttonTextDisableColor ?? buttonThemeStyle?.buttonTextDisableColor;
+            this._buttonPadding = (style?.buttonStyle?.buttonPadding ?? 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, StyleClassDef = Style$1, globalAutoWrapText, theme) {
         if (columnStyle || bodyStyle) {
             if (columnStyle instanceof Style$1) {
@@ -28033,6 +28347,12 @@
             else if (StyleClassDef === RadioStyle) {
                 return new RadioStyle(columnStyle ?? {}, (bodyStyle ?? {}), (theme.radioStyle ?? {}));
             }
+            else if (StyleClassDef === SwitchStyle) {
+                return new SwitchStyle(columnStyle ?? {}, (bodyStyle ?? {}), (theme.switchStyle ?? {}));
+            }
+            else if (StyleClassDef === ButtonStyle) {
+                return new ButtonStyle(columnStyle ?? {}, (bodyStyle ?? {}), (theme.buttonStyle ?? {}));
+            }
             return new StyleClassDef((columnStyle ?? {}), (bodyStyle ?? {}));
         }
         return StyleClassDef.DEFAULT;
@@ -28707,6 +29027,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',
@@ -28714,7 +29035,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) => {
@@ -29813,6 +30135,8 @@
         _axisStyle = null;
         _checkboxStyle = null;
         _radioStyle = null;
+        _switchStyle = null;
+        _buttonStyle = null;
         _textPopTipStyle = null;
         _internalIconsStyle = null;
         isPivot = false;
@@ -30352,6 +30676,22 @@
             }
             return this._radioStyle;
         }
+        get switchStyle() {
+            if (!this._switchStyle) {
+                const { obj, superTheme } = this.internalTheme;
+                const switchStyle = ingoreNoneValueMerge({}, superTheme.switchStyle, obj.switchStyle);
+                this._switchStyle = switchStyle;
+            }
+            return this._switchStyle;
+        }
+        get buttonStyle() {
+            if (!this._buttonStyle) {
+                const { obj, superTheme } = this.internalTheme;
+                const buttonStyle = ingoreNoneValueMerge({}, superTheme.buttonStyle, obj.buttonStyle);
+                this._buttonStyle = buttonStyle;
+            }
+            return this._buttonStyle;
+        }
         get textPopTipStyle() {
             if (!this._textPopTipStyle) {
                 const { obj, superTheme } = this.internalTheme;
@@ -34401,6 +34741,18 @@
             }
         }
     };
+    class TextIcon extends Text$1 {
+        role;
+        tooltip;
+        constructor(params) {
+            params.fill = params.fill ?? '#00F';
+            params.fontSize = params.fontSize ?? 12;
+            params.underline = params.underline ?? 1;
+            params.textBaseline = params.textBaseline ?? 'top';
+            params.cursor = params.cursor ?? 'pointer';
+            super(params);
+        }
+    }
 
     function emptyCustomLayout(args) {
         const group = new Group$2({});
@@ -35943,7 +36295,7 @@
         updateCenterLayout(contentWidth) {
             let textWidth = contentWidth;
             this._centerGroup.forEachChildren(child => {
-                if (child instanceof Icon$1) {
+                if (child instanceof Icon$1 || child instanceof TextIcon) {
                     textWidth -= child.AABBBounds.width();
                 }
             });
@@ -36366,9 +36718,19 @@
             mark.name = icon.name;
             return mark;
         }
-        const iconMark = new Icon$1(iconAttribute);
-        iconMark.tooltip = icon.tooltip;
-        iconMark.name = icon.name;
+        let iconMark;
+        if (icon.type === 'text') {
+            iconAttribute.text = icon.content;
+            merge$1(iconAttribute, icon.style);
+            iconMark = new TextIcon(iconAttribute);
+            iconMark.tooltip = icon.tooltip;
+            iconMark.name = icon.name;
+        }
+        else {
+            iconMark = new Icon$1(iconAttribute);
+            iconMark.tooltip = icon.tooltip;
+            iconMark.name = icon.name;
+        }
         return iconMark;
     }
     function dealWithRichTextIcon(icon) {
@@ -37201,6 +37563,14 @@
             const createRadioCellGroup = Factory.getFunction('createRadioCellGroup');
             cellGroup = createRadioCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range);
         }
+        else if (type === 'switch') {
+            const createSwitchCellGroup = Factory.getFunction('createSwitchCellGroup');
+            cellGroup = createSwitchCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
+        }
+        else if (type === 'button') {
+            const createButtonCellGroup = Factory.getFunction('createButtonCellGroup');
+            cellGroup = createButtonCellGroup(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
+        }
         cellGroup.onBeforeAttributeUpdate = onBeforeAttributeUpdateForInvertHighlight;
         return cellGroup;
     }
@@ -37645,6 +38015,7 @@
 
     const utilCheckBoxMark = new CheckBox({});
     const utilRadioMark = new Radio({});
+    const utilButtonMark = new Tag$1({});
     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;
         const lines = validToString(text).split('\n') || [];
@@ -37748,6 +38119,47 @@
         }
         return maxHeight;
     }
+    function computeSwitchCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table) {
+        const boxWidth = getProp('boxWidth', actStyle, col, row, table);
+        return boxWidth;
+    }
+    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;
+        const lines = validToString(text).split('\n') || [];
+        const cellWidth = table.getColsWidth(col, endCol);
+        const buttonPadding = getProp('buttonPadding', actStyle, col, row, table);
+        const 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,
+                    fontSize,
+                    fontStyle,
+                    fontWeight,
+                    fontFamily,
+                    lineHeight,
+                    wordBreak: 'break-word',
+                    lineClamp
+                },
+                padding: buttonPadding,
+                panel: {
+                    visible: true,
+                    fill: 'red',
+                    stroke: 'red',
+                    lineWidth: buttonLineWidth
+                }
+            });
+            utilRadioMark.render();
+            maxHeight = utilRadioMark.AABBBounds.height();
+        }
+        else {
+            maxHeight = lines.length * lineHeight + buttonPadding * 2;
+        }
+        return maxHeight;
+    }
 
     let customAlphabetCharSet = '';
     let textMeasureMode = 'quick';
@@ -38443,7 +38855,9 @@
             cellType !== 'link' &&
             cellType !== 'progressbar' &&
             cellType !== 'checkbox' &&
-            cellType !== 'radio') {
+            cellType !== 'radio' &&
+            cellType !== 'switch' &&
+            cellType !== 'button') {
             maxHeight = lineHeight;
         }
         else if (cellType === 'checkbox') {
@@ -38452,6 +38866,12 @@
         else if (cellType === 'radio') {
             maxHeight = computeRadioCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);
         }
+        else if (cellType === 'switch') {
+            maxHeight = computeSwitchCellHeight(cellValue, col, row, endCol, actStyle, autoWrapText, iconWidth, fontSize, fontStyle, fontWeight, fontFamily, lineHeight, lineClamp, padding, table);
+        }
+        else if (cellType === 'button') {
+            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;
@@ -39406,7 +39826,11 @@
         }
         getMenuInfo(col, row, type) {
             if (type === MenuType.dropDown) {
-                const { dropDownMenu = this._table.globalDropDownMenu, pivotInfo } = this._table._getHeaderLayoutMap(col, row);
+                let dropDownMenu = this._table.globalDropDownMenu;
+                dropDownMenu = this._table._getHeaderLayoutMap(col, row).dropDownMenu;
+                if (typeof dropDownMenu === 'function') {
+                    dropDownMenu = dropDownMenu({ row, col, table: this._table });
+                }
                 let highlightIndex = -1;
                 if (Array.isArray(dropDownMenu)) {
                     for (let i = 0; i < dropDownMenu.length; i++) {
@@ -40756,6 +41180,7 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
+            this.activeChartInstance?.release();
             this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge$1({}, this.attribute.tableChartOption, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
@@ -40943,11 +41368,11 @@
         const { table } = chart.getRootNode();
         let updateSpec = false;
         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 = true;
+                updateSpec = formatResult.updateSpec ?? true;
             }
         }
         if (!updateSpec) {
@@ -41125,11 +41550,10 @@
             }
             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;
                         activeChartInstance.updateSpecSync(spec);
-                        return;
                     }
                 }
                 const viewBox = chart.getViewBox();
@@ -42701,14 +43125,14 @@
             let actualWidth = 0;
             for (let col = 0; col < table.colCount; col++) {
                 const colWidth = update ? newWidths[col] ?? table.getColWidth(col) : table.getColWidth(col);
-                if (col < table.rowHeaderLevelCount ||
+                if (col < table.rowHeaderLevelCount + table.leftRowSeriesNumberCount ||
                     (table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount)) {
                     actualHeaderWidth += colWidth;
                 }
                 actualWidth += colWidth;
             }
             if (actualWidth < canvasWidth && actualWidth > actualHeaderWidth) {
-                const startCol = table.rowHeaderLevelCount;
+                const startCol = table.rowHeaderLevelCount + table.leftRowSeriesNumberCount;
                 const endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount;
                 getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, update, newWidths, table);
             }
@@ -42809,7 +43233,9 @@
                 cellType !== 'link' &&
                 cellType !== 'progressbar' &&
                 cellType !== 'checkbox' &&
-                cellType !== 'radio') {
+                cellType !== 'radio' &&
+                cellType !== 'switch' &&
+                cellType !== 'button') {
                 maxWidth = Math.max(maxWidth, table.getColWidthDefinedNumber(col) || 0);
                 continue;
             }
@@ -42995,6 +43421,18 @@
                 text = isObject$7(cellValue) ? cellValue.text : cellValue;
             }
         }
+        else if (cellType === 'button') {
+            const define = table.getBodyColumnDefine(col, row);
+            const buttonTextValue = getOrApply(define.text, {
+                col,
+                row,
+                table,
+                context: null,
+                value: cellValue,
+                dataValue: table.getCellOriginValue(col, row)
+            });
+            text = buttonTextValue ?? cellValue ?? '';
+        }
         else {
             text = cellValue;
         }
@@ -43048,6 +43486,14 @@
                 }
             }
         }
+        else if (cellType === 'switch') {
+            const boxWidth = getProp('boxWidth', actStyle, col, row, table);
+            maxWidth = boxWidth;
+        }
+        else if (cellType === 'button') {
+            const buttonPadding = getProp('buttonPadding', actStyle, col, row, table);
+            maxWidth += buttonPadding * 2;
+        }
         return maxWidth;
     }
     function getCellRect(col, row, table) {
@@ -47920,16 +48366,16 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            if (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;
-            }
-            else if (Env.mode === 'node') {
+            if (Env.mode === 'node') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
             }
+            else if (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;
+            }
             else {
                 vglobal.setEnv('browser');
                 width = table.canvas.width;
@@ -48305,6 +48751,7 @@
             }
             const cellGroup = this.getCell(col, row);
             cellGroup?.firstChild?.activate?.(this.table);
+            return cellGroup?.firstChild?.activeChartInstance;
         }
         removeInteractionBorder(col, row) {
             const cellGroup = this.getCell(col, row);
@@ -50689,7 +51136,7 @@
         const define = table.getBodyColumnDefine(col, row);
         const field = define?.field;
         const cellType = table.getCellType(col, row);
-        if (isValid$3(field) && cellType === 'checkbox') {
+        if (isValid$3(field) && cellType === 'radio') {
             const dataIndex = table.dataSource.getIndexKey(table.getRecordShowIndexByCell(col, row));
             const columnState = table.stateManager.radioState?.[field];
             if (isNumber$4(columnState)) {
@@ -52151,7 +52598,10 @@
                     }
                     if (isValid$3(col) && isValid$3(row) && this.table.isCellRangeEqual(colNow, rowNow, col, row)) {
                         const headerC = this.table._getHeaderLayoutMap(col ?? colNow, row ?? rowNow);
-                        const dropDownMenu = headerC.dropDownMenu || this.table.globalDropDownMenu;
+                        let dropDownMenu = headerC.dropDownMenu || this.table.globalDropDownMenu;
+                        if (typeof dropDownMenu === 'function') {
+                            dropDownMenu = dropDownMenu({ row, col, table: this.table });
+                        }
                         if (dropDownMenu) {
                             for (let i = 0; i < dropDownMenu.length; i++) {
                                 const item = dropDownMenu[i];
@@ -53445,6 +53895,36 @@
             table.fireListeners(TABLE_EVENT_TYPE.RADIO_STATE_CHANGE, cellsEvent);
             table.scenegraph.updateNextFrame();
         });
+        table.scenegraph.tableGroup.addEventListener('switch_state_change', (e) => {
+            const eventArgsSet = getCellEventArgsSet(e);
+            const { col, row, target } = eventArgsSet.eventArgs;
+            const cellInfo = table.getCellInfo(col, row);
+            const 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++) {
+                        const cellGroup = table.scenegraph.getCell(col, row);
+                        cellGroup.forEachChildren((switchComponent) => {
+                            if (switchComponent.name === 'switch') {
+                                switchComponent.setAttributes({
+                                    checked: e.target.attribute.checked
+                                });
+                            }
+                        });
+                    }
+                }
+            }
+            const cellsEvent = {
+                ...cellInfo,
+                event: e.nativeEvent,
+                target: eventArgsSet?.eventArgs?.target,
+                mergeCellInfo: eventArgsSet?.eventArgs?.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) => {
             const legend = e.path.find(node => node.name === 'legend');
             if (!legend) {
@@ -53982,6 +54462,9 @@
         });
         if (!table.options.canvas) {
             handler.on(table.getContainer(), 'resize', e => {
+                if (table.isReleased) {
+                    return;
+                }
                 if (e.width === 0 && e.height === 0) {
                     return;
                 }
@@ -54708,6 +55191,17 @@
         });
     }
 
+    function bindButtonClickEvent(table) {
+        table.on(TABLE_EVENT_TYPE.CLICK_CELL, (e) => {
+            const { col, row, target } = e;
+            if (target.name === 'button' && !target.attribute.disable) {
+                if (table.hasListeners(TABLE_EVENT_TYPE.BUTTON_CLICK)) {
+                    table.fireListeners(TABLE_EVENT_TYPE.BUTTON_CLICK, { col, row, event: e.event });
+                }
+            }
+        });
+    }
+
     class EventManager {
         table;
         isTouchdown;
@@ -54807,12 +55301,14 @@
                 if (e.federatedEvent) {
                     const eventArgsSet = getCellEventArgsSet(e.federatedEvent);
                     const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
+                    const disableDblclickAutoResizeColWidth = this.table.options.disableDblclickAutoResizeColWidth ??
+                        this.table.options.resize?.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 &&
-                        !this.table.options.disableDblclickAutoResizeColWidth) {
+                        !disableDblclickAutoResizeColWidth) {
                         this.table.scenegraph.updateAutoColWidth(resizeCol.col);
                         this.table.internalProps._widthResizedColMap.add(resizeCol.col);
                         this.table.scenegraph.updateChartSizeForResizeColWidth(resizeCol.col);
@@ -54840,6 +55336,7 @@
             bindAxisClickEvent(this.table);
             bindAxisHoverEvent(this.table);
             bindGroupTitleCheckboxChange(this.table);
+            bindButtonClickEvent(this.table);
         }
         dealTableHover(eventArgsSet) {
             if (!eventArgsSet) {
@@ -54872,7 +55369,10 @@
             }
             const { eventArgs } = eventArgsSet;
             if (eventArgs) {
-                if (eventArgs.target.name === 'checkbox' || eventArgs.target.name === 'radio') {
+                if (eventArgs.target.name === 'checkbox' ||
+                    eventArgs.target.name === 'radio' ||
+                    eventArgs.target.name === 'switch' ||
+                    eventArgs.target.name === 'button') {
                     return false;
                 }
                 if (this.table.isHeader(eventArgs.col, eventArgs.row) &&
@@ -55254,7 +55754,7 @@
     const ICON_PROP_KEYS = [
         'type',
         'content',
-        'font',
+        'style',
         'color',
         'width',
         'height',
@@ -55356,6 +55856,10 @@
                     return CheckboxStyle$1;
                 case 'radio':
                     return RadioStyle;
+                case 'switch':
+                    return SwitchStyle;
+                case 'button':
+                    return ButtonStyle;
             }
             return TextStyle;
         }
@@ -56635,11 +57139,18 @@
         getDropDownStateIcons(_table, col, row) {
             const headerC = _table.getHeaderDefine(col, row);
             const headerL = _table._getHeaderLayoutMap(col, row);
-            const { dropDownMenu } = headerL;
+            let { dropDownMenu } = headerL;
+            if (typeof dropDownMenu === 'function') {
+                dropDownMenu = dropDownMenu({ row, col, table: _table });
+            }
+            let globalDropDownMenu = _table.globalDropDownMenu;
+            if (typeof globalDropDownMenu === 'function') {
+                globalDropDownMenu = globalDropDownMenu({ row, col, table: _table });
+            }
             const results = [];
             if ((Array.isArray(dropDownMenu) && dropDownMenu.length) ||
-                (Array.isArray(_table.globalDropDownMenu) && _table.globalDropDownMenu.length && !headerC?.columns?.length)) {
-                const menus = dropDownMenu || _table.globalDropDownMenu;
+                (Array.isArray(globalDropDownMenu) && globalDropDownMenu.length && !headerC?.columns?.length)) {
+                const menus = dropDownMenu || globalDropDownMenu;
                 let highlightIndex = -1;
                 let subHighlightIndex = -1;
                 for (let i = 0; i < menus.length; i++) {
@@ -56663,10 +57174,10 @@
                 if (highlightIndex !== -1) {
                     let menu;
                     if (subHighlightIndex !== -1) {
-                        menu = (dropDownMenu || _table.globalDropDownMenu)[highlightIndex].children[subHighlightIndex];
+                        menu = menus[highlightIndex].children[subHighlightIndex];
                     }
                     else {
-                        menu = (dropDownMenu || _table.globalDropDownMenu)[highlightIndex];
+                        menu = menus[highlightIndex];
                     }
                     if (menu.stateIcon) {
                         if (menu.stateIcon.svg) {
@@ -56746,17 +57257,26 @@
         checkDropDownIcon(_table, col, row) {
             if (_table.isPivotTable()) {
                 const headerC = _table._getHeaderLayoutMap(col, row);
-                if (Array.isArray(headerC.dropDownMenu) &&
-                    headerC.dropDownMenu.length) {
+                let dropDownMenu = headerC.dropDownMenu;
+                if (typeof dropDownMenu === 'function') {
+                    dropDownMenu = dropDownMenu({ row, col, table: _table });
+                }
+                if (Array.isArray(dropDownMenu) &&
+                    dropDownMenu.length) {
                     return true;
                 }
             }
             else {
                 const headerC = _table.getHeaderDefine(col, row);
-                if ((Array.isArray(headerC.dropDownMenu) && headerC.dropDownMenu.length) ||
+                const dropDownMenu = headerC.dropDownMenu;
+                let globalDropDownMenu = _table.globalDropDownMenu;
+                if (typeof globalDropDownMenu === 'function') {
+                    globalDropDownMenu = globalDropDownMenu({ row, col, table: _table });
+                }
+                if ((Array.isArray(dropDownMenu) && dropDownMenu.length) ||
                     ((!Array.isArray(headerC.dropDownMenu) || headerC.dropDownMenu.length !== 0) &&
-                        Array.isArray(_table.globalDropDownMenu) &&
-                        _table.globalDropDownMenu.length &&
+                        Array.isArray(globalDropDownMenu) &&
+                        globalDropDownMenu.length &&
                         !headerC?.columns?.length)) {
                     return true;
                 }
@@ -58194,6 +58714,7 @@
         if (absoluteX === 0) {
             return { left: 0, col: 0, right: 0, width: 0 };
         }
+        absoluteX = absoluteX - _this.tableX;
         if (isConsider &&
             absoluteX > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() &&
             absoluteX < _this.tableNoFrameWidth &&
@@ -58282,8 +58803,8 @@
             x <= _this.getAllColsWidth()) {
             rightFrozen = true;
         }
-        const colInfo = getTargetColAtConsiderRightFrozen(leftFrozen || rightFrozen ? x : x + _this.scrollLeft, rightFrozen, _this);
-        const rowInfo = getTargetRowAtConsiderBottomFrozen(topFrozen || bottomFrozen ? y : y + _this.scrollTop, bottomFrozen, _this);
+        const colInfo = getTargetColAtConsiderRightFrozen((leftFrozen || rightFrozen ? x : x + _this.scrollLeft) + _this.tableX, rightFrozen, _this);
+        const rowInfo = getTargetRowAtConsiderBottomFrozen((topFrozen || bottomFrozen ? y : y + _this.scrollTop) + _this.tableY, bottomFrozen, _this);
         if (colInfo && rowInfo) {
             const { row, top, bottom, height } = rowInfo;
             const { col, left, right, width } = colInfo;
@@ -59609,7 +60130,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.17.0-alpha.4";
+        version = "1.17.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -59631,7 +60152,7 @@
             if (options.customConfig?.imageAnonymous === false) {
                 vglobal.isImageAnonymous = false;
             }
-            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, rowResizeMode = 'none', dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
+            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
             this.container = container;
             this.options = options;
             this._widthMode = widthMode;
@@ -59670,8 +60191,10 @@
                 this.showFrozenIcon = false;
             }
             if (this.options.canvas) {
-                internalProps.element = this.options.canvas.parentElement;
-                internalProps.element.style.position = 'relative';
+                if (Env.mode !== 'node') {
+                    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');
@@ -59701,8 +60224,8 @@
             internalProps.keyboardOptions = keyboardOptions;
             internalProps.eventOptions = eventOptions;
             internalProps.rowSeriesNumber = rowSeriesNumber;
-            internalProps.columnResizeMode = columnResizeMode;
-            internalProps.rowResizeMode = rowResizeMode;
+            internalProps.columnResizeMode = resize?.columnResizeMode ?? columnResizeMode;
+            internalProps.rowResizeMode = resize?.rowResizeMode ?? rowResizeMode;
             internalProps.dragHeaderMode = dragHeaderMode ?? 'none';
             internalProps.renderChartAsync = renderChartAsync;
             setBatchRenderChartCount(renderChartAsyncBatchCount);
@@ -59803,7 +60326,8 @@
             }, options.menu);
             Array.isArray(options.menu?.dropDownMenuHighlight) &&
                 this.setDropDownMenuHighlight(options.menu?.dropDownMenuHighlight);
-            Array.isArray(options.menu?.defaultHeaderMenuItems) &&
+            (Array.isArray(options.menu?.defaultHeaderMenuItems) ||
+                typeof options.menu?.defaultHeaderMenuItems === 'function') &&
                 (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems);
             if (internalProps.menu.renderMode === 'html') {
                 const MenuHandler = Factory.getComponent('menuHandler');
@@ -60156,7 +60680,7 @@
             return this.internalProps.pixelRatio;
         }
         setPixelRatio(pixelRatio) {
-            if (pixelRatio !== this.internalProps.pixelRatio) {
+            if (pixelRatio !== this.internalProps?.pixelRatio) {
                 this.internalProps.pixelRatio = pixelRatio;
                 const canvasWidth = this.canvasWidth;
                 this.internalProps.calcWidthContext = {
@@ -60985,7 +61509,7 @@
         updateOption(options) {
             this.options = options;
             this._hasAutoImageColumn = undefined;
-            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, rowResizeMode = 'none', dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, widthAdaptiveMode, heightAdaptiveMode, customRender, renderChartAsync, renderChartAsyncBatchCount, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight } = options;
+            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, widthAdaptiveMode, heightAdaptiveMode, customRender, renderChartAsync, renderChartAsyncBatchCount, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight } = options;
             if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
                 this.internalProps.pixelRatio = pixelRatio;
             }
@@ -61030,8 +61554,8 @@
             internalProps.keyboardOptions = keyboardOptions;
             internalProps.eventOptions = eventOptions;
             internalProps.rowSeriesNumber = rowSeriesNumber;
-            internalProps.columnResizeMode = columnResizeMode;
-            internalProps.rowResizeMode = rowResizeMode;
+            internalProps.columnResizeMode = resize?.columnResizeMode ?? columnResizeMode;
+            internalProps.rowResizeMode = resize?.rowResizeMode ?? rowResizeMode;
             internalProps.dragHeaderMode = dragHeaderMode ?? 'none';
             internalProps.renderChartAsync = renderChartAsync;
             setBatchRenderChartCount(renderChartAsyncBatchCount);
@@ -61119,7 +61643,8 @@
             }, options.menu);
             Array.isArray(options.menu?.dropDownMenuHighlight) &&
                 this.setDropDownMenuHighlight(options.menu?.dropDownMenuHighlight);
-            Array.isArray(options.menu?.defaultHeaderMenuItems) &&
+            (Array.isArray(options.menu?.defaultHeaderMenuItems) ||
+                typeof options.menu?.defaultHeaderMenuItems === 'function') &&
                 (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems);
             if (internalProps.menu.renderMode === 'html' && !internalProps.menuHandler) {
                 const MenuHandler = Factory.getComponent('menuHandler');
@@ -65578,32 +66103,34 @@
         editingEditor;
         isValidatingValue = false;
         editCell;
+        listenersId = [];
         constructor(table) {
             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 => {
-                if (!editCellTrigger ||
-                    editCellTrigger === 'doubleclick' ||
-                    (Array.isArray(editCellTrigger) && editCellTrigger.includes('doubleclick'))) {
-                    const { col, row } = e;
-                    const eventArgsSet = getCellEventArgsSet(e.federatedEvent);
-                    const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
-                    if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
-                        return;
-                    }
-                    this.startEditCell(col, row);
+            const table = this.table;
+            const doubleClickEventId = table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
+                const { editCellTrigger = 'doubleclick' } = table.options;
+                if (!editCellTrigger.includes('doubleclick')) {
+                    return;
+                }
+                const { col, row } = e;
+                const eventArgsSet = getCellEventArgsSet(e.federatedEvent);
+                const resizeCol = table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
+                if (table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
+                    return;
                 }
+                this.startEditCell(col, row);
             });
-            this.table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
+            const clickEventId = table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
+                const { editCellTrigger = 'doubleclick' } = table.options;
                 if (editCellTrigger === 'click' || (Array.isArray(editCellTrigger) && editCellTrigger.includes('click'))) {
                     const { col, row } = e;
                     this.startEditCell(col, row);
                 }
             });
+            this.listenersId.push(doubleClickEventId, clickEventId);
         }
         startEditCell(col, row, value) {
             if (this.editingEditor) {
@@ -65641,9 +66168,9 @@
                     },
                     referencePosition,
                     container: this.table.getElement(),
-                    table: this.table,
                     col,
-                    row
+                    row,
+                    table: this.table
                 });
             }
         }
@@ -65715,6 +66242,11 @@
                 this.editingEditor = null;
             }
         }
+        release() {
+            this.listenersId.forEach(id => {
+                this.table.off(id);
+            });
+        }
     }
     function dealWithValidateValue(validateValue, editManager, oldValue, resolve) {
         editManager.isValidatingValue = false;
@@ -67263,7 +67795,7 @@
             const define = this.getBodyColumnDefine(col, row);
             const field = define?.field;
             const cellType = this.getCellType(col, row);
-            if (isValid$3(field) && cellType === 'checkbox') {
+            if (isValid$3(field) && (cellType === 'checkbox' || cellType === 'switch')) {
                 const dataIndex = this.dataSource.getIndexKey(this.getRecordShowIndexByCell(col, row)).toString();
                 return this.stateManager.checkedState.get(dataIndex)?.[field];
             }
@@ -67284,6 +67816,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) {
             this.internalProps.dataSource?.release();
             this.internalProps.releaseList = this.internalProps.releaseList?.filter((item) => !item.dataSourceObj);
@@ -67520,6 +68061,10 @@
                 }
             }
         }
+        release() {
+            this.editorManager.release();
+            super.release();
+        }
     }
 
     function isXAxis(orient) {
@@ -70358,7 +70903,13 @@
             };
         }
         else if (type === 'dropdown-menu') {
-            const { dropDownMenu = table.globalDropDownMenu, pivotInfo } = table._getHeaderLayoutMap(col, row);
+            let dropDownMenu = table.globalDropDownMenu;
+            const headerData = table._getHeaderLayoutMap(col, row);
+            dropDownMenu = headerData.dropDownMenu ?? dropDownMenu;
+            const pivotInfo = headerData.pivotInfo;
+            if (typeof dropDownMenu === 'function') {
+                dropDownMenu = dropDownMenu({ row, col, table });
+            }
             return {
                 type,
                 referencePosition: {
@@ -71603,7 +72154,7 @@
                 canvas: table.canvas ?? 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,
                 width: width - padding[3] - padding[1],
                 height: height - padding[2] - padding[0],
@@ -71613,7 +72164,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,
+                row
             });
             cellGroup.appendChild(chartGroup);
             table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -72046,6 +72599,230 @@
         return isDisabled ?? globalDisable ?? false;
     }
 
+    function createSwitchCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync) {
+        if (!cellGroup) {
+            const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
+            if (isAsync) {
+                cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
+                if (cellGroup && cellGroup.role === 'cell') {
+                    cellGroup.setAttributes({
+                        x: xOrigin,
+                        y: yOrigin,
+                        width,
+                        height,
+                        lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+                        fill: cellTheme?.group?.fill ?? undefined,
+                        stroke: cellTheme?.group?.stroke ?? undefined,
+                        strokeArrayWidth: strokeArrayWidth,
+                        strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+                        cursor: cellTheme?.group?.cursor ?? undefined,
+                        lineDash: cellTheme?.group?.lineDash ?? undefined,
+                        lineCap: 'butt',
+                        clip: true,
+                        cornerRadius: cellTheme.group.cornerRadius
+                    });
+                }
+            }
+            if (!cellGroup || cellGroup.role !== 'cell') {
+                cellGroup = new Group$1({
+                    x: xOrigin,
+                    y: yOrigin,
+                    width,
+                    height,
+                    lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+                    fill: cellTheme?.group?.fill ?? undefined,
+                    stroke: cellTheme?.group?.stroke ?? undefined,
+                    strokeArrayWidth: strokeArrayWidth,
+                    strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+                    cursor: cellTheme?.group?.cursor ?? undefined,
+                    lineDash: cellTheme?.group?.lineDash ?? undefined,
+                    lineCap: 'butt',
+                    clip: true,
+                    cornerRadius: cellTheme.group.cornerRadius
+                });
+                cellGroup.role = 'cell';
+                cellGroup.col = col;
+                cellGroup.row = row;
+                columnGroup?.addCellGroup(cellGroup);
+            }
+        }
+        let icons;
+        if (mayHaveIcon) {
+            let iconCol = col;
+            let iconRow = row;
+            if (range) {
+                iconCol = range.start.col;
+                iconRow = range.start.row;
+            }
+            icons = table.getCellIcons(iconCol, iconRow);
+        }
+        let iconWidth = 0;
+        let cellLeftIconWidth = 0;
+        if (Array.isArray(icons) && icons.length !== 0) {
+            const { leftIconWidth, rightIconWidth, absoluteLeftIconWidth, absoluteRightIconWidth } = dealWithIconLayout(icons, cellGroup, range, table);
+            iconWidth = leftIconWidth + rightIconWidth;
+            cellLeftIconWidth = leftIconWidth;
+            cellGroup.forEachChildren((child) => {
+                if (child.role === 'icon-left') {
+                    child.setAttribute('x', child.attribute.x + padding[3]);
+                }
+                else if (child.role === 'icon-right') {
+                    child.setAttribute('x', child.attribute.x + width - rightIconWidth - padding[1]);
+                }
+                else if (child.role === 'icon-absolute-right') {
+                    child.setAttribute('x', child.attribute.x + width - absoluteRightIconWidth - padding[1]);
+                }
+            });
+            cellGroup.forEachChildren((child) => {
+                if (textBaseline === 'middle') {
+                    child.setAttribute('y', (height - child.AABBBounds.height()) / 2);
+                }
+                else if (textBaseline === 'bottom') {
+                    child.setAttribute('y', height - child.AABBBounds.height() - padding[2]);
+                }
+                else {
+                    child.setAttribute('y', padding[0]);
+                }
+            });
+        }
+        const switchComponent = createSwitch(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table);
+        if (switchComponent) {
+            cellGroup.appendChild(switchComponent);
+        }
+        switchComponent.render();
+        width -= padding[1] + padding[3] + iconWidth;
+        height -= padding[0] + padding[2];
+        if (textAlign === 'center') {
+            switchComponent.setAttribute('x', padding[3] + cellLeftIconWidth + (width - switchComponent.AABBBounds.width()) / 2);
+        }
+        else if (textAlign === 'right') {
+            switchComponent.setAttribute('x', padding[3] + cellLeftIconWidth + width - switchComponent.AABBBounds.width());
+        }
+        else {
+            switchComponent.setAttribute('x', padding[3] + cellLeftIconWidth);
+        }
+        if (textBaseline === 'middle') {
+            switchComponent.setAttribute('y', padding[0] + (height - switchComponent.AABBBounds.height()) / 2);
+        }
+        else if (textBaseline === 'bottom') {
+            switchComponent.setAttribute('y', padding[0] + height - switchComponent.AABBBounds.height());
+        }
+        else {
+            switchComponent.setAttribute('y', padding[0]);
+        }
+        return cellGroup;
+    }
+    function createSwitch(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table) {
+        const style = table._getCellStyle(col, row);
+        const spaceBetweenTextAndCircle = getProp('spaceBetweenTextAndCircle', style, col, row, table);
+        const circleRadius = getProp('circleRadius', style, col, row, table);
+        const boxWidth = getProp('boxWidth', style, col, row, table);
+        const boxHeight = getProp('boxHeight', style, col, row, table);
+        const checkedFill = getProp('checkedFill', style, col, row, table);
+        const uncheckedFill = getProp('uncheckedFill', style, col, row, table);
+        const disableCheckedFill = getProp('disableCheckedFill', style, col, row, table);
+        const disableUncheckedFill = getProp('disableUncheckedFill', style, col, row, table);
+        const circleFill = getProp('circleFill', style, col, row, table);
+        const value = table.getCellValue(col, row);
+        const dataValue = table.getCellOriginValue(col, row);
+        let isChecked;
+        let isDisabled;
+        let text = value ?? '';
+        if (isObject$7(value)) {
+            isChecked = value.checked;
+            isDisabled = value.disable;
+            text = value.text ?? '';
+        }
+        else if (typeof value === 'boolean') {
+            isChecked = value;
+            text = '';
+        }
+        isChecked = table.stateManager.syncCheckedState(col, row, define.field, isChecked);
+        const hierarchyOffset = getHierarchyOffset(col, row, table);
+        const cellStyle = table._getCellStyle(col, row);
+        const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
+        const { lineClamp } = cellStyle;
+        const { checked, disable, uncheckedText, checkedText } = define;
+        if (isChecked === undefined || isChecked === null || typeof isChecked === 'function') {
+            const globalChecked = getOrApply(checked, {
+                col,
+                row,
+                table,
+                context: null,
+                value,
+                dataValue
+            });
+            isChecked = table.stateManager.syncCheckedState(col, row, define.field, globalChecked);
+        }
+        const globalDisable = getOrApply(disable, {
+            col,
+            row,
+            table,
+            context: null,
+            value,
+            dataValue
+        });
+        const checkedTextString = getOrApply(checkedText, {
+            col,
+            row,
+            table,
+            context: null,
+            value,
+            dataValue
+        });
+        const uncheckedTextString = getOrApply(uncheckedText, {
+            col,
+            row,
+            table,
+            context: null,
+            value,
+            dataValue
+        });
+        const autoColWidth = colWidth === 'auto';
+        const autoRowHeight = table.isAutoRowHeight(row);
+        const attribute = {
+            text: text.length === 1 ? text[0] : text,
+            maxLineWidth: autoColWidth
+                ? Infinity
+                : cellWidth - (padding[1] + padding[3] + hierarchyOffset) - circleRadius * 2 - spaceBetweenTextAndCircle,
+            textAlign: 'left',
+            textBaseline: 'top',
+            autoWrapText,
+            lineClamp,
+            wordBreak: 'break-word',
+            heightLimit: autoRowHeight ? -1 : cellHeight - Math.floor(padding[0] + padding[2]),
+            pickable: false,
+            dx: hierarchyOffset,
+            whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal',
+            checkedText: checkedTextString,
+            uncheckedText: uncheckedTextString
+        };
+        const testAttribute = cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute;
+        const switchAttributes = {
+            x: 0,
+            y: 0,
+            text: testAttribute,
+            circle: {
+                radius: circleRadius
+            },
+            box: {
+                width: boxWidth,
+                height: boxHeight
+            },
+            spaceBetweenTextAndCircle,
+            disabled: isDisabled ?? globalDisable ?? false
+        };
+        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);
+        switchComponent.name = 'switch';
+        return switchComponent;
+    }
+
     const xScale = new PointScale();
     const yScale = new LinearScale();
     function createSparkLineCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, table, cellTheme, isAsync) {
@@ -73148,6 +73925,213 @@
         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) {
+        if (!cellGroup) {
+            const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
+            if (isAsync) {
+                cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
+                if (cellGroup && cellGroup.role === 'cell') {
+                    cellGroup.setAttributes({
+                        x: xOrigin,
+                        y: yOrigin,
+                        width,
+                        height,
+                        lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+                        fill: cellTheme?.group?.fill ?? undefined,
+                        stroke: cellTheme?.group?.stroke ?? undefined,
+                        strokeArrayWidth: strokeArrayWidth,
+                        strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+                        cursor: cellTheme?.group?.cursor ?? undefined,
+                        lineDash: cellTheme?.group?.lineDash ?? undefined,
+                        lineCap: 'butt',
+                        clip: true,
+                        cornerRadius: cellTheme.group.cornerRadius
+                    });
+                }
+            }
+            if (!cellGroup || cellGroup.role !== 'cell') {
+                cellGroup = new Group$1({
+                    x: xOrigin,
+                    y: yOrigin,
+                    width,
+                    height,
+                    lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+                    fill: cellTheme?.group?.fill ?? undefined,
+                    stroke: cellTheme?.group?.stroke ?? undefined,
+                    strokeArrayWidth: strokeArrayWidth,
+                    strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+                    cursor: cellTheme?.group?.cursor ?? undefined,
+                    lineDash: cellTheme?.group?.lineDash ?? undefined,
+                    lineCap: 'butt',
+                    clip: true,
+                    cornerRadius: cellTheme.group.cornerRadius
+                });
+                cellGroup.role = 'cell';
+                cellGroup.col = col;
+                cellGroup.row = row;
+                columnGroup?.addCellGroup(cellGroup);
+            }
+        }
+        let icons;
+        if (mayHaveIcon) {
+            let iconCol = col;
+            let iconRow = row;
+            if (range) {
+                iconCol = range.start.col;
+                iconRow = range.start.row;
+            }
+            icons = table.getCellIcons(iconCol, iconRow);
+        }
+        let iconWidth = 0;
+        let cellLeftIconWidth = 0;
+        if (Array.isArray(icons) && icons.length !== 0) {
+            const { leftIconWidth, rightIconWidth, absoluteLeftIconWidth, absoluteRightIconWidth } = dealWithIconLayout(icons, cellGroup, range, table);
+            iconWidth = leftIconWidth + rightIconWidth;
+            cellLeftIconWidth = leftIconWidth;
+            cellGroup.forEachChildren((child) => {
+                if (child.role === 'icon-left') {
+                    child.setAttribute('x', child.attribute.x + padding[3]);
+                }
+                else if (child.role === 'icon-right') {
+                    child.setAttribute('x', child.attribute.x + width - rightIconWidth - padding[1]);
+                }
+                else if (child.role === 'icon-absolute-right') {
+                    child.setAttribute('x', child.attribute.x + width - absoluteRightIconWidth - padding[1]);
+                }
+            });
+            cellGroup.forEachChildren((child) => {
+                if (textBaseline === 'middle') {
+                    child.setAttribute('y', (height - child.AABBBounds.height()) / 2);
+                }
+                else if (textBaseline === 'bottom') {
+                    child.setAttribute('y', height - child.AABBBounds.height() - padding[2]);
+                }
+                else {
+                    child.setAttribute('y', padding[0]);
+                }
+            });
+        }
+        const buttonComponent = createButton(col, row, colWidth - iconWidth, width, height, padding, cellTheme, define, table);
+        if (buttonComponent) {
+            cellGroup.appendChild(buttonComponent);
+        }
+        width -= padding[1] + padding[3] + iconWidth;
+        height -= padding[0] + padding[2];
+        if (textAlign === 'center') {
+            buttonComponent.setAttribute('x', padding[3] + cellLeftIconWidth + (width - buttonComponent.AABBBounds.width()) / 2);
+        }
+        else if (textAlign === 'right') {
+            buttonComponent.setAttribute('x', padding[3] + cellLeftIconWidth + width - buttonComponent.AABBBounds.width());
+        }
+        else {
+            buttonComponent.setAttribute('x', padding[3] + cellLeftIconWidth);
+        }
+        if (textBaseline === 'middle') {
+            buttonComponent.setAttribute('y', padding[0] + (height - buttonComponent.AABBBounds.height()) / 2);
+        }
+        else if (textBaseline === 'bottom') {
+            buttonComponent.setAttribute('y', padding[0] + height - buttonComponent.AABBBounds.height());
+        }
+        else {
+            buttonComponent.setAttribute('y', padding[0]);
+        }
+        return cellGroup;
+    }
+    function createButton(col, row, colWidth, cellWidth, cellHeight, padding, cellTheme, define, table) {
+        const style = table._getCellStyle(col, row);
+        const buttonColor = getProp('buttonColor', style, col, row, table);
+        const buttonBorderColor = getProp('buttonBorderColor', style, col, row, table);
+        const buttonLineWidth = getProp('buttonLineWidth', style, col, row, table);
+        const buttonBorderRadius = getProp('buttonBorderRadius', style, col, row, table);
+        const buttonHoverColor = getProp('buttonHoverColor', style, col, row, table);
+        const buttonHoverBorderColor = getProp('buttonHoverBorderColor', style, col, row, table);
+        const buttonPadding = getProp('buttonPadding', style, col, row, table);
+        const buttonTextHoverColor = getProp('buttonTextHoverColor', style, col, row, table);
+        const buttonDisableColor = getProp('buttonDisableColor', style, col, row, table);
+        const buttonDisableBorderColor = getProp('buttonDisableBorderColor', style, col, row, table);
+        const buttonTextDisableColor = getProp('buttonTextDisableColor', style, col, row, table);
+        const value = table.getCellValue(col, row);
+        const dataValue = table.getCellOriginValue(col, row);
+        const hierarchyOffset = getHierarchyOffset(col, row, table);
+        const cellStyle = table._getCellStyle(col, row);
+        const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
+        const { lineClamp } = cellStyle;
+        const autoColWidth = colWidth === 'auto';
+        const autoRowHeight = table.isAutoRowHeight(row);
+        const { disable, text } = define;
+        const isDisable = getOrApply(disable, {
+            col,
+            row,
+            table,
+            context: null,
+            value,
+            dataValue
+        });
+        const buttonTextValue = getOrApply(text, {
+            col,
+            row,
+            table,
+            context: null,
+            value,
+            dataValue
+        });
+        const buttonText = buttonTextValue ?? value ?? '';
+        const attribute = {
+            maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
+            textAlign: 'left',
+            textBaseline: 'top',
+            autoWrapText,
+            lineClamp,
+            wordBreak: 'break-word',
+            heightLimit: autoRowHeight ? -1 : cellHeight - Math.floor(padding[0] + padding[2]),
+            pickable: false,
+            dx: hierarchyOffset,
+            whiteSpace: buttonText.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
+        };
+        const testAttribute = cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute;
+        const buttonAttributes = {
+            x: 0,
+            y: 0,
+            cursor: isDisable ? 'not-allowed' : 'pointer',
+            disable: isDisable,
+            childrenPickable: false,
+            text: buttonText.length === 1 ? buttonText[0] : buttonText,
+            textStyle: testAttribute,
+            padding: buttonPadding,
+            panel: {
+                visible: true,
+                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$1(buttonAttributes);
+        buttonComponent.name = 'button';
+        if (!isDisable) {
+            buttonComponent.addEventListener('mouseenter', () => {
+                buttonComponent.addState('hover', true, false);
+                buttonComponent.stage.renderNextFrame();
+            });
+            buttonComponent.addEventListener('mouseleave', () => {
+                buttonComponent.removeState('hover', false);
+                buttonComponent.stage.renderNextFrame();
+            });
+        }
+        return buttonComponent;
+    }
+
     const registerChartCell = () => {
         Factory.registerFunction('createChartCellGroup', createChartCellGroup);
         Factory.registerFunction('getAxisDomainRangeAndLabels', getAxisDomainRangeAndLabels);
@@ -73164,6 +74148,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);
     };
@@ -73187,6 +74177,8 @@
     registerImageCell();
     registerProgressBarCell();
     registerRadioCell();
+    registerSwitchCell();
+    registerButtonCell();
     registerSparkLineCell();
     registerTextCell();
     registerVideoCell();
@@ -78389,8 +79381,8 @@
                     !options.indicatorsAsCol && !options.rows?.length && !options.rowTree ? [] : cloneDeep$1(options.rowTree);
                 this.internalProps.records = options.records;
                 this.pagination = options.pagination;
-                this.internalProps.columnResizeType = options.columnResizeType ?? 'column';
-                this.internalProps.rowResizeType = options.rowResizeType ?? 'row';
+                this.internalProps.columnResizeType = options.resize?.columnResizeType ?? options.columnResizeType ?? 'column';
+                this.internalProps.rowResizeType = options.resize?.rowResizeType ?? options.rowResizeType ?? 'row';
                 this.internalProps.dataConfig = cloneDeep$1(options.dataConfig);
                 this.internalProps.columnWidthConfig = options.columnWidthConfig;
                 this.internalProps.columnWidthConfigForRowHeader = options.columnWidthConfigForRowHeader;
@@ -78541,8 +79533,8 @@
             this.stateManager.initCheckedState(this.internalProps.records);
             this.stateManager.updateDrillState(undefined, undefined, false, false, -1, -1);
             this.pagination = options.pagination;
-            internalProps.columnResizeType = options.columnResizeType ?? 'column';
-            internalProps.rowResizeType = options.rowResizeType ?? 'row';
+            internalProps.columnResizeType = options.resize?.columnResizeType ?? options.columnResizeType ?? 'column';
+            internalProps.rowResizeType = options.resize?.rowResizeType ?? options.rowResizeType ?? 'row';
             internalProps.dataConfig = cloneDeep$1(options.dataConfig);
             this.internalProps.columnWidthConfig = options.columnWidthConfig;
             this.internalProps.columnWidthConfigForRowHeader = options.columnWidthConfigForRowHeader;
@@ -79924,6 +80916,10 @@
         getFilteredRecords() {
             return this.dataset?.filterRules;
         }
+        release() {
+            this.editorManager.release();
+            super.release();
+        }
     }
 
     registerAxis();
@@ -79996,8 +80992,8 @@
                 !options.indicatorsAsCol && !options.rows?.length && !options.rowTree ? [] : cloneDeep$1(options.rowTree);
             this.internalProps.records = options.records;
             this.setCustomStateNameToSpec();
-            this.internalProps.columnResizeType = options.columnResizeType ?? 'column';
-            this.internalProps.rowResizeType = options.rowResizeType ?? 'row';
+            this.internalProps.columnResizeType = options.resize?.columnResizeType ?? options.columnResizeType ?? 'column';
+            this.internalProps.rowResizeType = options.resize?.rowResizeType ?? options.rowResizeType ?? 'row';
             this.internalProps.dataConfig = { isPivotChart: true };
             this._axes = isArray$7(options.axes) ? options.axes : [];
             let columnDimensionTree;
@@ -80156,8 +81152,8 @@
             options.records && (this.internalProps.records = options.records);
             this.setCustomStateNameToSpec();
             this._selectedDataItemsInChart = [];
-            internalProps.columnResizeType = options.columnResizeType ?? 'column';
-            internalProps.rowResizeType = options.rowResizeType ?? 'row';
+            internalProps.columnResizeType = options.resize?.columnResizeType ?? options.columnResizeType ?? 'column';
+            internalProps.rowResizeType = options.resize?.rowResizeType ?? options.rowResizeType ?? 'row';
             internalProps.dataConfig = { isPivotChart: true };
             this._axes = isArray$7(options.axes) ? options.axes : [];
             let columnDimensionTree;
@@ -80927,6 +81923,80 @@
             }
             return {};
         }
+        activateChartInstance(cellHeaderPaths) {
+            const cellAddr = this.getCellAddressByHeaderPaths(cellHeaderPaths);
+            if (cellAddr) {
+                const col = cellAddr.col;
+                const row = cellAddr.row;
+                const cellGroup = this.scenegraph.getCell(col, row);
+                const chartNode = cellGroup?.getChildren()?.[0];
+                const activeChartInstance = this.scenegraph.activateChart(col, row);
+                const { dataId, data, axes, spec } = chartNode.attribute;
+                const viewBox = chartNode.getViewBox();
+                axes?.forEach((axis, index) => {
+                    if (axis.type === 'linear') {
+                        activeChartInstance.updateModelSpecSync({ type: 'axes', index }, {
+                            min: axis.range?.min ?? 0,
+                            max: axis.range?.max ?? 0,
+                            tick: {
+                                tickMode: axis.tick?.tickMode
+                            }
+                        }, true);
+                    }
+                    else if (axis.type === 'band') {
+                        activeChartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
+                    }
+                });
+                activeChartInstance.updateViewBox({
+                    x1: 0,
+                    x2: viewBox.x2 - viewBox.x1,
+                    y1: 0,
+                    y2: viewBox.y2 - viewBox.y1
+                }, false, false);
+                const chartStage = activeChartInstance.getStage();
+                chartStage.needRender = true;
+                const matrix = chartNode.globalTransMatrix.clone();
+                const stageMatrix = chartNode.stage.window.getViewBoxTransform().clone();
+                stageMatrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+                chartStage.window.setViewBoxTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+                if (typeof dataId === 'string') {
+                    activeChartInstance.updateDataSync(dataId, data ?? []);
+                }
+                else {
+                    const dataBatch = [];
+                    for (const dataIdStr in dataId) {
+                        const dataIdAndField = dataId[dataIdStr];
+                        const series = spec.series.find((item) => item?.data?.id === dataIdStr);
+                        dataBatch.push({
+                            id: dataIdStr,
+                            values: dataIdAndField
+                                ? data?.filter((item) => {
+                                    return item.hasOwnProperty(dataIdAndField);
+                                }) ?? []
+                                : data ?? [],
+                            fields: series?.data?.fields
+                        });
+                        if (!activeChartInstance.updateFullDataSync) {
+                            activeChartInstance.updateDataSync(dataIdStr, dataIdAndField
+                                ? data?.filter((item) => {
+                                    return item.hasOwnProperty(dataIdAndField);
+                                }) ?? []
+                                : data ?? []);
+                        }
+                    }
+                    activeChartInstance.updateFullDataSync?.(dataBatch);
+                }
+                return activeChartInstance;
+            }
+        }
+        replaceChartCacheImage(cellHeaderPaths, chartInstance) {
+            const cellAddr = this.getCellAddressByHeaderPaths(cellHeaderPaths);
+            if (cellAddr) {
+                const cellGroup = this.scenegraph.getCell(cellAddr.col, cellAddr.row);
+                const chartNode = cellGroup?.getChildren()?.[0];
+                cacheStageCanvas(chartInstance.getStage(), chartNode);
+            }
+        }
         _getDimensionSortArray() {
             if (this.options?.axes?.length) {
                 const dimensionAxisOrient = this.options.indicatorsAsCol ? 'left' : 'bottom';
@@ -81589,7 +82659,7 @@
     }
 
     registerForVrender();
-    const version = "1.17.0-alpha.4";
+    const version = "1.17.0";
     function getIcons() {
         return get$2();
     }
@@ -81635,6 +82705,7 @@
     exports.jsx = jsx;
     exports.register = register$1;
     exports.registerAxis = registerAxis;
+    exports.registerButtonCell = registerButtonCell;
     exports.registerChartCell = registerChartCell;
     exports.registerCheckboxCell = registerCheckboxCell;
     exports.registerEmptyTip = registerEmptyTip;
@@ -81644,6 +82715,7 @@
     exports.registerProgressBarCell = registerProgressBarCell;
     exports.registerRadioCell = registerRadioCell;
     exports.registerSparkLineCell = registerSparkLineCell;
+    exports.registerSwitchCell = registerSwitchCell;
     exports.registerTextCell = registerTextCell;
     exports.registerTitle = registerTitle;
     exports.registerTooltip = registerTooltip;