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

package/cjs/filter/value-filter.js

@@ -8,131 +8,92 @@ const vutils_1 = require("@visactor/vutils"), types_1 = require("./types"), styl
 
 class ValueFilter {
     constructor(table, filterStateManager, pluginOptions) {
-        this.uniqueKeys = new Map, this.displayToRawValueMap = new Map, this.valueFilterOptionList = new Map, 
-        this.table = table, this.filterStateManager = filterStateManager, this.pluginOptions = pluginOptions, 
-        this.styles = pluginOptions.styles, this.filterStateManager.subscribe((state => {
-            const filterState = state.filters.get(this.selectedField);
-            filterState && "byValue" === filterState.type && this.updateUI(filterState);
-        }));
-    }
-    updateUI(filterState) {
-        this.syncCheckboxesWithFilterState(filterState), this.syncSelectAllWithFilterState(filterState);
+        this.selectedKeys = new Map, this.candidateKeys = new Map, this.formatFnCache = new Map, 
+        this.toUnformattedCache = new Map, this.valueFilterOptionList = new Map, this.table = table, 
+        this.filterStateManager = filterStateManager, this.pluginOptions = pluginOptions, 
+        this.styles = pluginOptions.styles || {};
     }
     setSelectedField(fieldId) {
-        this.selectedField = fieldId, this.collectUniqueColumnValues(fieldId);
+        this.selectedField = fieldId;
     }
-    collectUniqueColumnValues(fieldId, forceCollect = !1) {
-        var _a, _b, _c;
-        if (this.uniqueKeys.has(fieldId) && !forceCollect) return;
-        const displayToRawMap = new Map;
-        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 (-1 !== targetCol) break;
-        }
-        const records = this.table.internalProps.records, recordsLength = records.length;
-        for (let i = 0; i < recordsLength; i++) {
-            let rawValue, displayValue;
-            if (-1 !== targetCol) {
-                const row = this.table.columnHeaderLevelCount + i, currentRecord = records[i];
-                if (null == currentRecord) continue;
-                rawValue = currentRecord[fieldId];
-                const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
-                displayValue = bodyInfo && "fieldFormat" in bodyInfo && bodyInfo.fieldFormat && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat({
-                    [fieldId]: rawValue
-                }) : rawValue;
-            } else rawValue = records[i][fieldId], displayValue = rawValue;
-            null == rawValue || displayToRawMap.has(displayValue) || (displayToRawMap.set(displayValue, rawValue), 
-            this.displayToRawValueMap.has(fieldId) && !(null === (_a = this.displayToRawValueMap.get(fieldId)) || void 0 === _a ? void 0 : _a.has(displayValue)) && (null === (_c = null === (_b = this.filterStateManager.getFilterState(fieldId)) || void 0 === _b ? void 0 : _b.values) || void 0 === _c ? void 0 : _c.length) > 0 && this.filterStateManager.getFilterState(fieldId).values.push(rawValue));
-        }
-        this.displayToRawValueMap.set(fieldId, displayToRawMap);
-        const uniqueValues = Array.from(displayToRawMap.entries()).map((([displayValue, rawValue]) => ({
-            value: displayValue,
-            count: 0,
-            rawValue: rawValue
-        })));
-        this.uniqueKeys.set(fieldId, uniqueValues);
+    getFormatFnCache(fieldId) {
+        let formatFn = this.formatFnCache.get(fieldId);
+        if (null != formatFn) return formatFn;
+        const headerAddress = this.table.internalProps.layoutMap.getHeaderCellAddressByField(String(fieldId)), bodyInfo = this.table.internalProps.layoutMap.getBody(null == headerAddress ? void 0 : headerAddress.col, null == headerAddress ? void 0 : headerAddress.row);
+        return formatFn = bodyInfo && "fieldFormat" in bodyInfo && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat : bodyInfo && "format" in bodyInfo && "function" == typeof bodyInfo.format ? bodyInfo.format : record => record[fieldId], 
+        this.formatFnCache.set(fieldId, formatFn), formatFn;
     }
-    updateCandidateCounts(fieldId) {
-        const uniqueValues = this.uniqueKeys.get(fieldId);
-        if (!uniqueValues) return;
-        const filter = this.filterStateManager.getFilterState(fieldId), dataSource = (null == filter ? void 0 : filter.enable) ? 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;
+    collectCandidateKeysForUnfilteredColumn(fieldId) {
+        var _a, _b;
+        const syncCheckboxCheckedState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncCheckboxCheckedState) || void 0 === _b || _b, countMap = new Map;
+        let records = [];
+        records = syncCheckboxCheckedState ? this.table.internalProps.dataSource.records : this.table.internalProps.records;
+        const formatFn = this.getFormatFnCache(fieldId), toUnformatted = new Map;
+        records.forEach((record => {
+            if ((0, vutils_1.isValid)(record)) {
+                const originalValue = record[fieldId], formattedValue = formatFn(record);
+                if (null != formattedValue) {
+                    countMap.set(formattedValue, (countMap.get(formattedValue) || 0) + 1);
+                    const unformattedSet = toUnformatted.get(formattedValue);
+                    null != unformattedSet ? unformattedSet.add(originalValue) : toUnformatted.set(formattedValue, new Set([ originalValue ]));
                 }
             }
-            if (-1 !== targetCol) break;
-        }
-        const dataLength = dataSource.length, countMap = new Map;
-        for (let i = 0; i < dataLength; i++) {
-            let displayValue;
-            if (-1 !== targetCol) {
-                const row = this.table.columnHeaderLevelCount + i;
-                row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row));
-            } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i);
-            null != displayValue && countMap.set(displayValue, (countMap.get(displayValue) || 0) + 1);
-        }
-        uniqueValues.forEach((item => {
-            item.count = countMap.get(item.value) || 0;
+        })), this.candidateKeys.set(fieldId, countMap), this.toUnformattedCache.set(fieldId, toUnformatted);
+    }
+    updateBeforeFilter() {
+        const currentRecords = this.table.internalProps.dataSource.records, filteredFields = this.filterStateManager.getActiveFilterFields();
+        currentRecords.forEach((record => {
+            filteredFields.forEach((candidateField => {
+                var _a, _b;
+                const formatFn = this.getFormatFnCache(candidateField);
+                if ((0, vutils_1.isValid)(record)) {
+                    const originalValue = record[candidateField], formattedValue = formatFn(record);
+                    !(this.toUnformattedCache.get(candidateField) || new Map).has(formattedValue) && (null === (_b = null === (_a = this.filterStateManager.getFilterState(candidateField)) || void 0 === _a ? void 0 : _a.values) || void 0 === _b ? void 0 : _b.length) > 0 && (this.filterStateManager.getFilterState(candidateField).values.push(originalValue), 
+                    this.selectedKeys.get(candidateField).add(originalValue));
+                }
+            }));
         }));
     }
