diff --git a/packages/primevue/src/datatable/FilterHeaderCell.vue b/packages/primevue/src/datatable/FilterHeaderCell.vue
new file mode 100644
index 000000000..fba8e51dc
--- /dev/null
+++ b/packages/primevue/src/datatable/FilterHeaderCell.vue
@@ -0,0 +1,190 @@
+<template>
+    <th
+        v-if="!columnProp('hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp('field'))"
+        :style="getFilterColumnHeaderStyle"
+        :class="getFilterColumnHeaderClass"
+        v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
+        :data-p-frozen-column="columnProp('frozen')"
+    >
+        <DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="column" :unstyled="unstyled" :pt="pt" />
+        <DTColumnFilter
+            v-if="column.children && column.children.filter"
+            :field="columnProp('filterField') || columnProp('field')"
+            :type="columnProp('dataType')"
+            display="row"
+            :showMenu="columnProp('showFilterMenu')"
+            :filterElement="column.children && column.children.filter"
+            :filterHeaderTemplate="column.children && column.children.filterheader"
+            :filterFooterTemplate="column.children && column.children.filterfooter"
+            :filterClearTemplate="column.children && column.children.filterclear"
+            :filterApplyTemplate="column.children && column.children.filterapply"
+            :filterIconTemplate="column.children && column.children.filtericon"
+            :filterAddIconTemplate="column.children && column.children.filteraddicon"
+            :filterRemoveIconTemplate="column.children && column.children.filterremoveicon"
+            :filterClearIconTemplate="column.children && column.children.filterclearicon"
+            :filters="filters"
+            :filtersStore="filtersStore"
+            :filterInputProps="filterInputProps"
+            :filterButtonProps="filterButtonProps"
+            @filter-change="$emit('filter-change', $event)"
+            @filter-apply="$emit('filter-apply')"
+            :filterMenuStyle="columnProp('filterMenuStyle')"
+            :filterMenuClass="columnProp('filterMenuClass')"
+            :showOperator="columnProp('showFilterOperator')"
+            :showClearButton="columnProp('showClearButton')"
+            :showApplyButton="columnProp('showApplyButton')"
+            :showMatchModes="columnProp('showFilterMatchModes')"
+            :showAddButton="columnProp('showAddButton')"
+            :matchModeOptions="columnProp('filterMatchModeOptions')"
+            :maxConstraints="columnProp('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)"
+            :column="column"
+            :unstyled="unstyled"
+            :pt="pt"
+        />
+    </th>
+</template>
+
+<script>
+import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
+import BaseComponent from '@primevue/core/basecomponent';
+import { getVNodeProp } from '@primevue/core/utils';
+import { mergeProps } from 'vue';
+import ColumnFilter from './ColumnFilter.vue';
+import HeaderCheckbox from './HeaderCheckbox.vue';
+
+export default {
+    name: 'FilterHeaderCell',
+    hostName: 'DataTable',
+    extends: BaseComponent,
+    emits: ['checkbox-change', 'filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'apply-click'],
+    props: {
+        column: {
+            type: Object,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: null
+        },
+        allRowsSelected: {
+            type: Boolean,
+            default: false
+        },
+        empty: {
+            type: Boolean,
+            default: false
+        },
+        display: {
+            type: String,
+            default: 'row'
+        },
+        filters: {
+            type: Object,
+            default: null
+        },
+        filtersStore: {
+            type: Object,
+            default: null
+        },
+        rowGroupMode: {
+            type: String,
+            default: null
+        },
+        groupRowsBy: {
+            type: [Array, String, Function],
+            default: null
+        },
+        filterInputProps: {
+            type: null,
+            default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    data() {
+        return {
+            styleObject: {}
+        };
+    },
+    mounted() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    updated() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    methods: {
+        columnProp(prop) {
+            return getVNodeProp(this.column, prop);
+        },
+        getColumnPT(key) {
+            if (!this.column) return null;
+
+            const columnMetaData = {
+                props: this.column.props,
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index: this.index
+                }
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
+        },
+        updateStickyPosition() {
+            if (this.columnProp('frozen')) {
+                let align = this.columnProp('alignFrozen');
+
+                if (align === 'right') {
+                    let pos = 0;
+                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
+
+                    if (next) {
+                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);
+                    }
+
+                    this.styleObject.insetInlineEnd = pos + 'px';
+                } else {
+                    console.log(getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'));
+                    let pos = 0;
+                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
+
+                    if (prev) {
+                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);
+                    }
+
+                    this.styleObject.insetInlineStart = pos + 'px';
+                }
+            }
+        }
+    },
+    computed: {
+        getFilterColumnHeaderClass() {
+            return [this.cx('headerCell', { column: this.column }), this.columnProp('filterHeaderClass'), this.columnProp('class')];
+        },
+        getFilterColumnHeaderStyle() {
+            return this.columnProp('frozen') ? [this.columnProp('filterHeaderStyle'), this.columnProp('style'), this.styleObject] : [this.columnProp('filterHeaderStyle'), this.columnProp('style')];
+        }
+    },
+    components: {
+        DTHeaderCheckbox: HeaderCheckbox,
+        DTColumnFilter: ColumnFilter
+    }
+};
+</script>
diff --git a/packages/primevue/src/datatable/TableHeader.vue b/packages/primevue/src/datatable/TableHeader.vue
index a52c4f424..ee6529ed8 100755
--- a/packages/primevue/src/datatable/TableHeader.vue
+++ b/packages/primevue/src/datatable/TableHeader.vue
@@ -79,53 +79,28 @@
         </template>
         <tr v-if="filterDisplay === 'row'" role="row" v-bind="ptm('headerRow')">
             <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
-                <th
+                <DTFilterHeaderCell
                     v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
-                    :style="getFilterColumnHeaderStyle(col)"
-                    :class="getFilterColumnHeaderClass(col)"
-                    v-bind="{ ...getColumnPT(col, 'root', i), ...getColumnPT(col, 'headerCell', i) }"
-                >
-                    <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :unstyled="unstyled" :pt="pt" />
-                    <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"
-                        :filterHeaderTemplate="col.children && col.children.filterheader"
-                        :filterFooterTemplate="col.children && col.children.filterfooter"
-                        :filterClearTemplate="col.children && col.children.filterclear"
-                        :filterApplyTemplate="col.children && col.children.filterapply"
-                        :filterIconTemplate="col.children && col.children.filtericon"
-                        :filterAddIconTemplate="col.children && col.children.filteraddicon"
-                        :filterRemoveIconTemplate="col.children && col.children.filterremoveicon"
-                        :filterClearIconTemplate="col.children && col.children.filterclearicon"
-                        :filters="filters"
-                        :filtersStore="filtersStore"
-                        :filterInputProps="filterInputProps"
-                        :filterButtonProps="filterButtonProps"
-                        @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')"
-                        @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)"
-                        :column="col"
-                        :unstyled="unstyled"
-                        :pt="pt"
-                    />
-                </th>
+                    :column="col"
+                    :index="i"
+                    :allRowsSelected="allRowsSelected"
+                    :empty="empty"
+                    display="row"
+                    :filters="filters"
+                    :filtersStore="filtersStore"
+                    :filterInputProps="filterInputProps"
+                    :filterButtonProps="filterButtonProps"
+                    @filter-change="$emit('filter-change', $event)"
+                    @filter-apply="$emit('filter-apply')"
+                    @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)"
+                    @change="$emit('checkbox-change', $event)"
+                    :unstyled="unstyled"
+                    :pt="pt"
+                />
             </template>
         </tr>
     </thead>
