diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index d77fb1e71..fccfc7f4b 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -28,7 +28,7 @@
                             <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" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
-                            <div v-if="i !== 0">
+                            <div>
                                 <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>
                         </div>
@@ -129,9 +129,9 @@ export default {
     mounted() {
         if (this.filters && this.filters[this.field]) {
             let fieldFilters = this.filters[this.field];
-            if (Array.isArray(fieldFilters)) {
-                this.defaultMatchMode = this.filters[this.field][0].matchMode;
-                this.defaultOperator = this.filters[this.field][0].operator;
+            if (fieldFilters.operator) {
+                this.defaultMatchMode = this.filters[this.field].constraints[0].matchMode;
+                this.defaultOperator = this.filters[this.field].operator;
             }
             else {
                 this.defaultMatchMode = this.filters[this.field].matchMode;
@@ -141,9 +141,9 @@ export default {
     methods: {
         clearFilter() {
             let _filters = {...this.filters};
-             if (Array.isArray(_filters[this.field])) {
-                _filters[this.field].splice(1);
-                _filters[this.field][0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator};
+            if (_filters[this.field].operator) {
+                _filters[this.field].constraints.splice(1);
+                _filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator};
             }
             else {
                 _filters[this.field].value = null;
@@ -161,8 +161,8 @@ export default {
         hasFilter() {
             let fieldFilter = this.filters[this.field];
             if (fieldFilter) {
-                if (Array.isArray(fieldFilter))
-                    return !this.isFilterBlank(fieldFilter[0].value); 
+                if (fieldFilter.operator)
+                    return !this.isFilterBlank(fieldFilter.constraints[0].value); 
                 else
                     return !this.isFilterBlank(fieldFilter.value);
             }
@@ -251,17 +251,17 @@ export default {
         },
         onOperatorChange(value) {
             let _filters = {...this.filters};
-            _filters[this.field].forEach(filterMeta => {
-                filterMeta.operator = value;
-            });
+            _filters[this.field].operator = value;
+            this.$emit('filter-change', _filters);
 
             if (!this.showApplyButton) {
-                this.$emit('filter-change', _filters);
+                this.$emit('filter-apply');
             }
+            
         },
         onMenuMatchModeChange(value, index) {
             let _filters = {...this.filters};
-            _filters[this.field][index].matchMode = value;
+            _filters[this.field].constraints[index].matchMode = value;
 
             if (!this.showApplyButton) {
                 this.$emit('filter-change', _filters);
@@ -269,12 +269,12 @@ export default {
         },
         addConstraint() {
             let _filters = {...this.filters};
-            _filters[this.field].push({value: null, matchMode: this.defaultMatchMode});
+            _filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode});
             this.$emit('filter-change', _filters);
         },
         removeConstraint(index) {
             let _filters = {...this.filters};
-            _filters[this.field].splice(index, 1);
+            _filters[this.field].constraints.splice(index, 1);
             this.$emit('filter-change', _filters);
         },
         filterCallback() {
@@ -408,10 +408,10 @@ export default {
             return this.showOperator && this.type !== 'boolean';
         },
         operator() {
-            return this.filters[this.field][0].operator;
+            return this.filters[this.field].operator;
         },
         fieldConstraints() {
-            return Array.isArray(this.filters[this.field]) ? this.filters[this.field] : [this.filters[this.field]];
+            return this.filters[this.field].constraints || [this.filters[this.field]];
         },
         showRemoveIcon() {
             return this.fieldConstraints.length > 1;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 908745be2..9732fa6f6 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -622,11 +622,11 @@ export default {
                         let filterField = prop;
                         let filterMeta = this.filters[filterField];
 
-                        if (Array.isArray(filterMeta)) {
-                            for (let meta of filterMeta) {
-                                localMatch = this.executeLocalFilter(filterField, data[i], meta);
+                        if (filterMeta.operator) {
+                            for (let filterConstraint of filterMeta.constraints) {
+                                localMatch = this.executeLocalFilter(filterField, data[i], filterConstraint);
 
-                                if ((meta.operator === FilterOperator.OR && localMatch) || (meta.operator === FilterOperator.AND && !localMatch)) {
+                                if ((filterMeta.operator === FilterOperator.OR && localMatch) || (filterMeta.operator === FilterOperator.AND && !localMatch)) {
                                     break;
                                 }
                             }
@@ -1712,11 +1712,7 @@ export default {
         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]};
-                    }
-                }
+                cloned = JSON.parse(JSON.stringify(this.filters));
             }
 
             return cloned;
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 2f64f9d5e..c00549e45 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -15,7 +15,7 @@
                             <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
                             <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
                             <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"  
+                            <DTColumnFilter v-if="filterDisplay === 'menu' && col.children && col.children.filter" :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" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
                             :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
@@ -24,11 +24,11 @@
                     </th>
                 </template>
             </tr>
-            <tr v-if="filters && filterDisplay === 'row'">
+            <tr v-if="filterDisplay === 'row'">
                 <template v-for="(col,i) of columns">
                     <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"
                         :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"  
+                        <DTColumnFilter v-if="col.children && col.children.filter" :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" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
                         :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
@@ -43,7 +43,7 @@
                 <th v-for="(col,i) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" :tabindex="columnProp(col, 'sortable') ? '0' : null"
                     @click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
                     :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)">
-                   <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
+                    <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
                     <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
                     <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
                     <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 1cfb3e702..2bae77990 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -53,9 +53,9 @@
                             <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{data.representative.name}}</span>
                         </template>
-                        <template #filter="{filterModel,filterCallback}">
+                        <template #filter="{filterModel}">
                             <div class="p-mb-3 p-text-bold">Agent Picker</div>
-                            <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                            <MultiSelect v-model="filterModel.value" :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" />
@@ -101,8 +101,8 @@
                             <span class="p-column-title">Status</span>
                             <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
                         </template>
-                        <template #filter={filterModel,filterCallback}>
-                            <Slider v-model="filterModel.value" range @slideend="filterCallback()" class="p-m-3"></Slider>
+                        <template #filter={filterModel}>
+                            <Slider v-model="filterModel.value" range 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>
@@ -114,8 +114,8 @@
                             <span class="p-column-title">Verified</span>
                             <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                         </template>
-                        <template #filter={filterModel,filterCallback}>
-                            <TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
+                        <template #filter={filterModel}>
+                            <TriStateCheckbox v-model="filterModel.value" />
                         </template>
                     </Column>
                 </DataTable>
@@ -130,7 +130,7 @@
                         <div class="p-d-flex p-jc-end">
                             <span class="p-input-icon-left ">
                                 <i class="pi pi-search" />
-                                <InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
+                                <InputText v-model="filters2['global'].value" placeholder="Keyword Search" v-if="false" />
                             </span>
                         </div>
                     </template>
@@ -274,12 +274,12 @@ export default {
         initFilters1() {
             this.filters1 = {
                 'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
-                'name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
-                'country.name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
+                'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
+                'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
                 'representative': {value: null, matchMode: FilterMatchMode.IN},
-                'date': [{value: null, matchMode: FilterMatchMode.IS, operator: FilterOperator.AND}],
-                'balance': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
-                'status': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
+                'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]},
+                'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
+                'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
                 'activity': {value: [0,100], matchMode: FilterMatchMode.BETWEEN},
                 'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
             }