@visactor/vtable-sheet 1.22.4-alpha.4 → 1.22.4-alpha.6

package/cjs/index.d.ts

@@ -2,5 +2,5 @@ import VTableSheet from './components/vtable-sheet';
 import type { ISheetDefine, IVTableSheetOptions } from './ts-types';
 import * as TYPES from './ts-types';
 import * as VTable from './vtable';
-export declare const version = "1.22.4-alpha.4";
+export declare const version = "1.22.4-alpha.6";
 export { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };

package/cjs/index.js

@@ -47,4 +47,4 @@ exports.VTable = VTable;
 
 const style_manager_1 = require("./styles/style-manager");
 
-exports.version = "1.22.4-alpha.4", (0, style_manager_1.importStyles)();
+exports.version = "1.22.4-alpha.6", (0, style_manager_1.importStyles)();

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.22.4-alpha.4\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.22.4-alpha.6\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };\n"]}

package/dist/vtable-sheet.js

@@ -38507,7 +38507,9 @@
       DELETE_RECORD: "delete_record",
       UPDATE_RECORD: "update_record",
       ADD_COLUMN: "add_column",
-      DELETE_COLUMN: "delete_column"
+      DELETE_COLUMN: "delete_column",
+      FILTER_MENU_SHOW: "filter_menu_show",
+      FILTER_MENU_HIDE: "filter_menu_hide"
     };
 
     const judgeType = value => {
@@ -59252,7 +59254,7 @@
     class PluginManager {
       constructor(table, options) {
         var _a;
-        this.plugins = new Map(), this.table = table, null === (_a = options.plugins) || void 0 === _a || _a.map(plugin => {
+        this.plugins = new Map(), this.pluginEventMap = new Map(), this.table = table, null === (_a = options.plugins) || void 0 === _a || _a.map(plugin => {
           this.register(plugin), this._bindTableEventForPlugin(plugin);
         });
       }
@@ -59271,15 +59273,19 @@
       _bindTableEventForPlugin(plugin) {
         var _a;
         null === (_a = plugin.runTime) || void 0 === _a || _a.forEach(runTime => {
-          this.table.on(runTime, (...args) => {
+          const id = this.table.on(runTime, (...args) => {
             var _a;
             null === (_a = plugin.run) || void 0 === _a || _a.call(plugin, ...args, runTime, this.table);
           });
+          this.pluginEventMap.set(plugin.id, [...(this.pluginEventMap.get(plugin.id) || []), id]);
         });
       }
       updatePlugins(plugins) {
         Array.from(this.plugins.values()).filter(plugin => !(null == plugins ? void 0 : plugins.some(p => p.id === plugin.id))).forEach(plugin => {
-          this.release(), this.plugins.delete(plugin.id);
+          var _a;
+          null === (_a = this.pluginEventMap.get(plugin.id)) || void 0 === _a || _a.forEach(id => {
+            this.table.off(id);
+          }), this.release(), this.plugins.delete(plugin.id);
         }), this.plugins.forEach(plugin => {
           plugin.update && plugin.update();
         });
@@ -59310,7 +59316,7 @@
       }
       constructor(container, options = {}) {
         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 (super(), this.showFrozenIcon = !0, this.version = "1.22.4-alpha.4", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.22.4-alpha.6", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -64775,7 +64781,7 @@
       }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const internalProps = this.internalProps;
-        if (super.updateOption(options, updateConfig), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule) : {
+        if (this.pluginManager.updatePlugins(options.plugins), super.updateOption(options, updateConfig), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule) : {
           addRecordRule: options.addRecordRule
         }, this.showHeader = null === (_c = options.showHeader) || void 0 === _c || _c, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_e = null !== (_d = options.enableTreeNodeMerge) && void 0 !== _d ? _d : isValid$4(this.internalProps.groupBy)) && void 0 !== _e && _e, this.internalProps.headerHelper.setTableColumnsEditor(), this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, this.internalProps.columnWidthConfig = options.columnWidthConfig, this.internalProps.rowHeightConfig = options.rowHeightConfig, internalProps.releaseList) for (let i = internalProps.releaseList.length - 1; i >= 0; i--) {
           const releaseObj = internalProps.releaseList[i];
@@ -64791,7 +64797,7 @@
           const EmptyTip = Factory.getComponent("emptyTip");
           this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_j = this.internalProps.emptyTip) || void 0 === _j || _j.resetVisible();
         }
-        return this.pluginManager.updatePlugins(options.plugins), setTimeout(() => {
+        return setTimeout(() => {
           this.fireListeners(TABLE_EVENT_TYPE.UPDATED, null);
         }, 0), new Promise(resolve => {
           setTimeout(resolve, 0);
@@ -65021,7 +65027,7 @@
           }).map(key => this.stateManager.checkedState.get(key));
           return this.options.groupBy && (stateArr = getGroupCheckboxState(this)), Array.from(stateArr, state => state && state[field]);
         }
-        return new Array(...this.stateManager.checkedState.values());
+        return [...this.stateManager.checkedState.values()];
       }
       getCellCheckboxState(col, row) {
         var _a;
@@ -72288,15 +72294,15 @@
         this.getActiveFilterFields().length > 0 && this.applyFilters();
       }
       dispatch(action) {
-        this.state = this.reduce(this.state, action), this.shouldApplyFilter(action) && this.applyFilters(), this.notifyListeners();
+        this.state = this.reduce(this.state, action), this.shouldApplyFilter(action) && this.applyFilters(), this.notifyListeners(action);
       }
       subscribe(listener) {
         return this.listeners.push(listener), () => {
           this.listeners = this.listeners.filter(l => l !== listener);
         };
       }
-      notifyListeners() {
-        this.listeners.forEach(listener => listener(this.state));
+      notifyListeners(action) {
+        this.listeners.forEach(listener => listener(this.state, action));
       }
       reduce(state, action) {
         const {
@@ -72819,125 +72825,131 @@
       hide() {
         this.filterByValuePanel.style.display = "none";
       }
+      clearSearchInputValue() {
+        this.filterByValueSearchInput.value = "";
+      }
     }
 
+    const categories = [{
+      value: FilterOperatorCategory.ALL,
+      label: "全部"
+    }, {
+      value: FilterOperatorCategory.TEXT,
+      label: "文本"
+    }, {
+      value: FilterOperatorCategory.NUMBER,
+      label: "数值"
+    }, {
+      value: FilterOperatorCategory.COLOR,
+      label: "颜色"
+    }, {
+      value: FilterOperatorCategory.CHECKBOX,
+      label: "复选框"
+    }, {
+      value: FilterOperatorCategory.RADIO,
+      label: "单选框"
+    }];
+    const operators = [{
+      value: "equals",
+      label: "等于",
+      category: FilterOperatorCategory.ALL
+    }, {
+      value: "notEquals",
+      label: "不等于",
+      category: FilterOperatorCategory.ALL
+    }, {
+      value: "equals",
+      label: "等于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "notEquals",
+      label: "不等于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "greaterThan",
+      label: "大于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "lessThan",
+      label: "小于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "greaterThanOrEqual",
+      label: "大于等于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "lessThanOrEqual",
+      label: "小于等于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "between",
+      label: "介于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "notBetween",
+      label: "不介于",
+      category: FilterOperatorCategory.NUMBER
+    }, {
+      value: "equals",
+      label: "等于",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "notEquals",
+      label: "不等于",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "contains",
+      label: "包含",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "notContains",
+      label: "不包含",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "startsWith",
+      label: "开头是",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "notStartsWith",
+      label: "开头不是",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "endsWith",
+      label: "结尾是",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "notEndsWith",
+      label: "结尾不是",
+      category: FilterOperatorCategory.TEXT
+    }, {
+      value: "equals",
+      label: "等于",
+      category: FilterOperatorCategory.COLOR
+    }, {
+      value: "notEquals",
+      label: "不等于",
+      category: FilterOperatorCategory.COLOR
+    }, {
+      value: "isChecked",
+      label: "已选中",
+      category: FilterOperatorCategory.CHECKBOX
+    }, {
+      value: "isUnchecked",
+      label: "未选中",
+      category: FilterOperatorCategory.CHECKBOX
+    }, {
+      value: "isChecked",
+      label: "已选中",
+      category: FilterOperatorCategory.RADIO
+    }, {
+      value: "isUnchecked",
+      label: "未选中",
+      category: FilterOperatorCategory.RADIO
+    }];
+
     class ConditionFilter {
-      constructor(table, filterStateManager, styles) {
-        this.currentCategory = FilterOperatorCategory.ALL, this.operators = [{
-          value: "equals",
-          label: "等于",
-          category: FilterOperatorCategory.ALL
-        }, {
-          value: "notEquals",
-          label: "不等于",
-          category: FilterOperatorCategory.ALL
-        }, {
-          value: "equals",
-          label: "等于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "notEquals",
-          label: "不等于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "greaterThan",
-          label: "大于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "lessThan",
-          label: "小于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "greaterThanOrEqual",
-          label: "大于等于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "lessThanOrEqual",
-          label: "小于等于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "between",
-          label: "介于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "notBetween",
-          label: "不介于",
-          category: FilterOperatorCategory.NUMBER
-        }, {
-          value: "equals",
-          label: "等于",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "notEquals",
-          label: "不等于",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "contains",
-          label: "包含",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "notContains",
-          label: "不包含",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "startsWith",
-          label: "开头是",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "notStartsWith",
-          label: "开头不是",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "endsWith",
-          label: "结尾是",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "notEndsWith",
-          label: "结尾不是",
-          category: FilterOperatorCategory.TEXT
-        }, {
-          value: "equals",
-          label: "等于",
-          category: FilterOperatorCategory.COLOR
-        }, {
-          value: "notEquals",
-          label: "不等于",
-          category: FilterOperatorCategory.COLOR
-        }, {
-          value: "isChecked",
-          label: "已选中",
-          category: FilterOperatorCategory.CHECKBOX
-        }, {
-          value: "isUnchecked",
-          label: "未选中",
-          category: FilterOperatorCategory.CHECKBOX
-        }, {
-          value: "isChecked",
-          label: "已选中",
-          category: FilterOperatorCategory.RADIO
-        }, {
-          value: "isUnchecked",
-          label: "未选中",
-          category: FilterOperatorCategory.RADIO
-        }], this.categories = [{
-          value: FilterOperatorCategory.ALL,
-          label: "全部"
-        }, {
-          value: FilterOperatorCategory.TEXT,
-          label: "文本"
-        }, {
-          value: FilterOperatorCategory.NUMBER,
-          label: "数值"
-        }, {
-          value: FilterOperatorCategory.COLOR,
-          label: "颜色"
-        }, {
-          value: FilterOperatorCategory.CHECKBOX,
-          label: "复选框"
-        }, {
-          value: FilterOperatorCategory.RADIO,
-          label: "单选框"
-        }], this.table = table, this.styles = styles, this.filterStateManager = filterStateManager;
+      constructor(table, filterStateManager, styles, conditionCategories) {
+        this.currentCategory = FilterOperatorCategory.ALL, this.categories = [], this.operators = [], this.table = table, this.styles = styles, this.filterStateManager = filterStateManager, this.categories = conditionCategories, this.operators = operators;
       }
       setSelectedField(fieldId) {
         this.selectedField = fieldId, this.updateOperatorOptions(), this.loadCurrentFilterState();
@@ -72947,7 +72959,7 @@
         let filteredOperators;
         if (this.operatorSelect.innerHTML = "", this.currentCategory === FilterOperatorCategory.ALL) {
           const uniqueOperators = new Map();
-          this.operators.forEach(op => {
+          this.operators.filter(op => this.categories.map(cat => cat.value).includes(op.category)).forEach(op => {
             uniqueOperators.has(op.value) || uniqueOperators.set(op.value, op);
           }), filteredOperators = Array.from(uniqueOperators.values());
         } else filteredOperators = this.operators.filter(op => op.category === this.currentCategory);
@@ -73060,8 +73072,8 @@
     }
 
     class FilterToolbar {
-      constructor(table, filterStateManager, styles) {
-        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, this.filterStateManager = filterStateManager, this.styles = styles, this.valueFilter = new ValueFilter(this.table, this.filterStateManager, this.styles), this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles), this.filterMenuWidth = 300, this.filterStateManager.subscribe(state => {
+      constructor(table, filterStateManager, styles, conditionCategories) {
+        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, this.filterStateManager = filterStateManager, this.styles = styles, this.valueFilter = new ValueFilter(this.table, this.filterStateManager, this.styles), this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles, conditionCategories), this.filterMenuWidth = 300, this.filterStateManager.subscribe(state => {
           this.isVisible && null !== this.selectedField && this.updateClearFilterButtonState(this.selectedField);
         });
       }
@@ -73121,7 +73133,7 @@
         cell.right < this.filterMenuWidth ? (left = cell.left + canvasBounds.left, top = cell.bottom + canvasBounds.top) : (left = cell.right + canvasBounds.left - this.filterMenuWidth, top = cell.bottom + canvasBounds.top), this.filterMenu.style.display = this.isVisible ? "block" : "none", this.filterMenu.style.left = `${left}px`, this.filterMenu.style.top = `${top}px`;
       }
       show(col, row, filterModes) {
-        this.filterModes = filterModes, this.filterModes.includes("byValue") ? this.filterModes.includes("byCondition") || (this.filterTabByCondition.style.display = "none", this.onTabSwitch("byValue")) : (this.filterTabByValue.style.display = "none", this.onTabSwitch("byCondition")), this.adjustMenuPosition(col, row), this.filterMenu.style.display = "block";
+        this.valueFilter.clearSearchInputValue(), this.filterModes = filterModes, this.filterModes.includes("byValue") ? this.filterModes.includes("byCondition") || (this.filterTabByCondition.style.display = "none", this.onTabSwitch("byValue")) : (this.filterTabByValue.style.display = "none", this.onTabSwitch("byCondition")), this.adjustMenuPosition(col, row), this.filterMenu.style.display = "block";
         const field = this.table.internalProps.layoutMap.getHeaderField(col, row);
         this.updateSelectedField(field);
         const currentFilter = this.filterStateManager.getFilterState(field);
@@ -82602,7 +82614,7 @@
 
     class FilterPlugin {
       constructor(pluginOptions) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.id = "filter", this.name = "Filter", this.runTime = [TABLE_EVENT_TYPE.BEFORE_INIT, TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION, TABLE_EVENT_TYPE.ICON_CLICK, TABLE_EVENT_TYPE.SCROLL], this.id = null !== (_a = null == pluginOptions ? void 0 : pluginOptions.id) && void 0 !== _a ? _a : this.id, this.pluginOptions = pluginOptions, this.pluginOptions.filterIcon = null !== (_b = pluginOptions.filterIcon) && void 0 !== _b ? _b : {
           name: "filter-icon",
           type: "svg",
@@ -82619,22 +82631,31 @@
           positionType: IconPosition.right,
           cursor: "pointer",
           svg: '<svg t="1752821771292" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11926" width="200" height="200"><path d="M971.614323 53.05548L655.77935 412.054233C635.196622 435.434613 623.906096 465.509377 623.906096 496.583302v495.384307c0 28.975686-35.570152 43.063864-55.353551 21.781723l-159.865852-171.256294c-5.495389-5.895053-8.59279-13.688514-8.592789-21.781722V496.583302c0-31.073925-11.290526-61.148688-31.873254-84.429153L52.385677 53.05548C34.200936 32.472751 48.888611 0 76.365554 0h871.268892c27.476943 0 42.164618 32.472751 23.979877 53.05548z" fill="#416eff" p-id="11927"></path></svg>'
-        }, this.pluginOptions.filterModes && this.pluginOptions.filterModes.length || (this.pluginOptions.filterModes = ["byValue", "byCondition"]), this.pluginOptions.styles = lodashExports.merge({}, filterStyles, pluginOptions.styles);
+        }, this.pluginOptions.filterModes && this.pluginOptions.filterModes.length || (this.pluginOptions.filterModes = ["byValue", "byCondition"]), this.pluginOptions.styles = lodashExports.merge({}, filterStyles, pluginOptions.styles), this.pluginOptions.conditionCategories = null !== (_d = pluginOptions.conditionCategories) && void 0 !== _d ? _d : categories;
+      }
+      initFilterPlugin(eventArgs) {
+        this.filterEngine = new FilterEngine(), this.filterStateManager = new FilterStateManager(this.table, this.filterEngine), this.filterToolbar = new FilterToolbar(this.table, this.filterStateManager, this.pluginOptions.styles, this.pluginOptions.conditionCategories), this.columns = eventArgs.options.columns, this.filterToolbar.render(document.body), this.updateFilterIcons(this.columns), this.filterStateManager.subscribe((_, action) => {
+          (null == action ? void 0 : action.type) !== FilterActionType.ADD_FILTER && (this.updateFilterIcons(this.columns), this.table.updateColumns(this.columns, {
+            clearRowHeightCache: !1
+          }));
+        });
       }
       run(...args) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const eventArgs = args[0],
           runtime = args[1],
           table = args[2];
-        if (this.table = table, runtime === TABLE_EVENT_TYPE.BEFORE_INIT) this.filterEngine = new FilterEngine(), this.filterStateManager = new FilterStateManager(this.table, this.filterEngine), this.filterToolbar = new FilterToolbar(this.table, this.filterStateManager, this.pluginOptions.styles), this.columns = eventArgs.options.columns, this.filterToolbar.render(document.body), this.updateFilterIcons(this.columns), this.filterStateManager.subscribe(() => {
-          this.updateFilterIcons(this.columns), this.table.updateColumns(this.columns, {
-            clearRowHeightCache: !1
-          });
-        });else if (runtime === TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION) this.pluginOptions = Object.assign(Object.assign({}, this.pluginOptions), eventArgs.options.plugins.find(plugin => plugin.id === this.id).pluginOptions), this.columns = eventArgs.options.columns, this.handleOptionUpdate(eventArgs.options);else if (runtime === TABLE_EVENT_TYPE.ICON_CLICK && "filter-icon" === eventArgs.name || "filtering-icon" === eventArgs.name) {
-          if (3 === (null === (_a = eventArgs.event) || void 0 === _a ? void 0 : _a.which) || 2 === (null === (_b = eventArgs.event) || void 0 === _b ? void 0 : _b.button) || 2 == (2 & (null === (_c = eventArgs.event) || void 0 === _c ? void 0 : _c.buttons))) return;
+        if (this.table = table, runtime === TABLE_EVENT_TYPE.BEFORE_INIT) this.initFilterPlugin(eventArgs);else if (runtime === TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION) this.filterEngine && this.filterStateManager && this.filterToolbar || this.initFilterPlugin(eventArgs), this.pluginOptions = Object.assign(Object.assign({}, this.pluginOptions), null === (_b = null === (_a = eventArgs.options.plugins) || void 0 === _a ? void 0 : _a.find(plugin => plugin.id === this.id)) || void 0 === _b ? void 0 : _b.pluginOptions), this.columns = eventArgs.options.columns, this.handleOptionUpdate(eventArgs.options);else if (runtime === TABLE_EVENT_TYPE.ICON_CLICK && "filter-icon" === eventArgs.name || "filtering-icon" === eventArgs.name) {
+          if (3 === (null === (_c = eventArgs.event) || void 0 === _c ? void 0 : _c.which) || 2 === (null === (_d = eventArgs.event) || void 0 === _d ? void 0 : _d.button) || 2 == (2 & (null === (_e = eventArgs.event) || void 0 === _e ? void 0 : _e.buttons))) return;
           const col = eventArgs.col,
             row = eventArgs.row;
-          this.filterToolbar.isVisible ? this.filterToolbar.hide() : this.filterToolbar.show(col, row, this.pluginOptions.filterModes);
+          this.filterToolbar.isVisible ? (this.filterToolbar.hide(), this.table.fireListeners(TABLE_EVENT_TYPE.FILTER_MENU_HIDE, {
+            col: eventArgs.col,
+            row: eventArgs.row
+          })) : (this.filterToolbar.show(col, row, this.pluginOptions.filterModes), this.table.fireListeners(TABLE_EVENT_TYPE.FILTER_MENU_SHOW, {
+            col: eventArgs.col,
+            row: eventArgs.row
+          }));
         } else runtime === TABLE_EVENT_TYPE.SCROLL && "horizontal" === eventArgs.scrollDirection && this.filterToolbar.adjustMenuPosition();
       }
       update() {
@@ -82716,7 +82737,9 @@
         }));
       }
       release() {
-        this.table = null, this.filterEngine = null, this.filterStateManager = null, this.filterToolbar = null;
+        this.columns.forEach(column => {
+          column.headerIcon = void 0;
+        }), this.table = null, this.filterEngine = null, this.filterStateManager = null, this.filterToolbar = null;
       }
     }
 
@@ -90027,7 +90050,7 @@
         importStyle();
     }
 
-    const version = "1.22.4-alpha.4";
+    const version = "1.22.4-alpha.6";
     importStyles();
 
     exports.TYPES = index;