diff --git a/public/demo/menu/menu.json b/public/demo/menu/menu.json
index 6880bb39e0..fc07fdfde5 100644
--- a/public/demo/menu/menu.json
+++ b/public/demo/menu/menu.json
@@ -377,6 +377,11 @@
                     "name": "DataView",
                     "to": "/dataview"
                 },
+                {
+                    "name": "FilterService",
+                    "to": "/filterservice",
+                    "badge": "New"
+                },
                 {
                     "name": "FullCalendar",
                     "to": "/fullcalendar"
diff --git a/src/router/index.js b/src/router/index.js
index 0be9014c28..ebcbb7f1e0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -347,6 +347,11 @@ const routes = [
         name: 'fieldset',
         component: () => import('../views/fieldset/FieldsetDemo.vue')
     },
+    {
+        path: '/filterservice',
+        name: 'filterservice',
+        component: () => import('../views/filterservice/FilterServiceDemo.vue')
+    },
     {
         path: '/fileupload',
         name: 'fileupload',
diff --git a/src/views/filterservice/FilterServiceDemo.vue b/src/views/filterservice/FilterServiceDemo.vue
new file mode 100644
index 0000000000..68b0c49540
--- /dev/null
+++ b/src/views/filterservice/FilterServiceDemo.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>FilterService</h1>
+                <p>FilterService is a helper utility to filter collections against constraints.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Table Integration</h5>
+                <p>A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.</p>
+
+                <DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
+                    dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading">
+                    <template #empty>
+                        No customers found.
+                    </template>
+                    <template #loading>
+                        Loading customers data. Please wait.
+                    </template>
+                    <Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
+                        <template #body="{data}">
+                            {{data.name}}
+                        </template>
+                        <template #filter="{filterModel,filterCallback}">
+                            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/>
+                        </template>
+                    </Column>
+                    <Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
+                        <template #body="{data}">
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
+                            <span class="image-text">{{data.country.name}}</span>
+                        </template>
+                        <template #filter="{filterModel,filterCallback}">
+                            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by country - ${filterModel.matchMode}`" />
+                        </template>
+                    </Column>
+                </DataTable>
+            </div>
+        </div>
+
+        <FilterServiceDoc />
+    </div>
+</template>
+
+<script>
+import FilterServiceDoc from './FilterServiceDoc';
+import {FilterMatchMode,FilterService} from 'primevue/api';
+import CustomerService from '../../service/CustomerService';
+
+const YOUR_FILTER = 'YOUR FILTER';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: {
+                'name': {value: null, matchMode: YOUR_FILTER},
+                'country.name': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
+            },
+            matchModeOptions: [
+                {label: 'Your Equals', value: YOUR_FILTER},
+                {label: 'Starts With', value: FilterMatchMode.STARTS_WITH}
+            ],
+            loading: true
+        }
+    },
+    created() {
+        this.customerService = new CustomerService();
+    },
+    mounted() {
+        this.customerService.getCustomersLarge().then(data => {
+            this.customers = data; 
+            this.loading = false;
+        });
+
+        FilterService.register(YOUR_FILTER, (value, filter) => {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+    
+            if (value === undefined || value === null) {
+                return false;
+            }
+            
+            return value.toString() === filter.toString();
+        });
+    },
+    components: {
+        'FilterServiceDoc': FilterServiceDoc
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/filterservice/FilterServiceDoc.vue b/src/views/filterservice/FilterServiceDoc.vue
new file mode 100644
index 0000000000..5127b4b941
--- /dev/null
+++ b/src/views/filterservice/FilterServiceDoc.vue
@@ -0,0 +1,290 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script><code>
+import &#123;FilterService&#125; from 'primevue/api';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Filters are accessed with <i>FilterService.filters</i>.</p>
+<pre v-code.script><code>
+const value = 'PrimeNG';
+
+FilterService.filters.equals(value, 'NG');                            //false
+FilterService.filters.equals(value, 8);                               //false
+FilterService.filters.equals(value, new Date());                      //false
+FilterService.filters.contains(value, 'NG');                          //true
+FilterService.filters.startsWith(value, 'NG');                        //false
+FilterService.filters.endsWith(value, 'NG');                          //true
+FilterService.filters.lt(10, 20);                                     //true
+FilterService.filters.gt(50, 20);                                     //true
+FilterService.filters.in(value, ['PrimeFaces', 'PrimeNG']);           //true   
+
+</code></pre>
+
+				<h5>Custom Constraint</h5>
+				<p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
+<pre v-code.script><code>
+FilterService.register('isPrimeNumber', (value, filter): boolean => &#123;
+    if (filter === undefined || filter === null || filter.trim() === '') &#123;
+        return true;
+    &#125;
+
+    if (value === undefined || value === null) &#123;
+        return false;
+    &#125;
+    
+    return value.toString() === filter.toString();
+&#125;);
+
+FilterService.filters['isPrimeNumber'](3);                      //true
+FilterService.filters['isPrimeNumber'](5);                      //true
+FilterService.filters['isPrimeNumber'](568985673);              //false
+
+</code></pre>
+
+				<h5>Built-in Constraints</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th>Parameters</th>
+								<th>Description</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>startsWith</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value starts with the filter value</td>
+							</tr>
+							<tr>
+								<td>contains</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value contains the filter value</td>
+							</tr>
+							<tr>
+								<td>endsWith</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value ends with the filter value</td>
+							</tr>
+							<tr>
+								<td>equals</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value equals the filter value</td>
+							</tr>
+							<tr>
+								<td>notEquals</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value does not equal the filter value</td>
+							</tr>
+							<tr>
+								<td>in</td>
+								<td>value: Value to filter<br />
+									filter[]: An array of filter values<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value contains the filter value</td>
+							</tr>
+							<tr>
+								<td>lt</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value is less than the filter value</td>
+							</tr>
+							<tr>
+								<td>lte</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value is less than or equals to the filter value</td>
+							</tr>
+							<tr>
+								<td>gt</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value is greater than the filter value</td>
+							</tr>
+							<tr>
+								<td>gte</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value is greater than or equals to the filter value</td>
+							</tr>
+							<tr>
+								<td>is</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value equals the filter value, alias to equals</td>
+							</tr>
+							<tr>
+								<td>isNot</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the value does not equal the filter value, alias to notEquals.</td>
+							</tr>
+							<tr>
+								<td>before</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the date value is before the filter date.</td>
+							</tr>
+							<tr>
+								<td>after</td>
+								<td>value: Value to filter<br />
+									filter: Filter value<br />
+									filterLocale: Locale to use in filtering</td>
+								<td>Whether the date value is after the filter date.</td>
+							</tr>
+						</tbody>
+					</table>
+
+					<h5>FilterService API</h5>
+					<div class="doc-tablewrapper">
+						<table class="doc-table">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Parameters</th>
+									<th>Description</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>filter</td>
+									<td>value[]: An array of values to filter<br />
+										fields[]: An array of properties in the value object<br />
+										filterValue: Filter value<br />
+										filterMatchMode: Constraint<br />
+										filterLocale: Locale to use in filtering</td>
+									<td>Whether the property values of the given value collection matches the filter.</td>
+								</tr>
+								<tr>
+									<td>filters</td>
+									<td>-</td>
+									<td>Property to access constraints collection.</td>
+								</tr>
+								<tr>
+									<td>register</td>
+									<td>name: string <br />
+										fn: Filter callback</td>
+									<td>Registers a new constraint in filters.</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
+					<a href="https://github.com/primefaces/primevue/tree/master/src/views/filterservice" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+				</div>
+<pre v-code><code><template v-pre>
+&lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
+	dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading"&gt;
+	&lt;template #empty&gt;
+		No customers found.
+	&lt;/template&gt;
+	&lt;template #loading&gt;
+		Loading customers data. Please wait.
+	&lt;/template&gt;
+	&lt;Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions"&gt;
+		&lt;template #body="{data}"&gt;
+			{{data.name}}
+		&lt;/template&gt;
+		&lt;template #filter="{filterModel,filterCallback}"&gt;
+			&lt;InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/&gt;
+		&lt;/template&gt;
+	&lt;/Column&gt;
+	&lt;Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions"&gt;
+		&lt;template #body="{data}"&gt;
+			&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /&gt;
+			&lt;span class="image-text"&gt;{{data.country.name}}&lt;/span&gt;
+		&lt;/template&gt;
+		&lt;template #filter="{filterModel,filterCallback}"&gt;
+			&lt;InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by country - ${filterModel.matchMode}`" /&gt;
+		&lt;/template&gt;
+	&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</code></pre>
+
+<pre v-code.script><code>
+import {FilterMatchMode,FilterService} from 'primevue/api';
+import CustomerService from '../../service/CustomerService';
+
+const YOUR_FILTER = 'YOUR FILTER';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: {
+                'name': {value: null, matchMode: YOUR_FILTER},
+                'country.name': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
+            },
+            matchModeOptions: [
+                {label: 'Your Equals', value: YOUR_FILTER},
+                {label: 'Starts With', value: FilterMatchMode.STARTS_WITH}
+            ],
+            loading: true
+        }
+    },
+    created() {
+        this.customerService = new CustomerService();
+    },
+    mounted() {
+        this.customerService.getCustomersLarge().then(data => {
+            this.customers = data; 
+            this.loading = false;
+        });
+
+        FilterService.register(YOUR_FILTER, (value, filter) => {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+    
+            if (value === undefined || value === null) {
+                return false;
+            }
+            
+            return value.toString() === filter.toString();
+        });
+    }
+}
+
+</code></pre>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
+
+<script>
+export default {}
+</script>
\ No newline at end of file