diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
index 79b2ac631b..9131621730 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
@@ -143,6 +143,7 @@ $root: ".widget-datagrid";
         /* Header filter */
         .filter {
             display: flex;
+            overflow: hidden;
             margin-top: 4px;
             > .form-group {
                 margin-bottom: 0;
@@ -304,6 +305,7 @@ $root: ".widget-datagrid";
 :where(.table .th .filter input:not([type="checkbox"])) {
     font-weight: normal;
     flex-grow: 1;
+    min-width: 0;
     width: 100%;
 }
 
@@ -591,6 +593,29 @@ $root: ".widget-datagrid";
 
 .grid-mock-header {
     display: contents;
+
+    span {
+        visibility: hidden;
+        height: 0;
+        display: block;
+        overflow: hidden;
+    }
+}
+
+// Filter-aware min-content sizing for MockHeader cells.
+// The data-filter attribute is set by React based on the column's filter type.
+// The ::after pseudo-element establishes an invisible minimum intrinsic width
+// that CSS Grid's minmax(auto, 1fr) respects as a floor.
+.grid-mock-header > [data-filter]::after {
+    content: "";
+    display: block;
+    visibility: hidden;
+    height: 0;
+    width: 100px;
+}
+
+.grid-mock-header > [data-filter="date"]::after {
+    width: 175px;
 }
 
 :where(#{$root}-paging-bottom, #{$root}-padding-top) {
diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
index 7144838bb3..70f3a22dd4 100644
--- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where columns could be resized narrower than their header filter widget required, making filters unusable.
+
 ## [3.8.1] - 2026-02-19
 
 ### Fixed
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx
index 8bdcf304b9..7fd430713b 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx
@@ -38,16 +38,22 @@ export function MockHeader(): ReactNode {
     return (
         <div className={"grid-mock-header"} aria-hidden>
             {config.checkboxColumnEnabled && <div data-column-id="checkboxes" key={"checkboxes"}></div>}
-            {columnsStore.visibleColumns.map(c => (
-                <div
-                    data-column-id={c.columnId}
-                    key={c.columnId}
-                    // we set header ref here instead of the real header
-                    // as this mock header is aligned with CSS grid, so it is more reliable
-                    // the real header is aligned programmatically based on this header
-                    ref={ref => c.setHeaderElementRef(ref)}
-                ></div>
-            ))}
+            {columnsStore.visibleColumns.map(c => {
+                const filterType = columnsStore.columnFilters[c.columnIndex]?.filterType;
+                return (
+                    <div
+                        data-column-id={c.columnId}
+                        key={c.columnId}
+                        // we set header ref here instead of the real header
+                        // as this mock header is aligned with CSS grid, so it is more reliable
+                        // the real header is aligned programmatically based on this header
+                        ref={ref => c.setHeaderElementRef(ref)}
+                        data-filter={filterType}
+                    >
+                        <span>{c.header}</span>
+                    </div>
+                );
+            })}
             {config.selectorColumnEnabled && <div data-column-id="selector" key={"selector"}></div>}
         </div>
     );
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx b/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx
index 7a372da113..c22f50e673 100644
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx
@@ -27,8 +27,10 @@ export class ColumnFilterStore implements IColumnFilterStore {
     private _filterStore: FilterStore | null = null;
     private _context: FilterAPI;
     private _filterHost: ObservableFilterHost;
+    readonly filterType: string | undefined;
 
     constructor(props: ColumnsType, info: StaticInfo, filterHost: ObservableFilterHost) {
+        this.filterType = ColumnFilterStore.resolveFilterType(props);
         this._filterHost = filterHost;
         this._widget = props.filter;
         const storeResult = this.createFilterStore(props, null);
@@ -104,6 +106,27 @@ export class ColumnFilterStore implements IColumnFilterStore {
             this._filterStore?.fromJSON(data);
         }
     }
+
+    private static resolveFilterType(props: ColumnsType): string | undefined {
+        if (!props.filter) {
+            return undefined;
+        }
+        switch (props.attribute?.type) {
+            case "DateTime":
+                return "date";
+            case "Integer":
+            case "Long":
+            case "Decimal":
+            case "AutoNumber":
+                return "number";
+            case "Enum":
+            case "EnumSet":
+            case "Boolean":
+                return "enum";
+            default:
+                return "text";
+        }
+    }
 }
 
 const isListAttributeValue = (