@visactor/vtable-plugins 1.22.4-alpha.1 → 1.22.4-alpha.3

package/dist/vtable-plugins.js

@@ -10075,6 +10075,7 @@ ${recordsStr}
         engine;
         listeners = [];
         table;
+        filterMenuStates = new Map();
         constructor(table, engine) {
             this.state = {
                 filters: new Map()
@@ -10160,6 +10161,55 @@ ${recordsStr}
             ];
             return shouldApplyActions.includes(action.type) || action.payload.enable;
         }
+        initializeFilterMenuState(fieldId, candidateValues, displayToRawMap) {
+            this.filterMenuStates.set(fieldId, {
+                stableCandidateValues: candidateValues,
+                currentSearchKeyword: '',
+                displayToRawMap: displayToRawMap
+            });
+        }
+        getStableCandidateValues(fieldId) {
+            return this.filterMenuStates.get(fieldId)?.stableCandidateValues || [];
+        }
+        updateSearchKeyword(fieldId, keyword) {
+            const menuState = this.filterMenuStates.get(fieldId);
+            if (!menuState) {
+                return;
+            }
+            menuState.currentSearchKeyword = keyword;
+        }
+        getVisibleSelectedValues(fieldId) {
+            const menuState = this.filterMenuStates.get(fieldId);
+            const filter = this.getFilterState(fieldId);
+            if (!menuState || !filter?.values) {
+                return new Set();
+            }
+            const allSelectedValues = new Set(filter.values);
+            const keyword = menuState.currentSearchKeyword;
+            const filterKeywords = keyword
+                .toUpperCase()
+                .split(' ')
+                .filter(s => s);
+            if (filterKeywords.length === 0) {
+                return allSelectedValues;
+            }
+            const visibleSelected = new Set();
+            for (const candidate of menuState.stableCandidateValues) {
+                const displayValue = candidate.value;
+                const txtValue = String(displayValue).toUpperCase();
+                const match = filterKeywords.some(keyword => txtValue.includes(keyword));
+                if (match) {
+                    const rawValue = menuState.displayToRawMap ? menuState.displayToRawMap.get(displayValue) : displayValue;
+                    if (allSelectedValues.has(rawValue)) {
+                        visibleSelected.add(rawValue);
+                    }
+                }
+            }
+            return visibleSelected;
+        }
+        getCurrentSearchKeyword(fieldId) {
+            return this.filterMenuStates.get(fieldId)?.currentSearchKeyword || '';
+        }
     }
 
     const filterStyles = {
@@ -10339,9 +10389,9 @@ ${recordsStr}
             this.collectUniqueColumnValues(fieldId);
         }
         collectUniqueColumnValues(fieldId) {
-            const isEnable = this.filterStateManager.getFilterState(fieldId)?.enable;
-            const displayValueMap = new Map();
-            const rawToDisplayMap = new Map();
+            if (this.uniqueKeys.has(fieldId)) {
+                return;
+            }
             const displayToRawMap = new Map();
             let targetCol = -1;
             for (let col = 0; col < this.table.colCount; col++) {
@@ -10358,82 +10408,106 @@ ${recordsStr}
                     break;
                 }
             }