-    onValueSelect(fieldId, displayValue, selected) {
-        const displayToRawMap = this.displayToRawValueMap.get(fieldId), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue, filter = this.filterStateManager.getFilterState(fieldId);
-        let updatedValues;
-        filter ? (updatedValues = selected ? [ ...filter.values || [], rawValue ] : (filter.values || []).filter((v => v !== rawValue)), 
-        this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.UPDATE_FILTER,
-            payload: {
-                field: fieldId,
-                values: updatedValues
-            }
-        })) : (updatedValues = selected ? [ rawValue ] : [], this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.ADD_FILTER,
-            payload: {
-                field: fieldId,
-                type: "byValue",
-                values: updatedValues
-            }
+    updateAfterFilter() {
+        const currentRecords = this.table.internalProps.dataSource.records, filteredFields = this.filterStateManager.getActiveFilterFields();
+        currentRecords.forEach((record => {
+            filteredFields.forEach((candidateField => {
+                var _a;
+                if ((0, vutils_1.isValid)(record)) {
+                    const originalValue = record[candidateField];
+                    "byCondition" === (null === (_a = this.filterStateManager.getFilterState(candidateField)) || void 0 === _a ? void 0 : _a.type) && (this.selectedKeys.get(candidateField) || this.selectedKeys.set(candidateField, new Set), 
+                    this.selectedKeys.get(candidateField).add(originalValue));
+                }
+            }));
         }));
     }
-    isValueVisible(displayValue, keyword) {
-        if (!keyword) return !0;
-        const filterKeywords = keyword.toUpperCase().split(" ").filter((s => s)), txtValue = String(displayValue).toUpperCase();
-        return filterKeywords.some((keyword => txtValue.includes(keyword)));
+    collectCandidateKeysForFilteredColumn(candidateField) {
+        var _a, _b;
+        const syncCheckboxCheckedState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncCheckboxCheckedState) || void 0 === _b || _b, filteredFields = this.filterStateManager.getActiveFilterFields().filter((field => field !== candidateField)), toUnformatted = new Map, formatFn = this.getFormatFnCache(candidateField), countMap = new Map;
+        let records = [];
+        if (syncCheckboxCheckedState) {
+            records = this.table.internalProps.records.filter((record => filteredFields.every((field => this.selectedKeys.get(field).has(record[field])))));
+        } else records = this.table.internalProps.records;
+        records.forEach((record => {
+            if ((0, vutils_1.isValid)(record)) {
+                const originalValue = record[candidateField], formattedValue = formatFn(record);
+                if (countMap.set(formattedValue, (countMap.get(formattedValue) || 0) + 1), null != formattedValue) {
+                    const unformattedSet = toUnformatted.get(formattedValue);
+                    null != unformattedSet ? unformattedSet.add(originalValue) : toUnformatted.set(formattedValue, new Set([ originalValue ]));
+                }
+            }
+        })), this.candidateKeys.set(candidateField, countMap), this.toUnformattedCache.set(candidateField, toUnformatted);
     }
     toggleSelectAll(fieldId, selected) {
-        const currentKeyword = this.filterStateManager.getCurrentSearchKeyword(fieldId), stableCandidates = this.filterStateManager.getStableCandidateValues(fieldId), displayToRawMap = this.displayToRawValueMap.get(fieldId), visibleRawValues = stableCandidates.filter((candidate => this.isValueVisible(candidate.value, currentKeyword))).map((candidate => displayToRawMap ? displayToRawMap.get(candidate.value) : candidate.value)), filter = this.filterStateManager.getFilterState(fieldId), currentValues = new Set((null == filter ? void 0 : filter.values) || []);
-        let updatedValues;
-        updatedValues = selected ? Array.from(new Set([ ...currentValues, ...visibleRawValues ])) : Array.from(currentValues).filter((value => !visibleRawValues.includes(value))), 
-        filter ? this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.UPDATE_FILTER,
-            payload: {
-                field: fieldId,
-                values: updatedValues
-            }
-        }) : this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.ADD_FILTER,
-            payload: {
-                field: fieldId,
-                type: "byValue",
-                values: updatedValues,
-                enable: !0
-            }
-        });
+        this.valueFilterOptionList.get(fieldId).forEach((option => {
+            option.checkbox.checked = selected;
+        }));
+    }
+    syncSelectAllCheckbox(fieldId) {
+        const options = this.valueFilterOptionList.get(fieldId) || [], allChecked = options.every((o => o.checkbox.checked)), noneChecked = options.every((o => !o.checkbox.checked));
+        this.selectAllCheckbox.checked = allChecked, this.selectAllCheckbox.indeterminate = !allChecked && !noneChecked;
     }
     onSearch(fieldId, value) {
-        this.filterStateManager.updateSearchKeyword(fieldId, value);
         const items = this.valueFilterOptionList.get(fieldId), filterKeywords = value.toUpperCase().split(" ").filter((s => s));
         for (const item of items) {
             const txtValue = item.id.toUpperCase() || "", match = filterKeywords.some((keyword => txtValue.includes(keyword))), isVisible = 0 === filterKeywords.length || match;
@@ -140,78 +101,35 @@ class ValueFilter {
         }
     }
     initFilterStateFromTableData(fieldId) {
-        var _a, _b, _c, _d;
-        const filter = this.filterStateManager.getFilterState(fieldId), isEnable = null == filter ? void 0 : filter.enable, syncCheckboxCheckedState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncCheckboxCheckedState) || void 0 === _b || _b;
-        if (isEnable) {
-            const selectedRawValues = new Set, 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 (-1 !== targetCol) break;
-            }
-            const currentLength = this.table.internalProps.dataSource.length;
-            for (let i = 0; i < currentLength; i++) {
-                let displayValue, rawValue;
-                if (-1 !== targetCol) {
-                    const row = this.table.columnHeaderLevelCount + i;
-                    row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row), 
-                    rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue);
-                } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i), 
-                rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
-                null != rawValue && selectedRawValues.add(rawValue);
+        if (this.filterStateManager.getActiveFilterFields()) return;
+        const selectedValues = new Set, originalValues = new Set;
+        this.table.internalProps.dataSource.records.forEach((record => {
+            (0, vutils_1.isValid)(record) && selectedValues.add(record[fieldId]);
+        }));
+        this.table.internalProps.records.forEach((record => {
+            (0, vutils_1.isValid)(record) && originalValues.add(record[fieldId]);
+        }));
+        !(0, vutils_1.arrayEqual)(Array.from(originalValues), Array.from(selectedValues)) && (this.selectedKeys.set(fieldId, selectedValues), 
+        this.filterStateManager.dispatch({
+            type: types_1.FilterActionType.ADD_FILTER,
+            payload: {
+                field: fieldId,
+                type: "byValue",
+                values: Array.from(selectedValues),
+                enable: !0
             }
-            !(0, vutils_1.arrayEqual)(filter.values, Array.from(selectedRawValues)) && syncCheckboxCheckedState && this.filterStateManager.dispatch({
-                type: types_1.FilterActionType.UPDATE_FILTER,
-                payload: {
-                    field: fieldId,
-                    values: Array.from(selectedRawValues)
-                }
-            });
-        } else {
-            const availableRawValues = (null === (_d = null === (_c = this.uniqueKeys.get(fieldId)) || void 0 === _c ? void 0 : _c.filter((item => !syncCheckboxCheckedState || item.count > 0))) || void 0 === _d ? void 0 : _d.map((item => item.rawValue)).filter((v => null != v))) || [];
-            this.filterStateManager.dispatch({
-                type: types_1.FilterActionType.ADD_FILTER,
-                payload: {
-                    field: fieldId,
-                    type: "byValue",
-                    values: availableRawValues,
-                    enable: !1
-                }
-            });
-        }
-    }
-    syncCheckboxesWithFilterState(filter) {
-        if (!filter) return;
-        const selectedRawValues = filter.values || [], displayToRawMap = this.displayToRawValueMap.get(filter.field), optionDomList = this.valueFilterOptionList.get(filter.field);
-        null == optionDomList || optionDomList.forEach((optionDom => {
-            const displayValue = optionDom.originalValue, rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
-            optionDom.checkbox.checked = selectedRawValues.some((v => v === rawValue));
         }));
     }
-    syncSelectAllWithFilterState(filter) {
-        var _a;
-        if (!filter || !filter.values) return this.selectAllCheckbox.checked = !1, void (this.selectAllCheckbox.indeterminate = !1);
-        const uniqueValuesCount = (null === (_a = this.uniqueKeys.get(filter.field)) || void 0 === _a ? void 0 : _a.length) || 0;
-        0 === uniqueValuesCount || 0 === filter.values.length ? (this.selectAllCheckbox.checked = !1, 
-        this.selectAllCheckbox.indeterminate = !1) : filter.values.length === uniqueValuesCount ? (this.selectAllCheckbox.checked = !0, 
-        this.selectAllCheckbox.indeterminate = !1) : (this.selectAllCheckbox.checked = !1, 
-        this.selectAllCheckbox.indeterminate = !0);
-    }
     applyFilter(fieldId = this.selectedField) {
-        var _a;
-        const allSelectedValues = this.filterStateManager.getFilterState(fieldId).values;
-        allSelectedValues.length >= 0 && allSelectedValues.length < (null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.length) ? this.filterStateManager.dispatch({
+        const options = this.valueFilterOptionList.get(fieldId);
+        if (!options || 0 === options.length) return;
+        const selections = options.map((option => option.checkbox.checked ? option.originalValue : null)).filter((key => null !== key)).flat();
+        this.selectedKeys.set(fieldId, new Set(selections)), selections.length >= 0 && selections.length < this.valueFilterOptionList.get(fieldId).length ? this.filterStateManager.dispatch({
             type: types_1.FilterActionType.APPLY_FILTERS,
             payload: {
                 field: fieldId,
                 type: "byValue",
-                values: allSelectedValues,
+                values: selections,
                 enable: !0
             }
         }) : this.filterStateManager.dispatch({
@@ -231,25 +149,25 @@ class ValueFilter {
     }
     render(container) {
         var _a;
-        this.filterByValuePanel = document.createElement("div"), (0, styles_1.applyStyles)(this.filterByValuePanel, this.styles.filterPanel), 
+        const filterStyles = this.styles;
+        this.filterByValuePanel = document.createElement("div"), (0, styles_1.applyStyles)(this.filterByValuePanel, filterStyles.filterPanel), 
         this.searchContainer = document.createElement("div"), (0, styles_1.applyStyles)(this.searchContainer, this.styles.searchContainer), 
         this.filterByValueSearchInput = document.createElement("input"), this.filterByValueSearchInput.type = "text", 
-        this.filterByValueSearchInput.placeholder = (null === (_a = this.styles.searchInput) || void 0 === _a ? void 0 : _a.placeholder) || "可使用空格分隔多个关键词", 
-        (0, styles_1.applyStyles)(this.filterByValueSearchInput, this.styles.searchInput), 
+        this.filterByValueSearchInput.placeholder = (null === (_a = filterStyles.searchInput) || void 0 === _a ? void 0 : _a.placeholder) || "可使用空格分隔多个关键词", 
+        (0, styles_1.applyStyles)(this.filterByValueSearchInput, filterStyles.searchInput), 
         this.searchContainer.appendChild(this.filterByValueSearchInput), this.optionsContainer = document.createElement("div"), 
         (0, styles_1.applyStyles)(this.optionsContainer, this.styles.optionsContainer), 
         this.selectAllItemDiv = document.createElement("div"), (0, styles_1.applyStyles)(this.selectAllItemDiv, this.styles.optionItem), 
         this.selectAllLabel = document.createElement("label"), (0, styles_1.applyStyles)(this.selectAllLabel, this.styles.optionLabel), 
         this.selectAllCheckbox = document.createElement("input"), this.selectAllCheckbox.type = "checkbox", 
-        this.selectAllCheckbox.checked = !0, (0, styles_1.applyStyles)(this.selectAllCheckbox, this.styles.checkbox), 
-        this.selectAllLabel.append(this.selectAllCheckbox, " 全选"), this.selectAllItemDiv.appendChild(this.selectAllLabel), 
-        this.filterItemsContainer = document.createElement("div"), this.optionsContainer.append(this.selectAllItemDiv, this.filterItemsContainer), 
+        this.selectAllCheckbox.checked = !0, (0, styles_1.applyStyles)(this.selectAllCheckbox, filterStyles.checkbox), 
+        this.totalCountSpan = document.createElement("span"), this.totalCountSpan.textContent = "", 
+        (0, styles_1.applyStyles)(this.totalCountSpan, filterStyles.countSpan), this.selectAllLabel.append(this.selectAllCheckbox, " 全选"), 
+        this.selectAllItemDiv.appendChild(this.selectAllLabel), this.filterItemsContainer = document.createElement("div"), 
+        this.optionsContainer.append(this.selectAllItemDiv, this.filterItemsContainer), 
         this.filterByValuePanel.append(this.searchContainer, this.optionsContainer), container.appendChild(this.filterByValuePanel), 
         this.bindEventForFilterByValue();
     }
-    updatePluginOptions(pluginOptions) {
-        this.pluginOptions = pluginOptions, this.styles = pluginOptions.styles, this.updateStyles(pluginOptions.styles);
-    }
     updateStyles(styles) {
         var _a;
         (0, styles_1.applyStyles)(this.filterByValuePanel, styles.filterPanel), (0, styles_1.applyStyles)(this.searchContainer, styles.searchContainer), 
@@ -259,68 +177,57 @@ class ValueFilter {
         (0, styles_1.applyStyles)(this.selectAllLabel, styles.optionLabel), (0, styles_1.applyStyles)(this.selectAllCheckbox, styles.checkbox);
     }
     renderFilterOptions(field) {
-        var _a, _b;
+        var _a, _b, _c;
+        const filterStyles = this.styles;
         this.filterItemsContainer.innerHTML = "", this.valueFilterOptionList.delete(field), 
         this.valueFilterOptionList.set(field, []);
-        const selectedRawValues = (null === (_a = this.filterStateManager.getFilterState(field)) || void 0 === _a ? void 0 : _a.values) || [], selectedRawValueSet = new Set(selectedRawValues), itemDomList = [];
-        null === (_b = this.uniqueKeys.get(field)) || void 0 === _b || _b.forEach((({value: value, count: count, rawValue: rawValue}) => {
-            const itemDiv = document.createElement("div");
-            (0, styles_1.applyStyles)(itemDiv, this.styles.optionItem), itemDiv.style.display = "flex";
+        let totalCount = 0, allChecked = !0, noneChecked = !0;
+        const selectedKeysSet = this.selectedKeys.get(field), itemDomList = [], isFiltered = null === (_a = this.filterStateManager.getFilterState(field)) || void 0 === _a ? void 0 : _a.enable, toUnformatted = this.toUnformattedCache.get(field), candidates = this.candidateKeys.get(field);
+        if (!candidates || 0 === candidates.size) return;
+        const candidatesArr = [ ...candidates.entries() ], sortedCandidatesArr = "number" == typeof candidatesArr[0][0] ? null === (_b = [ ...candidatesArr ]) || void 0 === _b ? void 0 : _b.sort((([a], [b]) => Number(a) - Number(b))) : null === (_c = [ ...candidatesArr ]) || void 0 === _c ? void 0 : _c.sort((([a], [b]) => String(a).localeCompare(String(b))));
+        null == sortedCandidatesArr || sortedCandidatesArr.forEach((([val, count]) => {
+            var _a, _b;
+            totalCount += count;
+            const unformattedArr = Array.from(toUnformatted.get(val) || new Set), itemDiv = document.createElement("div");
+            (0, styles_1.applyStyles)(itemDiv, filterStyles.optionItem), itemDiv.style.display = "flex";
             const label = document.createElement("label");
-            (0, styles_1.applyStyles)(label, this.styles.optionLabel);
+            (0, styles_1.applyStyles)(label, filterStyles.optionLabel);
             const checkbox = document.createElement("input");
-            checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue), 
-            (0, styles_1.applyStyles)(checkbox, this.styles.checkbox);
+            checkbox.type = "checkbox", checkbox.value = String(val), checkbox.checked = !isFiltered || unformattedArr.some((v => null == selectedKeysSet ? void 0 : selectedKeysSet.has(v))), 
+            (0, styles_1.applyStyles)(checkbox, filterStyles.checkbox), checkbox.checked ? noneChecked = !1 : allChecked = !1;
             const countSpan = document.createElement("span");
-            countSpan.textContent = String(count), (0, styles_1.applyStyles)(countSpan, this.styles.countSpan), 
-            label.append(checkbox, ` ${rawValue}`), itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
+            countSpan.textContent = String(count), (0, styles_1.applyStyles)(countSpan, filterStyles.countSpan), 
+            label.append(checkbox, ` ${(null === (_b = (_a = this.pluginOptions).checkboxItemFormat) || void 0 === _b ? void 0 : _b.call(_a, val, unformattedArr)) || val}`), 
+            itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
             const itemDom = {
-                id: String(value),
-                originalValue: value,
+                id: String(val),
+                originalValue: unformattedArr,
                 itemContainer: itemDiv,
                 checkbox: checkbox,
                 countSpan: countSpan
             };
             itemDomList.push(itemDom);
-        })), this.valueFilterOptionList.set(field, itemDomList);
+        })), this.valueFilterOptionList.set(field, itemDomList), this.selectAllCheckbox.checked = allChecked, 
+        this.selectAllCheckbox.indeterminate = !allChecked && !noneChecked, this.totalCountSpan.textContent = String(totalCount);
     }
     bindEventForFilterByValue() {
-        this.filterByValuePanel.addEventListener("keyup", (event => {
+        this._onInputKeyUpHandler = event => {
             const target = event.target;
             if (target instanceof HTMLInputElement && "text" === target.type) {
                 const value = target.value;
                 this.onSearch(this.selectedField, value);
             }
-        })), this.filterByValuePanel.addEventListener("change", (event => {
+        }, this._onCheckboxChangeHandler = event => {
             const target = event.target;
-            target instanceof HTMLInputElement && "checkbox" === target.type && (target === this.selectAllCheckbox ? this.valueFilterOptionList.get(this.selectedField).forEach((item => item.checkbox.checked = target.checked)) : this.updateCheckboxUI(this.selectedField));
-        }));
-    }
-    updateCheckboxUI(field) {
-        var _a, _b;
-        const checkedItem = null === (_a = this.valueFilterOptionList.get(field)) || void 0 === _a ? void 0 : _a.filter((item => item.checkbox.checked)), uncheckedItem = null === (_b = this.valueFilterOptionList.get(field)) || void 0 === _b ? void 0 : _b.filter((item => !item.checkbox.checked));
-        (0, vutils_1.isValid)(checkedItem) && (0, vutils_1.isValid)(uncheckedItem) && (0 !== checkedItem.length && 0 !== uncheckedItem.length ? this.selectAllCheckbox.indeterminate = !0 : (this.selectAllCheckbox.indeterminate = !1, 
-        this.selectAllCheckbox.checked = 0 === uncheckedItem.length));
-    }
-    updateCheckboxState(field) {
-        var _a;
-        const originalValues = null === (_a = this.valueFilterOptionList.get(field)) || void 0 === _a ? void 0 : _a.filter((item => item.checkbox.checked)).map((item => item.originalValue)), displayToRawMap = this.displayToRawValueMap.get(field), rawValues = originalValues.map((displayValue => displayToRawMap ? displayToRawMap.get(displayValue) : displayValue));
-        this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.ADD_FILTER,
-            payload: {
-                field: field,
-                type: "byValue",
-                values: rawValues
-            }
-        });
+            target instanceof HTMLInputElement && "checkbox" === target.type && (target === this.selectAllCheckbox ? this.toggleSelectAll(this.selectedField, this.selectAllCheckbox.checked) : this.syncSelectAllCheckbox(this.selectedField));
+        }, this.filterByValuePanel.addEventListener("keyup", this._onInputKeyUpHandler), 
+        this.filterByValuePanel.addEventListener("change", this._onCheckboxChangeHandler);
     }
     show() {
-        this.collectUniqueColumnValues(this.selectedField), this.updateCandidateCounts(this.selectedField), 
-        this.initFilterStateFromTableData(this.selectedField);
-        const uniqueValues = this.uniqueKeys.get(this.selectedField), displayToRawMap = this.displayToRawValueMap.get(this.selectedField);
-        uniqueValues && displayToRawMap && this.filterStateManager.initializeFilterMenuState(this.selectedField, uniqueValues, displayToRawMap), 
-        this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), this.renderFilterOptions(this.selectedField), 
-        this.updateCheckboxUI(this.selectedField), this.filterByValuePanel.style.display = "block";
+        var _a;
+        (null === (_a = this.filterStateManager.getFilterState(this.selectedField)) || void 0 === _a ? void 0 : _a.enable) ? this.collectCandidateKeysForFilteredColumn(this.selectedField) : this.collectCandidateKeysForUnfilteredColumn(this.selectedField), 
+        this.initFilterStateFromTableData(this.selectedField), this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), 
+        this.renderFilterOptions(this.selectedField), this.filterByValuePanel.style.display = "block";
     }
     hide() {
         this.filterByValuePanel.style.display = "none";
@@ -328,6 +235,20 @@ class ValueFilter {
     clearSearchInputValue() {
         this.filterByValueSearchInput.value = "";
     }
+    destroy() {
+        if (this.filterByValuePanel && (this._onInputKeyUpHandler && this.filterByValuePanel.removeEventListener("keyup", this._onInputKeyUpHandler), 
+        this._onCheckboxChangeHandler && this.filterByValuePanel.removeEventListener("change", this._onCheckboxChangeHandler)), 
+        this._onInputKeyUpHandler = void 0, this._onCheckboxChangeHandler = void 0, this.filterByValuePanel) {
+            const parent = this.filterByValuePanel.parentElement;
+            parent ? parent.removeChild(this.filterByValuePanel) : this.filterByValuePanel.remove();
+        }
+        this.filterItemsContainer && (this.filterItemsContainer.innerHTML = ""), this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), 
+        this.selectedKeys && this.selectedKeys.clear(), this.candidateKeys && this.candidateKeys.clear(), 
+        this.formatFnCache && this.formatFnCache.clear(), this.toUnformattedCache && this.toUnformattedCache.clear(), 
+        this.valueFilterOptionList && this.valueFilterOptionList.clear(), this.filterByValuePanel = void 0, 
+        this.filterByValueSearchInput = void 0, this.selectAllCheckbox = void 0, this.totalCountSpan = void 0, 
+        this.filterItemsContainer = void 0;
+    }
 }
 
 exports.ValueFilter = ValueFilter;