@@ -135,9 +110,8 @@
 import BaseComponent from '@primevue/core/basecomponent';
 import { HelperSet, getVNodeProp } from '@primevue/core/utils';
 import { mergeProps } from 'vue';
-import ColumnFilter from './ColumnFilter.vue';
+import FilterHeaderCell from './FilterHeaderCell.vue';
 import HeaderCell from './HeaderCell.vue';
-import HeaderCheckbox from './HeaderCheckbox.vue';
 
 export default {
     name: 'TableHeader',
@@ -338,8 +312,7 @@ export default {
     },
     components: {
         DTHeaderCell: HeaderCell,
-        DTHeaderCheckbox: HeaderCheckbox,
-        DTColumnFilter: ColumnFilter
+        DTFilterHeaderCell: FilterHeaderCell
     }
 };
 </script>
diff --git a/packages/primevue/src/datatable/style/DataTableStyle.js b/packages/primevue/src/datatable/style/DataTableStyle.js
index 34d1b3ca8..525db9d6b 100644
--- a/packages/primevue/src/datatable/style/DataTableStyle.js
+++ b/packages/primevue/src/datatable/style/DataTableStyle.js
@@ -620,11 +620,11 @@ const classes = {
     ],
     thead: 'p-datatable-thead',
     headerCell: ({ instance, props, column }) =>
-        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
+        column && !instance.columnProp('hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
             ? [
                   'p-datatable-header-cell',
                   {
-                      'p-datatable-frozen-column': instance.columnProp(column, 'frozen')
+                      'p-datatable-frozen-column': instance.columnProp('frozen')
                   }
               ]
             : [
@@ -653,7 +653,7 @@ const classes = {
     filterElementContainer: 'p-datatable-filter-element-container',
     pcColumnFilterButton: 'p-datatable-column-filter-button',
     pcColumnFilterClearButton: 'p-datatable-column-filter-clear-button',
-    filterOverlay: ({ instance, props }) => [
+    filterOverlay: ({ props }) => [
         'p-datatable-filter-overlay p-component',
         {
             'p-datatable-filter-overlay-popover': props.display === 'menu'