-            if (isEnable) {
-                const records = this.table.internalProps.records;
-                const recordsLength = records.length;
-                for (let i = 0; i < recordsLength; i++) {
-                    let rawValue;
-                    let displayValue;
-                    if (targetCol !== -1) {
-                        const row = this.table.columnHeaderLevelCount + i;
-                        const currentRecord = records[i];
-                        rawValue = currentRecord[fieldId];
-                        const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
-                        if (bodyInfo &&
-                            'fieldFormat' in bodyInfo &&
-                            bodyInfo.fieldFormat &&
-                            typeof bodyInfo.fieldFormat === 'function') {
-                            displayValue = bodyInfo.fieldFormat({ [fieldId]: rawValue });
-                        }
-                        else {
-                            displayValue = rawValue;
-                        }
-                    }
-                    if (rawValue !== undefined && rawValue !== null) {
-                        displayValueMap.set(displayValue, (displayValueMap.get(displayValue) || 0) + 1);
-                        rawToDisplayMap.set(rawValue, displayValue);
-                        displayToRawMap.set(displayValue, rawValue);
-                    }
-                }
-            }
-            else {
-                const dataSource = this.table.internalProps.dataSource;
-                const currentLength = dataSource.length;
-                for (let i = 0; i < currentLength; i++) {
-                    let rawValue;
-                    let displayValue;
-                    if (targetCol !== -1) {
-                        const row = this.table.columnHeaderLevelCount + i;
-                        if (row < this.table.rowCount) {
-                            rawValue = this.table.getCellOriginValue(targetCol, row);
-                            displayValue = this.table.getCellValue(targetCol, row);
-                        }
+            const records = this.table.internalProps.records;
+            const recordsLength = records.length;
+            for (let i = 0; i < recordsLength; i++) {
+                let rawValue;
+                let displayValue;
+                if (targetCol !== -1) {
+                    const row = this.table.columnHeaderLevelCount + i;
+                    const currentRecord = records[i];
+                    rawValue = currentRecord[fieldId];
+                    const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
+                    if (bodyInfo &&
+                        'fieldFormat' in bodyInfo &&
+                        bodyInfo.fieldFormat &&
+                        typeof bodyInfo.fieldFormat === 'function') {
+                        displayValue = bodyInfo.fieldFormat({ [fieldId]: rawValue });
                     }
                     else {
-                        rawValue = this.table.getFieldData(String(fieldId), targetCol !== -1 ? targetCol : 0, this.table.columnHeaderLevelCount + i);
                         displayValue = rawValue;
                     }
-                    if (rawValue !== undefined && rawValue !== null) {
-                        displayValueMap.set(displayValue, (displayValueMap.get(displayValue) || 0) + 1);
-                        rawToDisplayMap.set(rawValue, displayValue);
-                        displayToRawMap.set(displayValue, rawValue);
-                    }
+                }
+                else {
+                    rawValue = records[i][fieldId];
+                    displayValue = rawValue;
+                }
+                if (rawValue !== undefined && rawValue !== null && !displayToRawMap.has(displayValue)) {
+                    displayToRawMap.set(displayValue, rawValue);
                 }
             }
             this.displayToRawValueMap.set(fieldId, displayToRawMap);
-            const uniqueValues = Array.from(displayValueMap.entries()).map(([displayValue, count]) => ({
+            const uniqueValues = Array.from(displayToRawMap.entries()).map(([displayValue, rawValue]) => ({
                 value: displayValue,
-                count,
-                rawValue: displayToRawMap.get(displayValue)
+                count: 0,
+                rawValue: rawValue
             }));
             this.uniqueKeys.set(fieldId, uniqueValues);
         }
+        updateCandidateCounts(fieldId) {
+            const uniqueValues = this.uniqueKeys.get(fieldId);
+            if (!uniqueValues) {
+                return;
+            }
+            const filter = this.filterStateManager.getFilterState(fieldId);
+            const isFiltered = filter?.enable;
+            const dataSource = isFiltered
+                ? this.table.internalProps.records
+                : this.table.internalProps.dataSource;
+            let targetCol = -1;
+            for (let col = 0; col < this.table.colCount; col++) {
+                for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) {
+                    if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
+                        const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
+                        if (bodyInfo && bodyInfo.field === fieldId) {
+                            targetCol = col;
+                            break;
+                        }
+                    }
+                }
+                if (targetCol !== -1) {
+                    break;
+                }
+            }
+            const dataLength = dataSource.length;
+            const countMap = new Map();
+            for (let i = 0; i < dataLength; i++) {
+                let displayValue;
+                if (targetCol !== -1) {
+                    const row = this.table.columnHeaderLevelCount + i;
+                    if (row < this.table.rowCount) {
+                        displayValue = this.table.getCellValue(targetCol, row);
+                    }
+                }
+                else {
+                    displayValue = this.table.getFieldData(String(fieldId), targetCol !== -1 ? targetCol : 0, this.table.columnHeaderLevelCount + i);
+                }
+                if (displayValue !== undefined && displayValue !== null) {
+                    countMap.set(displayValue, (countMap.get(displayValue) || 0) + 1);
+                }
+            }
+            uniqueValues.forEach(item => {
+                item.count = countMap.get(item.value) || 0;
+            });
+        }
         onValueSelect(fieldId, displayValue, selected) {
             const displayToRawMap = this.displayToRawValueMap.get(fieldId);
             const rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
             const filter = this.filterStateManager.getFilterState(fieldId);
+            let updatedValues;
             if (!filter) {
+                updatedValues = selected ? [rawValue] : [];
                 this.filterStateManager.dispatch({
                     type: exports.FilterActionType.ADD_FILTER,
                     payload: {
                         field: fieldId,
                         type: 'byValue',
-                        values: [rawValue]
+                        values: updatedValues
                     }
                 });
             }
             else {
-                const updatedValues = selected
+                updatedValues = selected
                     ? [...(filter.values || []), rawValue]
                     : (filter.values || []).filter(v => v !== rawValue);
                 this.filterStateManager.dispatch({
@@ -10445,22 +10519,45 @@ ${recordsStr}
                 });
             }
         }
+        isValueVisible(displayValue, keyword) {
+            if (!keyword) {
+                return true;
+            }
+            const filterKeywords = keyword
+                .toUpperCase()
+                .split(' ')
+                .filter(s => s);
+            const txtValue = String(displayValue).toUpperCase();
+            return filterKeywords.some(keyword => txtValue.includes(keyword));
+        }
         toggleSelectAll(fieldId, selected) {
+            const currentKeyword = this.filterStateManager.getCurrentSearchKeyword(fieldId);
+            const stableCandidates = this.filterStateManager.getStableCandidateValues(fieldId);
+            const displayToRawMap = this.displayToRawValueMap.get(fieldId);
+            const visibleRawValues = stableCandidates
+                .filter(candidate => this.isValueVisible(candidate.value, currentKeyword))
+                .map(candidate => (displayToRawMap ? displayToRawMap.get(candidate.value) : candidate.value));
             const filter = this.filterStateManager.getFilterState(fieldId);
-            const rawValuesToUpdate = selected ? this.uniqueKeys.get(fieldId)?.map(item => item.rawValue) || [] : [];
+            const currentValues = new Set(filter?.values || []);
+            let updatedValues;
+            if (selected) {
+                updatedValues = Array.from(new Set([...currentValues, ...visibleRawValues]));
+            }
+            else {
+                updatedValues = Array.from(currentValues).filter(value => !visibleRawValues.includes(value));
+            }
             if (!filter) {
                 this.filterStateManager.dispatch({
                     type: exports.FilterActionType.ADD_FILTER,
                     payload: {
                         field: fieldId,
                         type: 'byValue',
-                        values: rawValuesToUpdate,
+                        values: updatedValues,
                         enable: true
                     }
                 });
             }
             else {
-                const updatedValues = selected ? rawValuesToUpdate : [];
                 this.filterStateManager.dispatch({
                     type: exports.FilterActionType.UPDATE_FILTER,
                     payload: {
@@ -10471,79 +10568,88 @@ ${recordsStr}
             }
         }
         onSearch(fieldId, value) {
+            this.filterStateManager.updateSearchKeyword(fieldId, value);
+            const items = this.valueFilterOptionList.get(fieldId);
             const filterKeywords = value
                 .toUpperCase()
                 .split(' ')
                 .filter(s => s);
-            const items = this.valueFilterOptionList.get(fieldId);
             for (const item of items) {
                 const txtValue = item.id.toUpperCase() || '';
                 const match = filterKeywords.some(keyword => txtValue.includes(keyword));
-                item.itemContainer.style.display = filterKeywords.length === 0 || match ? 'flex' : 'none';
+                const isVisible = filterKeywords.length === 0 || match;
+                item.itemContainer.style.display = isVisible ? 'flex' : 'none';
             }
         }
         initFilterStateFromTableData(fieldId) {
             const filter = this.filterStateManager.getFilterState(fieldId);
-            const selectedRawValues = new Set();
-            const displayToRawMap = this.displayToRawValueMap.get(fieldId);
-            let targetCol = -1;
-            for (let col = 0; col < this.table.colCount; col++) {
-                for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) {
-                    if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
-                        const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
-                        if (bodyInfo && bodyInfo.field === fieldId) {
-                            targetCol = col;
-                            break;
+            const isEnable = filter?.enable;
+            if (isEnable) {
+                const selectedRawValues = new Set();
+                const displayToRawMap = this.displayToRawValueMap.get(fieldId);
+                let targetCol = -1;
+                for (let col = 0; col < this.table.colCount; col++) {
+                    for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) {
+                        if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
+                            const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
+                            if (bodyInfo && bodyInfo.field === fieldId) {
+                                targetCol = col;
+                                break;
+                            }
                         }
                     }
+                    if (targetCol !== -1) {
+                        break;
+                    }
                 }
-                if (targetCol !== -1) {
-                    break;
-                }
-            }
-            const dataSource = this.table.internalProps.dataSource;
-            const currentLength = dataSource.length;
-            for (let i = 0; i < currentLength; i++) {
-                let displayValue;
-                let rawValue;
-                if (targetCol !== -1) {
-                    const row = this.table.columnHeaderLevelCount + i;
-                    if (row < this.table.rowCount) {
-                        displayValue = this.table.getCellValue(targetCol, row);
+                const dataSource = this.table.internalProps.dataSource;
+                const currentLength = dataSource.length;
+                for (let i = 0; i < currentLength; i++) {
+                    let displayValue;
+                    let rawValue;
+                    if (targetCol !== -1) {
+                        const row = this.table.columnHeaderLevelCount + i;
+                        if (row < this.table.rowCount) {
+                            displayValue = this.table.getCellValue(targetCol, row);
+                            rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
+                        }
+                    }
+                    else {
+                        displayValue = this.table.getFieldData(String(fieldId), targetCol !== -1 ? targetCol : 0, this.table.columnHeaderLevelCount + i);
                         rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
                     }
+                    if (rawValue !== undefined && rawValue !== null) {
+                        selectedRawValues.add(rawValue);
+                    }
                 }
-                else {
-                    displayValue = this.table.getFieldData(String(fieldId), targetCol !== -1 ? targetCol : 0, this.table.columnHeaderLevelCount + i);
-                    rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
-                }
-                if (rawValue !== undefined && rawValue !== null) {
-                    selectedRawValues.add(rawValue);
+                const hasChanged = !arrayEqual(filter.values, Array.from(selectedRawValues));
+                if (hasChanged) {
+                    this.filterStateManager.dispatch({
+                        type: exports.FilterActionType.UPDATE_FILTER,
+                        payload: {
+                            field: fieldId,
+                            values: Array.from(selectedRawValues)
+                        }
+                    });
                 }
             }
-            const hasChanged = !filter || !arrayEqual(filter.values, Array.from(selectedRawValues));
-            if (!hasChanged) {
-                return;
-            }
-            if (filter) {
-                this.filterStateManager.dispatch({
-                    type: exports.FilterActionType.UPDATE_FILTER,
-                    payload: {
-                        field: fieldId,
-                        type: 'byValue',
-                        values: Array.from(selectedRawValues)
-                    }
-                });
-            }
             else {
-                this.filterStateManager.dispatch({
-                    type: exports.FilterActionType.ADD_FILTER,
-                    payload: {
-                        field: fieldId,
-                        type: 'byValue',
-                        values: Array.from(selectedRawValues)
-                    }
-                });
+                if (!filter) {
+                    const availableRawValues = this.uniqueKeys
+                        .get(fieldId)
+                        ?.filter(item => item.count > 0)
+                        ?.map(item => item.rawValue)
+                        .filter(v => v !== undefined && v !== null) || [];
+                    this.filterStateManager.dispatch({
+                        type: exports.FilterActionType.ADD_FILTER,
+                        payload: {
+                            field: fieldId,
+                            type: 'byValue',
+                            values: availableRawValues,
+                            enable: false
+                        }
+                    });
+                }
             }
         }
         syncCheckboxesWithFilterState(filter) {
@@ -10558,8 +10664,7 @@ ${recordsStr}
                 const rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
                 optionDom.checkbox.checked = selectedRawValues.some(v => v === rawValue);
                 const count = this.uniqueKeys.get(filter.field)?.find(key => String(key.value) === optionDom.id)?.count || 0;
-                optionDom.countSpan.textContent = String(count);
-                optionDom.itemContainer.style.display = count === 0 ? 'none' : 'flex';
+                optionDom.checkbox.disabled = count === 0;
             });
         }
         syncSelectAllWithFilterState(filter) {
@@ -10587,14 +10692,14 @@ ${recordsStr}
             }
         }
         applyFilter(fieldId = this.selectedField) {
-            const selectedKeys = this.filterStateManager.getFilterState(fieldId)?.values || [];
-            if (selectedKeys.length > 0 && selectedKeys.length < this.uniqueKeys.get(fieldId)?.length) {
+            const visibleSelectedKeys = Array.from(this.filterStateManager.getVisibleSelectedValues(fieldId));
+            if (visibleSelectedKeys.length > 0 && visibleSelectedKeys.length < this.uniqueKeys.get(fieldId)?.length) {
                 this.filterStateManager.dispatch({
                     type: exports.FilterActionType.APPLY_FILTERS,
                     payload: {
                         field: fieldId,
                         type: 'byValue',
-                        values: selectedKeys,
+                        values: visibleSelectedKeys,
                         enable: true
                     }
                 });
@@ -10655,12 +10760,14 @@ ${recordsStr}
             this.uniqueKeys.get(field)?.forEach(({ value, count, rawValue }) => {
                 const itemDiv = document.createElement('div');
                 applyStyles(itemDiv, this.styles.optionItem);
+                itemDiv.style.display = 'flex';
                 const label = document.createElement('label');
                 applyStyles(label, this.styles.optionLabel);
                 const checkbox = document.createElement('input');
                 checkbox.type = 'checkbox';
                 checkbox.value = String(value);
                 checkbox.checked = selectedRawValueSet.has(rawValue);
+                checkbox.disabled = count === 0;
                 applyStyles(checkbox, this.styles.checkbox);
                 const countSpan = document.createElement('span');
                 countSpan.textContent = String(count);
@@ -10705,7 +10812,17 @@ ${recordsStr}
             });
         }
         show() {
+            this.collectUniqueColumnValues(this.selectedField);
+            this.updateCandidateCounts(this.selectedField);
             this.initFilterStateFromTableData(this.selectedField);
+            const uniqueValues = this.uniqueKeys.get(this.selectedField);
+            const displayToRawMap = this.displayToRawValueMap.get(this.selectedField);
+            if (uniqueValues && displayToRawMap) {
+                this.filterStateManager.initializeFilterMenuState(this.selectedField, uniqueValues, displayToRawMap);
+            }
+            if (this.filterByValueSearchInput) {
+                this.filterByValueSearchInput.value = '';
+            }
             this.renderFilterOptions(this.selectedField);
             this.filterByValuePanel.style.display = 'block';
         }
@@ -11035,6 +11152,8 @@ ${recordsStr}
         filterModes = [];
         filterMenu;
         filterMenuWidth;
+        currentCol;
+        currentRow;
         filterTabByValue;
         filterTabByCondition;
         clearFilterOptionLink;
@@ -11047,6 +11166,11 @@ ${recordsStr}
             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 => {
+                if (this.isVisible && this.selectedField !== null) {
+                    this.updateClearFilterButtonState(this.selectedField);
+                }
+            });
         }
         onTabSwitch(tab) {
             this.activeTab = tab;
@@ -11089,6 +11213,14 @@ ${recordsStr}
             }
             this.hide();
         }
+        updateClearFilterButtonState(field) {
+            const currentFilter = this.filterStateManager.getFilterState(field);
+            const hasActiveFilter = currentFilter && currentFilter.enable;
+            this.clearFilterOptionLink.style.display = 'inline';
+            this.clearFilterOptionLink.style.opacity = hasActiveFilter ? '1' : '0.5';
+            this.clearFilterOptionLink.style.pointerEvents = hasActiveFilter ? 'auto' : 'none';
+            this.clearFilterOptionLink.style.cursor = hasActiveFilter ? 'pointer' : 'not-allowed';
+        }
         render(container) {
             this.filterMenu = document.createElement('div');
             applyStyles(this.filterMenu, this.styles.filterMenu);
@@ -11148,20 +11280,24 @@ ${recordsStr}
                 e.stopPropagation();
             });
         }
-        show(col, row, filterModes) {
-            this.filterModes = filterModes;
-            if (!this.filterModes.includes('byValue')) {
-                this.filterTabByValue.style.display = 'none';
-                setTimeout(() => this.onTabSwitch('byCondition'), 0);
+        adjustMenuPosition(col, row, providedLeft, providedTop) {
+            if (typeof providedLeft === 'number' && typeof providedTop === 'number') {
+                this.filterMenu.style.display = this.isVisible ? 'block' : 'none';
+                this.filterMenu.style.left = `${providedLeft}px`;
+                this.filterMenu.style.top = `${providedTop}px`;
+                return;
             }
-            else if (!this.filterModes.includes('byCondition')) {
-                this.filterTabByCondition.style.display = 'none';
-                setTimeout(() => this.onTabSwitch('byValue'), 0);
+            const effectiveCol = typeof col === 'number' ? col : this.currentCol;
+            const effectiveRow = typeof row === 'number' ? row : this.currentRow;
+            if (typeof effectiveCol !== 'number' || typeof effectiveRow !== 'number') {
+                return;
             }
+            this.currentCol = effectiveCol;
+            this.currentRow = effectiveRow;
             let left = 0;
             let top = 0;
             const canvasBounds = this.table.canvas.getBoundingClientRect();
-            const cell = this.table.getMergeCellRect(col, row);
+            const cell = this.table.getCellRelativeRect(effectiveCol, effectiveRow);
             if (cell.right < this.filterMenuWidth) {
                 left = cell.left + canvasBounds.left;
                 top = cell.bottom + canvasBounds.top;
@@ -11170,9 +11306,22 @@ ${recordsStr}
                 left = cell.right + canvasBounds.left - this.filterMenuWidth;
                 top = cell.bottom + canvasBounds.top;
             }
-            this.filterMenu.style.display = 'block';
+            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;
+            if (!this.filterModes.includes('byValue')) {
+                this.filterTabByValue.style.display = 'none';
+                this.onTabSwitch('byCondition');
+            }
+            else if (!this.filterModes.includes('byCondition')) {
+                this.filterTabByCondition.style.display = 'none';
+                this.onTabSwitch('byValue');
+            }
+            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);
@@ -11182,6 +11331,7 @@ ${recordsStr}
             else {
                 this.onTabSwitch('byValue');
             }
+            this.updateClearFilterButtonState(field);
             setTimeout(() => {
                 this.isVisible = true;
             }, 0);
@@ -20661,9 +20811,15 @@ ${recordsStr}
     class FilterPlugin {
         id = `filter`;
         name = 'Filter';
-        runTime = [VTable.TABLE_EVENT_TYPE.BEFORE_INIT, VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION, VTable.TABLE_EVENT_TYPE.ICON_CLICK];
+        runTime = [
+            VTable.TABLE_EVENT_TYPE.BEFORE_INIT,
+            VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION,
+            VTable.TABLE_EVENT_TYPE.ICON_CLICK,
+            VTable.TABLE_EVENT_TYPE.SCROLL
+        ];
         pluginOptions;
         table;
+        columns;
         filterEngine;
         filterStateManager;
         filterToolbar;
@@ -20702,11 +20858,12 @@ ${recordsStr}
                 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(eventArgs.options);
+                this.updateFilterIcons(this.columns);
                 this.filterStateManager.subscribe(() => {
-                    this.updateFilterIcons(eventArgs.options);
-                    this.table.updateColumns(eventArgs.options.columns, {
+                    this.updateFilterIcons(this.columns);
+                    this.table.updateColumns(this.columns, {
                         clearRowHeightCache: false
                     });
                 });
@@ -20716,6 +20873,7 @@ ${recordsStr}
                     ...this.pluginOptions,
                     ...eventArgs.options.plugins.find(plugin => plugin.id === this.id).pluginOptions
                 };
+                this.columns = eventArgs.options.columns;
                 this.handleOptionUpdate(eventArgs.options);
             }
             else if ((runtime === VTable.TABLE_EVENT_TYPE.ICON_CLICK && eventArgs.name === 'filter-icon') ||
@@ -20733,6 +20891,11 @@ ${recordsStr}
                     this.filterToolbar.show(col, row, this.pluginOptions.filterModes);
                 }
             }
+            else if (runtime === VTable.TABLE_EVENT_TYPE.SCROLL) {
+                if (eventArgs.scrollDirection === 'horizontal') {
+                    this.filterToolbar.adjustMenuPosition();
+                }
+            }
         }
         update() {
             if (this.filterStateManager) {
@@ -20744,7 +20907,7 @@ ${recordsStr}
             if (this.filterStateManager && currentActiveFields.length > 0) {
                 this.validateFilterStatesAfterUpdate(options, currentActiveFields);
             }
-            this.updateFilterIcons(options);
+            this.updateFilterIcons(options.columns);
         }
         reapplyActiveFilters() {
             this.filterStateManager.reapplyCurrentFilters();
@@ -20765,13 +20928,13 @@ ${recordsStr}
                 });
             });
         }
-        updateFilterIcons(options) {
+        updateFilterIcons(columns = []) {
             const filterIcon = this.pluginOptions.filterIcon;
             const filteringIcon = this.pluginOptions.filteringIcon;
             const isIconEqual = (a, b) => a === b || (a && b && typeof a === 'object' && typeof b === 'object' && a.name === b.name);
             const toIconList = icons => (icons ? (Array.isArray(icons) ? icons : [icons]) : []);
             const compactIcons = list => (list.length === 0 ? undefined : list.length === 1 ? list[0] : list);
-            options.columns.forEach(column => {
+            columns.forEach(column => {
                 const shouldShow = this.shouldEnableFilterForColumn(column.field, column);
                 const isFiltering = !!this.filterStateManager.getFilterState(column.field)?.enable;
                 let icons = toIconList(column.headerIcon);
@@ -20832,14 +20995,16 @@ ${recordsStr}
             };
         }
         setFilterState(filterState) {
-            if (!this.filterStateManager || !filterState || !filterState.filters) {
+            if (!this.filterStateManager) {
                 return;
             }
             this.filterStateManager.dispatch({
                 type: exports.FilterActionType.CLEAR_ALL_FILTERS,
                 payload: {}
             });
-            this.table.columns;
+            if (!filterState || !filterState.filters) {
+                return;
+            }
             Object.entries(filterState.filters).forEach(([, config]) => {
                 if (config.enable) {
                     this.filterStateManager.dispatch({