Fixed #200 - DataTable > Missing `custom` filterMatchMode
parent
1bb0e4ccd9
commit
10b08d12bc
|
@ -14,6 +14,7 @@ export declare class Column extends Vue {
|
|||
footerStyle?: object;
|
||||
footerClass?: string;
|
||||
filterMatchMode?: string;
|
||||
filterFunction?: Function;
|
||||
excludeGlobalFilter?: boolean;
|
||||
selectionMode?: string;
|
||||
expander?: boolean;
|
||||
|
|
|
@ -54,6 +54,10 @@ export default {
|
|||
type: String,
|
||||
default: 'startsWith'
|
||||
},
|
||||
filterFunction: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
excludeGlobalFilter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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() {
|
|||
</Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Custom filtering is implemented by setting the filterMatchMode to "custom" and defining a filter function.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Column field="vin" header="Vin" filterMatchMode="myOwnEquals">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['vin']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
methods: {
|
||||
myOwnEquals(value, filter) {
|
||||
if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value === undefined || value === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return value.toString().toLowerCase() === filter.toString().toLowerCase();
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Selection</h3>
|
||||
|
|
Loading…
Reference in New Issue