Refactored filtering to be more flexible

src/components/datatable/ColumnFilter.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass">
         <div class="p-fluid p-column-filter-element" v-if="display === 'row'" >
-            <component :is="filterElement" :field="field" />
+            <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
         <button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
             :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}" 
@@ -27,7 +27,7 @@
                         <div v-for="(fieldConstraint,i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
                             <CFDropdown v-if="showMatchModes && matchModes" :options="matchModes" :modelValue="fieldConstraint.matchMode" optionLabel="label" optionValue="value"
                                 @update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
-                            <component v-if="display === 'menu'" :is="filterElement" :field="field" :index="i"/>
+                            <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
                             <div v-if="i !== 0">
                                 <CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"></CFButton>
                             </div>
@@ -54,7 +54,7 @@ import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
 
 export default {
-    emits: ['filtermeta-change'],
+    emits: ['filter-change', 'filter-apply'],
     props: {
         field: {
             type: String,
@@ -150,12 +150,12 @@ export default {
                 _filters[this.field].matchMode = this.defaultMatchMode;
             }
             
-            this.$emit('filtermeta-change', _filters);
+            this.$emit('filter-change', _filters);
+            this.$emit('filter-apply');
             this.hide();
         },
         applyFilter() {
-            let _filters = {...this.filters};
+            this.$emit('filter-apply');
-            this.$emit('filtermeta-change', _filters);
             this.hide();
         },
         hasFilter() {
@@ -215,7 +215,8 @@ export default {
         onRowMatchModeChange(matchMode) {
             let _filters = {...this.filters};
             _filters[this.field].matchMode = matchMode;
-            this.$emit('filtermeta-change', _filters);
+            this.$emit('filter-change', _filters);
+            this.$emit('filter-apply');
             this.hide();
         },
         onRowMatchModeKeyDown(event) {
@@ -248,6 +249,37 @@ export default {
         isRowMatchModeSelected(matchMode) {
             return (this.filters[this.field]).matchMode === matchMode;
         },
+        onOperatorChange(value) {
+            let _filters = {...this.filters};
+            _filters[this.field].forEach(filterMeta => {
+                filterMeta.operator = value;
+            });
+
+            if (!this.showApplyButton) {
+                this.$emit('filter-change', _filters);
+            }
+        },
+        onMenuMatchModeChange(value, index) {
+            let _filters = {...this.filters};
+            _filters[this.field][index].matchMode = value;
+
+            if (!this.showApplyButton) {
+                this.$emit('filter-change', _filters);
+            }
+        },
+        addConstraint() {
+            let _filters = {...this.filters};
+            _filters[this.field].push({value: null, matchMode: this.defaultMatchMode});
+            this.$emit('filter-change', _filters);
+        },
+        removeConstraint(index) {
+            let _filters = {...this.filters};
+            _filters[this.field].splice(index, 1);
+            this.$emit('filter-change', _filters);
+        },
+        filterCallback() {
+            this.$emit('filter-apply');
+        },
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
@@ -340,34 +372,6 @@ export default {
                 window.removeEventListener('resize', this.resizeListener);
                 this.resizeListener = null;
             }
-        },
-        onOperatorChange(value) {
-            let _filters = {...this.filters};
-            _filters[this.field].forEach(filterMeta => {
-                filterMeta.operator = value;
-            });
-
-            if (!this.showApplyButton) {
-                this.$emit('filtermeta-change', _filters);
-            }
-        },
-        onMenuMatchModeChange(value, index) {
-            let _filters = {...this.filters};
-            _filters[this.field][index].matchMode = value;
-
-            if (!this.showApplyButton) {
-                this.$emit('filtermeta-change', _filters);
-            }
-        },
-        addConstraint() {
-            let _filters = {...this.filters};
-            _filters[this.field].push({value: null, matchMode: this.defaultMatchMode});
-            this.$emit('filtermeta-change', _filters);
-        },
-        removeConstraint(index) {
-            let _filters = {...this.filters};
-            _filters[this.field].splice(index, 1);
-            this.$emit('filtermeta-change', _filters);
         }
     },
     computed: {

src/components/datatable/DataTable.vue

@@ -20,8 +20,8 @@
             <table ref="table" role="grid">
                 <DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
                         :groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
-                        :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="filters" :filterDisplay="filterDisplay"
+                        :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filterDisplay="filterDisplay"
-                        @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filtermeta-change="onFilterMetaChange"
+                        @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
                         @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
                 <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
@@ -372,10 +372,6 @@ export default {
         virtualScrollDelay: {
             type: Number,
             default: 150
-        },
-        filterLayout: {
-            type: String,
-            default: null
         }
     },
     data() {
@@ -388,7 +384,8 @@ export default {
             d_selectionKeys: null,
             d_expandedRowKeys: null,
             d_columnOrder: null,
-            d_editingRowKeys: null
+            d_editingRowKeys: null,
+            d_filters: this.cloneFilters(this.filters)
         };
     },
     rowTouched: false,
@@ -439,6 +436,9 @@ export default {
             if (this.dataKey) {
                 this.updateEditingRowKeys(newValue);
             }
+        },
+        filters(newValue) {
+            this.d_filters = this.cloneFilters(newValue);
         }
     },
     beforeMount() {
@@ -1703,8 +1703,23 @@ export default {
         getChildren() {
             return this.$slots.default ? this.$slots.default() : null;
         },
-        onFilterMetaChange(event) {
+        onFilterChange(filters) {
-            this.$emit('update:filters', event)
+            this.d_filters = filters;
+        },
+        onFilterApply() {
+            this.$emit('update:filters', this.d_filters);
+        },
+        cloneFilters() {
+            let cloned = {};
+            if (this.filters) {
+                for (let prop in this.filters) {
+                    if (Object.prototype.hasOwnProperty.call(this.filters, prop)) {
+                        cloned[prop] = {...this.filters[prop]};
+                    }
+                }
+            }
+
+            return cloned;
         }
     },
     computed: {

src/components/datatable/TableHeader.vue

@@ -17,7 +17,7 @@
                             <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
                             <DTColumnFilter v-if="filterDisplay === 'menu' && filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"  
                             :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
-                            :filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)"
+                            :filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
                             :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
                             :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
                         </div>
@@ -30,7 +30,7 @@
                         :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
                         <DTColumnFilter v-if="filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="row"  
                         :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
-                        :filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)"
+                        :filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
                         :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
                         :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />
@@ -62,7 +62,7 @@ import ColumnFilter from './ColumnFilter';
 
 export default {
     emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
-            'column-resizestart', 'checkbox-change', 'column-click','filtermeta-change'],
+            'column-resizestart', 'checkbox-change', 'column-click','filter-change', 'filter-apply'],
     props: {
 		columnGroup: {
             type: null,

src/views/datatable/DataTableFilterDemo.vue

@@ -10,9 +10,9 @@
 		<div class="content-section implementation">
             <div class="card">
                 <h5>Filter Menu</h5>
-                <p>Filters are displayed in an overlay..</p>
+                <p>Filters are displayed in an overlay.</p>
                 <DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
-                    dataKey="id" :filters="filters1" filterDisplay="menu" :loading="loading1">
+                    dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1">
                     <template #header>
                         <div class="p-d-flex p-jc-between">
                             <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
@@ -29,33 +29,33 @@
                         Loading customers data. Please wait.
                     </template>
                     <Column field="name" header="Name">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Name</span>
-                            {{slotProps.data.name}}
+                            {{data.name}}
                         </template>
-                        <template #filter="{index}">
+                        <template #filter="{filterModel}">
-                            <InputText type="text" v-model="filters1['name'][index].value" class="p-column-filter" placeholder="Search by name"/>
+                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
                     <Column header="Country" filterField="country.name">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Country</span>
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
-                            <span class="image-text">{{slotProps.data.country.name}}</span>
+                            <span class="image-text">{{data.country.name}}</span>
                         </template>
-                        <template #filter="{index}">
+                        <template #filter="{filterModel}">
-                            <InputText type="text" v-model="filters1['country.name'][index].value" class="p-column-filter" placeholder="Search by country"/>
+                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Agent</span>
-                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
-                            <span class="image-text">{{slotProps.data.representative.name}}</span>
+                            <span class="image-text">{{data.representative.name}}</span>
                         </template>
-                        <template #filter>
+                        <template #filter="{filterModel,filterCallback}">
                             <div class="p-mb-3 p-text-bold">Agent Picker</div>
-                            <MultiSelect v-model="filters1['representative'].value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                            <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
                                         <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
@@ -66,30 +66,30 @@
                         </template>
                     </Column>
                     <Column header="Date" filterField="date" dataType="date">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Date</span>
-                            {{slotProps.data.date}}
+                            {{data.date}}
                         </template>
-                        <template #filter="{index}">
+                        <template #filter="{filterModel}">
-                            <Calendar v-model="filters1['date'][index].value" dateFormat="mm/dd/yy" />
+                            <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" />
                         </template>
                     </Column>
                     <Column header="Balance" filterField="balance" dataType="numeric">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Balance</span>
-                            {{formatCurrency(slotProps.data.balance)}}
+                            {{formatCurrency(data.balance)}}
                         </template>
-                        <template #filter="{index}">
+                        <template #filter="{filterModel}">
-                            <InputNumber v-model="filters1['balance'][index].value" mode="currency" currency="USD" locale="en-US" />
+                            <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
                         </template>
                     </Column>
                     <Column field="status" header="Status">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Status</span>
-                            <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                            <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
-                        <template #filter="{index}">
+                        <template #filter="{filterModel}">
-                            <Dropdown v-model="filters1['status'][index].value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
+                            <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
                                 <template #option="slotProps">
                                     <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
                                 </template>
@@ -97,12 +97,12 @@
                         </template>
                     </Column>
                     <Column field="activity" header="Activity" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Status</span>
-                            <ProgressBar :value="slotProps.data.activity" :showValue="false"></ProgressBar>
+                            <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
                         </template>
-                        <template #filter>
+                        <template #filter={filterModel,filterCallback}>
-                            <Slider v-model="filters1['activity'].value" range class="p-m-3"></Slider>
+                            <Slider v-model="filterModel.value" range @slideend="filterCallback()" class="p-m-3"></Slider>
                             <div class="p-d-flex p-ai-center p-jc-between p-px-2">
                                 <span>{{filters1['activity'].value[0]}}</span>
                                 <span>{{filters1['activity'].value[1]}}</span>
@@ -110,12 +110,12 @@
                         </template>
                     </Column>
                     <Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Verified</span>
-                            <i class="pi" :class="{'true-icon pi-check-circle': slotProps.data.verified, 'false-icon pi-times-circle': !slotProps.data.verified}"></i>
+                            <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                         </template>
-                        <template #filter>
+                        <template #filter={filterModel,filterCallback}>
-                            <TriStateCheckbox v-model="filters1['verified'].value" />
+                            <TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
                         </template>
                     </Column>
                 </DataTable>
@@ -125,7 +125,7 @@
                 <h5>Filter Row</h5>
                 <p>Filters are displayed inline within a separate row.</p>
                 <DataTable :value="customers2" :paginator="true" class="p-datatable-customers" :rows="10"
-                    dataKey="id" :filters="filters2" filterDisplay="row" :loading="loading2">
+                    dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2">
                     <template #header>
                         <div class="p-d-flex p-jc-end">
                             <span class="p-input-icon-left ">
@@ -141,32 +141,32 @@
                         Loading customers data. Please wait.
                     </template>
                     <Column field="name" header="Name">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Name</span>
-                            {{slotProps.data.name}}
+                            {{data.name}}
                         </template>
-                        <template #filter>
+                        <template #filter="{filterModel,filterCallback}">
-                            <InputText type="text" v-model="filters2['name'].value" class="p-column-filter" placeholder="Search by name"/>
+                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
                     <Column header="Country" filterField="country.name">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Country</span>
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
-                            <span class="image-text">{{slotProps.data.country.name}}</span>
+                            <span class="image-text">{{data.country.name}}</span>
                         </template>
-                        <template #filter>
+                        <template #filter="{filterModel,filterCallback}">
-                            <InputText type="text" v-model="filters2['country.name'].value" class="p-column-filter" placeholder="Search by country"/>
+                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMenu="false">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Agent</span>
-                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
-                            <span class="image-text">{{slotProps.data.representative.name}}</span>
+                            <span class="image-text">{{data.representative.name}}</span>
                         </template>
-                        <template #filter>
+                        <template #filter="{filterModel,filterCallback}">
-                            <MultiSelect v-model="filters2['representative'].value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                            <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
                                         <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
@@ -177,12 +177,12 @@
                         </template>
                     </Column>
                     <Column field="status" header="Status" :showFilterMenu="false">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Status</span>
-                            <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                            <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
-                        <template #filter>
+                        <template #filter="{filterModel,filterCallback}">
-                            <Dropdown v-model="filters2['status'].value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
+                            <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
                                 <template #option="slotProps">
                                     <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
                                 </template>
@@ -190,12 +190,12 @@
                         </template>
                     </Column>
                     <Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 6rem">
-                        <template #body="slotProps">
+                        <template #body="{data}">
                             <span class="p-column-title">Verified</span>
-                            <i class="pi" :class="{'true-icon pi-check-circle': slotProps.data.verified, 'false-icon pi-times-circle': !slotProps.data.verified}"></i>
+                            <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                         </template>
-                        <template #filter>
+                        <template #filter="{filterModel,filterCallback}">
-                            <TriStateCheckbox v-model="filters2['verified'].value" />
+                            <TriStateCheckbox v-model="filterModel.value" @change="filterCallback()"/>
                         </template>
                     </Column>
                 </DataTable>