diff --git a/docs b/docs
index 5b1e09db..6098d587 160000
--- a/docs
+++ b/docs
@@ -1 +1 @@
-Subproject commit 5b1e09dbfcb9b6029f3ebae27b0bd95e8056d130
+Subproject commit 6098d587838a966eac399269cb2cd94da7d0927b
diff --git a/packages/angular b/packages/angular
index 5e68f981..90db673e 160000
--- a/packages/angular
+++ b/packages/angular
@@ -1 +1 @@
-Subproject commit 5e68f981ecf414a32ab92c094775d9040606cc37
+Subproject commit 90db673e9ca0e34581ac9fc84879cd779427cc39
diff --git a/packages/react b/packages/react
index 2dcfe34e..3f7d51e5 160000
--- a/packages/react
+++ b/packages/react
@@ -1 +1 @@
-Subproject commit 2dcfe34ee300cc0254f063d30b2dafb3cbd63994
+Subproject commit 3f7d51e590bd4458c13413dc41024913428acb13
diff --git a/packages/svelte b/packages/svelte
index 902a340e..97e375f4 160000
--- a/packages/svelte
+++ b/packages/svelte
@@ -1 +1 @@
-Subproject commit 902a340e64496addebe885518b8275fcc91034fc
+Subproject commit 97e375f4dd942554dbb942a41c5f1386a5991cfd
diff --git a/packages/vue2 b/packages/vue2
index 2c597140..e6bcd15f 160000
--- a/packages/vue2
+++ b/packages/vue2
@@ -1 +1 @@
-Subproject commit 2c597140e77a98debcdc7770c3a5498d3cbd61cb
+Subproject commit e6bcd15f963d9343d4e94190b89bdeebe61aaaa5
diff --git a/packages/vue3 b/packages/vue3
index 9c565397..fd6df7d7 160000
--- a/packages/vue3
+++ b/packages/vue3
@@ -1 +1 @@
-Subproject commit 9c565397d0c4614ae633b9642db89fdefdee0259
+Subproject commit fd6df7d7e6da9e319b96f6834323d81276dee9fa
diff --git a/src/components.d.ts b/src/components.d.ts
index 8fbc160b..52919a17 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -436,7 +436,6 @@ export namespace Components {
         "disableDynamicFiltering": boolean;
         "filterCaptions": FilterCaptions | undefined;
         "filterEntities": Record<string, LogicFunction>;
-        "filterItems": MultiFilterItem;
         "filterNames": Record<string, string>;
         "getChanges": () => Promise<ShowData | undefined>;
         "show": (newEntity?: ShowData) => Promise<void>;
@@ -1815,7 +1814,6 @@ declare namespace LocalJSX {
         "disableDynamicFiltering"?: boolean;
         "filterCaptions"?: FilterCaptions | undefined;
         "filterEntities"?: Record<string, LogicFunction>;
-        "filterItems"?: MultiFilterItem;
         "filterNames"?: Record<string, string>;
         "onFilterChange"?: (event: RevogrFilterPanelCustomEvent<MultiFilterItem>) => void;
         "onResetChange"?: (event: RevogrFilterPanelCustomEvent<ColumnProp>) => void;
diff --git a/src/plugins/filter/filter.panel.tsx b/src/plugins/filter/filter.panel.tsx
index 75a690f4..5dc6c87a 100644
--- a/src/plugins/filter/filter.panel.tsx
+++ b/src/plugins/filter/filter.panel.tsx
@@ -60,7 +60,7 @@ export class FilterPanel {
   @State() currentFilterId = -1;
   @State() currentFilterType: FilterType = defaultType;
   @State() changes: ShowData | undefined;
-  @Prop() filterItems: MultiFilterItem = {};
+  @State() filterItems: MultiFilterItem = {};
   @Prop() filterNames: Record<string, string> = {};
   @Prop() filterEntities: Record<string, LogicFunction> = {};
   @Prop() filterCaptions: FilterCaptions | undefined;
@@ -105,6 +105,7 @@ export class FilterPanel {
 
   @Method() async show(newEntity?: ShowData) {
     this.changes = newEntity;
+    this.filterItems = newEntity?.filterItems || {};
     if (this.changes) {
       this.changes.type = this.changes.type || defaultType;
     }
@@ -127,7 +128,7 @@ export class FilterPanel {
 
   getFilterItemsList() {
     const prop = this.changes?.prop;
-    if (!(prop || prop === 0)) return '';
+    if (typeof prop === 'undefined') return '';
 
     const propFilters = this.filterItems[prop] || [];
     const capts = Object.assign(
diff --git a/src/plugins/filter/filter.plugin.tsx b/src/plugins/filter/filter.plugin.tsx
index 5314ba47..17cfd133 100644
--- a/src/plugins/filter/filter.plugin.tsx
+++ b/src/plugins/filter/filter.plugin.tsx
@@ -1,5 +1,4 @@
 import { h } from '@stencil/core';
-import reduce from 'lodash/reduce';
 
 import type { ColumnProp, ColumnRegular, DataType, PluginProviders } from '@type';
 import { BasePlugin } from '../base.plugin';
@@ -74,7 +73,6 @@ export class FilterPlugin extends BasePlugin {
     this.revogrid.registerVNode = [
       ...existingNodes,
       <revogr-filter-panel
-        filterItems={this.multiFilterItems}
         filterNames={this.filterNameIndexByType}
         filterEntities={this.filterFunctionsIndexedByType}
         filterCaptions={config?.localization?.captions}
@@ -115,7 +113,7 @@ export class FilterPlugin extends BasePlugin {
     this.addEventListener(
       FILTER_CONFIG_CHANGED_EVENT,
       ({ detail }: CustomEvent<ColumnFilterConfig | boolean>) => {
-        if (!detail) {
+        if (!detail || typeof detail === 'object' && (!detail.multiFilterItems || !Object.keys(detail.multiFilterItems).length)) {
           this.clearFiltering();
           return;
         }
@@ -138,6 +136,8 @@ export class FilterPlugin extends BasePlugin {
   initConfig(config: ColumnFilterConfig) {
     if (config.multiFilterItems) {
       this.multiFilterItems = { ...config.multiFilterItems };
+    } else {
+      this.multiFilterItems = {};
     }
     // Add custom filters
     if (config.customFilters) {
@@ -181,18 +181,13 @@ export class FilterPlugin extends BasePlugin {
     }
 
     if (config.collection) {
-      this.filterCollection = reduce(
-        config.collection,
-        (result: FilterCollection, item, prop) => {
-          if (this.filterFunctionsIndexedByType[item.type]) {
-            result[prop] = item;
-          } else {
-            console.warn(`${item.type} type is not found.`);
-          }
-          return result;
-        },
-        {},
+      this.filterCollection = Object.fromEntries(
+        Object.entries(config.collection).filter(
+          ([, item]) => this.filterFunctionsIndexedByType[item.type],
+        ),
       );
+    } else {
+      this.filterCollection = {};
     }
 
     if (config.localization) {
@@ -212,14 +207,6 @@ export class FilterPlugin extends BasePlugin {
       return;
     }
     e.preventDefault();
-
-    // close if same
-    const changes = await this.pop?.getChanges();
-    if (changes && changes?.prop === e.detail.prop) {
-      this.pop?.show();
-      return;
-    }
-
     if (!this.pop) {
       return;
     }
@@ -236,6 +223,7 @@ export class FilterPlugin extends BasePlugin {
       autoCorrect: true,
       prop,
       filterTypes: this.getColumnFilter(e.detail.filter),
+      filterItems: this.multiFilterItems,
     });
   }
 
diff --git a/src/plugins/filter/filter.types.ts b/src/plugins/filter/filter.types.ts
index effbf9ea..0def20ab 100644
--- a/src/plugins/filter/filter.types.ts
+++ b/src/plugins/filter/filter.types.ts
@@ -129,4 +129,5 @@ export type ShowData = {
    */
   autoCorrect?: boolean;
   filterTypes?: Record<string, string[]>;
+  filterItems?: MultiFilterItem;
 } & FilterItem;
diff --git a/src/serve/controller.js b/src/serve/controller.js
index 10a1bb5c..352458f8 100644
--- a/src/serve/controller.js
+++ b/src/serve/controller.js
@@ -237,16 +237,13 @@ window.theme = function (theme) {
 
 window.onload = onLoad;
 
-/**
- * On load function
- */
-function onLoad() {
+window.clearFilter = () => {
   const grid = document.querySelector('revo-grid');
+  grid.filter = {};
+};
 
-  grid.readonly = false;
-  grid.range = true;
-  grid.resize = true;
-
+window.setFilter = () => {
+  const grid = document.querySelector('revo-grid');
   const filterFunc = (cellValue, extraValue) => {
     if (!cellValue) {
       return false;
@@ -260,7 +257,7 @@ function onLoad() {
   filterFunc.extra = 'input';
 
   const filterConfig = {
-    include: ['newEqual'],
+    // include: ['newEqual'],
     customFilters: {
       newEqual: {
         columnFilterType: 'myFilterType', // column filter type id
@@ -269,11 +266,30 @@ function onLoad() {
       },
     },
     disableDynamicFiltering: true,
+    multiFilterItems: {
+      0: [
+        {
+          type: "contains",
+          value: '9:0',
+        },
+      ],
+    },
   };
 
   grid.filter = filterConfig;
+};
 
+/**
+ * On load function
+ */
+function onLoad() {
+  const grid = document.querySelector('revo-grid');
+
+  grid.readonly = false;
+  grid.range = true;
+  grid.resize = true;
   grid.filter = true;
+
   grid.exporting = true;
   grid.rowHeaders = true;
   grid.rowDefinitions = [{
diff --git a/src/serve/data.js b/src/serve/data.js
index accab4db..e3c39a8d 100644
--- a/src/serve/data.js
+++ b/src/serve/data.js
@@ -115,7 +115,7 @@ export function generateFakeDataObject(config = {}) {
           'custom-row-index': rowIndex
         };
       }
-      columns[rgCol].cellParser = () => 'a';
+      // columns[rgCol].cellParser = () => 'a';
       columns[rgCol].cellTemplate = (h, { value }) => {
       //   // delay
       //   // for(let i = 0; i < 10000000; i++) {
diff --git a/src/serve/index.html b/src/serve/index.html
index f3394f07..8264509d 100644
--- a/src/serve/index.html
+++ b/src/serve/index.html
@@ -50,6 +50,8 @@ <h6>Data size</h6>
           </div>
 
           <h6 class="mt-4">Action</h6>
+          <button type="button" class="btn btn-outline-primary btn-sm mt-1" onclick="setFilter()">Set filter</button>
+          <button type="button" class="btn btn-outline-primary btn-sm mt-1" onclick="clearFilter()">Clear filter</button>
           <button type="button" class="btn btn-primary btn-sm mt-1" onclick="setTrimmed([2])">Trim 3rd row</button>
           <button type="button" class="btn btn-outline-primary btn-sm mt-1" onclick="setTrimmed([])">Clear trimmed</button>
           <button type="button" class="btn btn-primary btn-sm mt-1" onclick="setGrouping(['key'])">Group by: