diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 836382e73..ec66a614d 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -54,7 +54,7 @@ import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
 
 export default {
-    emits: ['filter-change', 'filter-apply'],
+    emits: ['filter-change','filter-apply','operator-change','matchmode-change','constraint-add','constraint-remove','filter-clear','apply-click'],
     props: {
         field: {
             type: String,
@@ -163,11 +163,13 @@ export default {
                 _filters[this.field].matchMode = this.defaultMatchMode;
             }
             
+            this.$emit('filter-clear');
             this.$emit('filter-change', _filters);
             this.$emit('filter-apply');
             this.hide();
         },
         applyFilter() {
+            this.$emit('apply-click', {field: this.field, constraints: this.filters[this.field]});
             this.$emit('filter-apply');
             this.hide();
         },
@@ -230,6 +232,7 @@ export default {
         onRowMatchModeChange(matchMode) {
             let _filters = {...this.filters};
             _filters[this.field].matchMode = matchMode;
+            this.$emit('matchmode-change', {field: this.field, matchMode: matchMode});
             this.$emit('filter-change', _filters);
             this.$emit('filter-apply');
             this.hide();
@@ -269,14 +272,15 @@ export default {
             _filters[this.field].operator = value;
             this.$emit('filter-change', _filters);
 
+            this.$emit('operator-change', {field: this.field, operator: value});
             if (!this.showApplyButton) {
                 this.$emit('filter-apply');
             }
-            
         },
         onMenuMatchModeChange(value, index) {
             let _filters = {...this.filters};
             _filters[this.field].constraints[index].matchMode = value;
+            this.$emit('matchmode-change', {field: this.field, matchMode: value, index: index});
 
             if (!this.showApplyButton) {
                 this.$emit('filter-apply');
@@ -284,7 +288,9 @@ export default {
         },
         addConstraint() {
             let _filters = {...this.filters};
-            _filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode});
+            let newConstraint = {value: null, matchMode: this.defaultMatchMode};
+            _filters[this.field].constraints.push(newConstraint);
+            this.$emit('constraint-add', {field: this.field, constraing: newConstraint});
             this.$emit('filter-change', _filters);
 
             if (!this.showApplyButton) {
@@ -293,7 +299,8 @@ export default {
         },
         removeConstraint(index) {
             let _filters = {...this.filters};
-            _filters[this.field].constraints.splice(index, 1);
+            let removedConstraint = _filters[this.field].constraints.splice(index, 1);
+            this.$emit('constraint-remove', {field: this.field, constraing: removedConstraint});
             this.$emit('filter-change', _filters);
 
             if (!this.showApplyButton) {
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 9fb526365..299dd29d3 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -82,7 +82,9 @@
                         :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta"
                         @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
                         @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
-                        @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
+                        @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)"
+                        @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change',$event)"
+                        @constraint-add="$emit('constraint-add',$event)" @constraint-remove="$emit('constraint-remove',$event)" @apply-click="$emit('apply-click',$event)" />
                 </template>
                 <template #body="slotProps">
                     <DTTableBody :value="dataToRender" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
@@ -143,7 +145,8 @@ export default {
         'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
         'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
         'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'virtual-scroll', 'state-restore', 'state-save',
-        'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
+        'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
+        'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
         value: {
             type: Array,
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 674ee1bac..4974fc923 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -19,7 +19,8 @@
                             :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
                             :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')"
                             :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')" />
+                            :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')"
+                            @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
                         </div>
                     </th>
                 </template>
@@ -32,7 +33,8 @@
                         :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
                         :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')"
                         :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')" />
+                        :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" 
+                        @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />
                     </th>
                 </template>
@@ -62,7 +64,8 @@ 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','filter-change', 'filter-apply'],
+            'column-resizestart', 'checkbox-change', 'column-click','filter-change', 'filter-apply', 
+            'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
 		columnGroup: {
             type: null,