Fixed #200 - DataTable > Missing custom filterMatchMode

primefaces · Feb 27, 2020 · 10b08d1 · 10b08d1
1 parent 1bb0e4c
commit 10b08d1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
@@ -14,6 +14,7 @@ export declare class Column extends Vue {
     footerStyle?: object;
     footerClass?: string;
     filterMatchMode?: string;
+    filterFunction?: Function;
     excludeGlobalFilter?: boolean;
     selectionMode?: string;
     expander?: boolean;

diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
@@ -54,6 +54,10 @@ export default {
             type: String,
             default: 'startsWith'
         },
+        filterFunction: {
+            type: Function,
+            default: null
+        },
         excludeGlobalFilter: {
             type: Boolean,
             default: false

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
@@ -577,8 +577,7 @@ export default {
                     if (Object.prototype.hasOwnProperty.call(this.filters, columnField)) {
                         let filterValue = this.filters[columnField];
                         let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField);
-                        let filterConstraint = FilterUtils[col.filterMatchMode];
-
+                        let filterConstraint = col.filterMatchMode === 'custom' ? col.filterFunction : FilterUtils[col.filterMatchMode];
                         if (!filterConstraint(dataFieldValue, filterValue)) {
                             localMatch = false;
                         }

diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
@@ -208,6 +208,14 @@ export default {
                                 <td>startsWith</td>
                                 <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".</td>
                             </tr>
+                            <tr>
+                                <td>filterFunction</td>
+                                <td>function</td>
+                                <td>null</td>
+                                <td>A function that takes a value and a filter to compare against by returning either true or false. filterMatchMode must be set
+                                    to "custom" for this function to be triggered.
+                                </td>
+                            </tr>
                             <tr>
                                 <td>excludeGlobalFilter</td>
                                 <td>boolean</td>
@@ -477,7 +485,7 @@ data() {
                 <p>Filtering is enabled by defining a filter template per column to populate the <i>filters</i> property of the DataTable. The <i>filters</i>
                 property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties
                 via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the <i>filterMatchMode</i> property that also accepts
-                "contains", "endsWith", "equals", "notEquals" and "in" as available modes.</p>
+                "contains", "endsWith", "equals", "notEquals", "in" and "custom" as available modes.</p>
                 <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
 <CodeHighlight>
 <template v-pre>
@@ -517,6 +525,33 @@ data() {
     &lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
+</CodeHighlight>
+
+                <p>Custom filtering is implemented by setting the filterMatchMode to "custom" and defining a filter function.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;Column field="vin" header="Vin" filterMatchMode="myOwnEquals"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+methods: {
+    myOwnEquals(value, filter) {
+        if (filter === undefined || filter === null || (typeof filter === 'string' &amp;&amp; filter.trim() === '')) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        return value.toString().toLowerCase() === filter.toString().toLowerCase();
+    }
+}
 </CodeHighlight>
 
                 <h3>Selection</h3>