diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 09531bae8..f36037946 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/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" :style="filterMenuStyle">
+            <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
                 <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                 <template v-if="display === 'row'">
                     <ul class="p-column-filter-row-items">
@@ -342,6 +342,11 @@ export default {
             document.body.appendChild(this.overlay);
             this.overlay.style.zIndex = String(DomHandler.generateZIndex());
             DomHandler.absolutePosition(this.overlay, this.$refs.icon);
+            if (this.filterMenuStyle) {
+                for (let prop in this.filterMenuStyle) {
+                    this.overlay.style[prop] = this.filterMenuStyle[prop];
+                }
+            }
             this.bindOutsideClickListener();
             this.bindScrollListener();
             this.bindResizeListener();
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 599749a53..fc8ae3b19 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -57,7 +57,7 @@
                             <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
                         </template>
                     </Column>
-                    <Column header="Agent" filterField="representative" :showFilterMatchModes="false" filterMenuStyle="width:14rem">
+                    <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
                         <template #body="{data}">
                             <span class="p-column-title">Agent</span>
                             <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
@@ -93,7 +93,7 @@
                             <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
                         </template>
                     </Column>
-                    <Column field="status" header="Status" filterMenuStyle="min-width:14rem">
+                    <Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}">
                         <template #body="{data}">
                             <span class="p-column-title">Status</span>
                             <span :class="'customer-badge status-' + data.status">{{data.status}}</span>