Add filterMenuStyle and filterMenuClass

src/components/column/Column.d.ts

@@ -16,6 +16,8 @@ declare class Column extends Vue {
     footerClass?: string;
     filterHeaderStyle?: object;
     filterHeaderClass?: string;
+    filterMenuStyle?: object;
+    filterMenuClass?: string;
     filterFunction?: Function;
     excludeGlobalFilter?: boolean;
     selectionMode?: string;

src/components/column/Column.vue

@@ -104,7 +104,15 @@ export default {
         },
         filterHeaderStyle: {
             type: null,
-            default: false
+            default: null
+        },
+        filterMenuClass: {
+            type: String,
+            default: null
+        },
+        filterMenuStyle: {
+            type: null,
+            default: null
         },
         selectionMode: {
             type: String,

src/components/datatable/ColumnFilter.vue

@@ -8,7 +8,7 @@
             @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
         <button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-            <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
+            <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" :style="filterMenuStyle">
                 <component :is="filterHeader" :field="field" />
                 <template v-if="display === 'row'">
                     <ul class="p-column-filter-row-items">
@@ -110,6 +110,14 @@ export default {
         filters: {
             type: Object,
             default: null
+        },
+        filterMenuClass: {
+            type: String,
+            default: null
+        },
+        filterMenuStyle: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -265,18 +273,26 @@ export default {
             _filters[this.field].constraints[index].matchMode = value;
 
             if (!this.showApplyButton) {
-                this.$emit('filter-change', _filters);
+                this.$emit('filter-apply');
             }
         },
         addConstraint() {
             let _filters = {...this.filters};
             _filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode});
             this.$emit('filter-change', _filters);
+
+            if (!this.showApplyButton) {
+                this.$emit('filter-apply');
+            }
         },
         removeConstraint(index) {
             let _filters = {...this.filters};
             _filters[this.field].constraints.splice(index, 1);
             this.$emit('filter-change', _filters);
+
+            if (!this.showApplyButton) {
+                this.$emit('filter-apply');
+            }
         },
         filterCallback() {
             this.$emit('filter-apply');
@@ -386,7 +402,7 @@ export default {
             ]
         },
         overlayClass() {
-            return {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'};
+            return [this.filterMenuyClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
         },
         showMenuButton() {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);

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' && 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')"
+                            :filters="filters" @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')" />
                         </div>
@@ -30,7 +30,7 @@
                         :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
                         <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')"
+                        :filters="filters" @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')" />
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />

src/views/datatable/DataTableFilterDemo.vue

@@ -84,13 +84,16 @@
                             <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
                         </template>
                     </Column>
-                    <Column field="status" header="Status">
+                    <Column field="status" header="Status" filterMenuStyle="min-width:14rem">
                         <template #body="{data}">
                             <span class="p-column-title">Status</span>
                             <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
                         <template #filter="{filterModel}">
                             <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
+                                <template #value="slotProps">
+                                    <span :class="'customer-badge status-' + slotProps.value">{{slotProps.value}}</span>
+                                </template>
                                 <template #option="slotProps">
                                     <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
                                 </template>