diff --git a/src/components/api/Api.d.ts b/src/components/api/Api.d.ts
new file mode 100644
index 0000000000..c71053aa97
--- /dev/null
+++ b/src/components/api/Api.d.ts
@@ -0,0 +1,50 @@
+export const FilterMatchMode: {
+    STARTS_WITH?: string,
+    CONTAINS?: string,
+    NOT_CONTAINS?: string,
+    ENDS_WITH?: string,
+    EQUALS?: string,
+    NOT_EQUALS?: string,
+    IN?: string,
+    LESS_THAN?: string,
+    LESS_THAN_OR_EQUAL_TO?: string,
+    GREATER_THAN?: string,
+    GREATER_THAN_OR_EQUAL_TO?: string,
+    BETWEEN?: string,
+    DATE_IS?: string,
+    DATE_IS_NOT?: string,
+    DATE_BEFORE?: string,
+    DATE_AFTER?: string
+}
+
+export const FilterOperator: {
+    AND?: string,
+    OR?: string
+}
+
+interface FiltersOptions {
+    startsWith?(value: any, filter: any, filterLocale: string): boolean,
+    contains?(value: any, filter: any, filterLocale: string): boolean,
+    notContains?(value: any, filter: any, filterLocale: string): boolean,
+    endsWith?(value: any, filter: any, filterLocale: string): boolean,
+    equals?(value: any, filter: any, filterLocale: string): boolean,
+    notEquals?(value: any, filter: any, filterLocale: string): boolean,
+    in?(value: any, filter: any): boolean,
+    between?(value: any, filter: any): boolean,
+    lt?(value: any, filter: any): boolean,
+    lte?(value: any, filter: any): boolean,
+    gt?(value: any, filter: any): boolean,
+    gte?(value: any, filter: any): boolean,
+    dateIs?(value: any, filter: any): boolean,
+    dateIsNot?(value: any, filter: any): boolean,
+    dateBefore?(value: any, filter: any): boolean,
+    dateAfter?(value: any, filter: any): boolean
+}
+
+interface FilterServiceOptions {
+    filter?(value: any[], fields: any[], filterValue: any, filterMatchMode: string, filterLocale: string): any[],
+    filters?: FiltersOptions,
+    register?(rule: string, fn: any): void
+}
+
+export const FilterService: FilterServiceOptions;
diff --git a/src/components/api/Api.js b/src/components/api/Api.js
new file mode 100644
index 0000000000..398c1db5d2
--- /dev/null
+++ b/src/components/api/Api.js
@@ -0,0 +1,5 @@
+import FilterMatchMode from './FilterMatchMode';
+import FilterOperator from './FilterOperator';
+import FilterService from './FilterService';
+
+export {FilterMatchMode,FilterOperator,FilterService};
\ No newline at end of file
diff --git a/src/components/api/FilterMatchMode.js b/src/components/api/FilterMatchMode.js
new file mode 100644
index 0000000000..4ff43bcde2
--- /dev/null
+++ b/src/components/api/FilterMatchMode.js
@@ -0,0 +1,20 @@
+const FilterMatchMode = {
+    STARTS_WITH : 'startsWith',
+    CONTAINS : 'contains',
+    NOT_CONTAINS : 'notContains',
+    ENDS_WITH : 'endsWith',
+    EQUALS : 'equals',
+    NOT_EQUALS : 'notEquals',
+    IN : 'in',
+    LESS_THAN : 'lt',
+    LESS_THAN_OR_EQUAL_TO : 'lte',
+    GREATER_THAN : 'gt',
+    GREATER_THAN_OR_EQUAL_TO : 'gte',
+    BETWEEN : 'between',
+    DATE_IS : 'dateIs',
+    DATE_IS_NOT : 'dateIsNot',
+    DATE_BEFORE : 'dateBefore',
+    DATE_AFTER : 'dateAfter'
+}
+
+export default FilterMatchMode;
\ No newline at end of file
diff --git a/src/components/api/FilterOperator.js b/src/components/api/FilterOperator.js
new file mode 100644
index 0000000000..76adf7d645
--- /dev/null
+++ b/src/components/api/FilterOperator.js
@@ -0,0 +1,6 @@
+const FilterOperator = {
+    AND: 'and',
+    OR: 'or'
+}
+
+export default FilterOperator;
\ No newline at end of file
diff --git a/src/components/api/FilterService.js b/src/components/api/FilterService.js
new file mode 100644
index 0000000000..7b0fa9ec03
--- /dev/null
+++ b/src/components/api/FilterService.js
@@ -0,0 +1,240 @@
+import ObjectUtils from '../utils/ObjectUtils';
+
+const FilterService = {
+    filter(value, fields, filterValue, filterMatchMode, filterLocale) {
+        let filteredItems = [];
+
+        if (value) {
+            for (let item of value) {
+                for (let field of fields) {
+                    let fieldValue = ObjectUtils.resolveFieldData(item, field);
+
+                    if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
+                        filteredItems.push(item);
+                        break;
+                    }
+                }
+            }
+        }
+
+        return filteredItems;
+    },
+    filters: {
+        startsWith(value, filter, filterLocale)  {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.slice(0, filterValue.length) === filterValue;
+        },
+        contains(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue) !== -1;
+        },
+        notContains(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue) === -1;
+        },
+        endsWith(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
+        },
+        equals(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() === filter.getTime();
+            else
+                return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+        },
+        notEquals(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return false;
+            }
+
+            if (value === undefined || value === null) {
+                return true;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() !== filter.getTime();
+            else
+                return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+        },
+        in(value, filter) {
+            if (filter === undefined || filter === null || filter.length === 0) {
+                return true;
+            }
+
+            for (let i = 0; i < filter.length; i++) {
+                if (ObjectUtils.equals(value, filter[i])) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
+        between(value, filter) {
+            if (filter == null || filter[0] == null || filter[1] == null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime)
+            return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
+            else
+                return filter[0] <= value && value <= filter[1];
+        },
+        lt(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() < filter.getTime();
+            else
+                return value < filter;
+        },
+        lte(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() <= filter.getTime();
+            else
+                return value <= filter;
+        },
+        gt(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() > filter.getTime();
+            else
+                return value > filter;
+        },
+        gte(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() >= filter.getTime();
+            else
+                return value >= filter;
+        },
+        dateIs(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.toDateString() === filter.toDateString();
+        },
+        dateIsNot(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.toDateString() !== filter.toDateString();
+        },
+        dateBefore(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() < filter.getTime();
+        },
+        dateAfter(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() > filter.getTime();
+        }
+    },
+    register(rule, fn) {
+        this.filters[rule] = fn;
+    }
+}
+
+export default FilterService;
\ No newline at end of file
diff --git a/src/components/api/index.d.ts b/src/components/api/index.d.ts
new file mode 100644
index 0000000000..13289cd982
--- /dev/null
+++ b/src/components/api/index.d.ts
@@ -0,0 +1 @@
+export * from './Api';
\ No newline at end of file
diff --git a/src/components/api/index.js b/src/components/api/index.js
new file mode 100644
index 0000000000..cd2a5662cd
--- /dev/null
+++ b/src/components/api/index.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./Api.js');
\ No newline at end of file
diff --git a/src/components/api/plugins.js b/src/components/api/plugins.js
new file mode 100644
index 0000000000..2865b9f93c
--- /dev/null
+++ b/src/components/api/plugins.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import PrimeVue from 'primevue/config';
+
+Vue.use(PrimeVue);
\ No newline at end of file
diff --git a/src/views/filterservice/FilterServiceDemo.vue b/src/views/filterservice/FilterServiceDemo.vue
new file mode 100644
index 0000000000..b73de86bc9
--- /dev/null
+++ b/src/views/filterservice/FilterServiceDemo.vue
@@ -0,0 +1,97 @@
+<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>
+            <AppInputStyleSwitch />
+        </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" :rows="10" responsiveLayout="scroll"
+                    dataKey="id" :filters.sync="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 FilterMatchMode from '../../../src/components/api/FilterMatchMode';
+import FilterService from '../../../src/components/api/FilterService';
+import CustomerService from '../../service/CustomerService';
+import FilterServiceDoc from './FilterServiceDoc';
+
+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..a62461a8f8
--- /dev/null
+++ b/src/views/filterservice/FilterServiceDoc.vue
@@ -0,0 +1,280 @@
+<template>
+    <div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Import</h5>
+<CodeHighlight lang="javascript">
+import FilterService from 'primevue/api';
+</CodeHighlight>
+
+                <h5>Getting Started</h5>
+                <p>Filters are accessed with <i>FilterService.filters</i>.</p>
+<CodeHighlight lang="javascript">
+const value = 'PrimeVue';
+
+FilterService.filters.equals(value, 'Vue');                            //false
+FilterService.filters.equals(value, 8);                               //false
+FilterService.filters.equals(value, new Date());                      //false
+FilterService.filters.contains(value, 'Vue');                          //true
+FilterService.filters.startsWith(value, 'Vue');                        //false
+FilterService.filters.endsWith(value, 'Vue');                          //true
+FilterService.filters.lt(10, 20);                                     //true
+FilterService.filters.gt(50, 20);                                     //true
+FilterService.filters.in(value, ['PrimeFaces', 'PrimeVue']);           //true
+</CodeHighlight>
+
+                <h5>Custom Constraint</h5>
+                <p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
+<CodeHighlight lang="javascript">
+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
+</CodeHighlight>
+                <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">
+				<a href="https://github.com/primefaces/primevue/tree/2.x/src/views/filterservice" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll"
+    dataKey="id" :filters.sync="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>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import FilterMatchMode from '../../../src/components/api/FilterMatchMode';
+import FilterService from '../../../src/components/api/FilterService';
+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();
+        });
+    }
+}
+</CodeHighlight>
+            </TabPanel>
+        </TabView>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/views/locale/LocaleDemo.vue b/src/views/locale/LocaleDemo.vue
index a2d9e11320..4961670ffd 100644
--- a/src/views/locale/LocaleDemo.vue
+++ b/src/views/locale/LocaleDemo.vue
@@ -39,94 +39,51 @@ export default {
 </CodeHighlight>
 
             <h5>Locale Options</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>accept</td>
-                            <td>Yes</td>
-                        </tr>
-                        <tr>
-                            <td>reject</td>
-                            <td>No</td>
-                        </tr>
-                        <tr>
-                            <td>choose</td>
-                            <td>Choose</td>
-                        </tr>
-                        <tr>
-                            <td>upload</td>
-                            <td>Upload</td>
-                        </tr>
-                        <tr>
-                            <td>cancel</td>
-                            <td>Cancel</td>
-                        </tr>
-                        <tr>
-                            <td>dayNames</td>
-                            <td>["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]</td>
-                        </tr>
-                        <tr>
-                            <td>dayNamesShort</td>
-                            <td>["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]</td>
-                        </tr>
-                        <tr>
-                            <td>dayNamesMin</td>
-                            <td>["Su","Mo","Tu","We","Th","Fr","Sa"]</td>
-                        </tr>
-                        <tr>
-                            <td>monthNames</td>
-                            <td>["January","February","March","April","May","June","July","August","September","October","November","December"]</td>
-                        </tr>
-                        <tr>
-                            <td>monthNamesShort</td>
-                            <td>["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</td>
-                        </tr>
-                        <tr>
-                            <td>today</td>
-                            <td>Today</td>
-                        </tr>
-                        <tr>
-                            <td>today</td>
-                            <td>Today</td>
-                        </tr>
-                        <tr>
-                            <td>weekHeader</td>
-                            <td>Wk</td>
-                        </tr>
-                        <tr>
-                            <td>firstDayOfWeek</td>
-                            <td>0</td>
-                        </tr>
-                        <tr>
-                            <td>dateFormat</td>
-                            <td>mm/dd/yy</td>
-                        </tr>
-                        <tr>
-                            <td>weak</td>
-                            <td>Weak</td>
-                        </tr>
-                        <tr>
-                            <td>medium</td>
-                            <td>Medium</td>
-                        </tr>
-                        <tr>
-                            <td>strong</td>
-                            <td>Strong</td>
-                        </tr>
-                        <tr>
-                            <td>passwordPrompt</td>
-                            <td>Enter a password</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+<CodeHighlight lang="javascript">
+locale: {
+    startsWith: 'Starts with',
+    contains: 'Contains',
+    notContains: 'Not contains',
+    endsWith: 'Ends with',
+    equals: 'Equals',
+    notEquals: 'Not equals',
+    noFilter: 'No Filter',
+    lt: 'Less than',
+    lte: 'Less than or equal to',
+    gt: 'Greater than',
+    gte: 'Greater than or equal to',
+    dateIs: 'Date is',
+    dateIsNot: 'Date is not',
+    dateBefore: 'Date is before',
+    dateAfter: 'Date is after',
+    clear: 'Clear',
+    apply: 'Apply',
+    matchAll: 'Match All',
+    matchAny: 'Match Any',
+    addRule: 'Add Rule',
+    removeRule: 'Remove Rule',
+    accept: 'Yes',
+    reject: 'No',
+    choose: 'Choose',
+    upload: 'Upload',
+    cancel: 'Cancel',
+    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
+    monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
+    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: 'Today',
+    weekHeader: 'Wk',
+    firstDayOfWeek: 0,
+    dateFormat: 'mm/dd/yy',
+    weak: 'Weak',
+    medium: 'Medium',
+    strong: 'Strong',
+    passwordPrompt: 'Enter a password',
+    emptyFilterMessage: 'No results found',
+    emptyMessage: 'No available options'
+}
+</CodeHighlight>
         </div>
     </div>
 </template>