fix(datagrid-web): enforce filter-aware minimum width during column resize

Author: rahmanunver

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -591,6 +591,13 @@ $root: ".widget-datagrid";
 
 .grid-mock-header {
     display: contents;
+
+    span {
+        visibility: hidden;
+        height: 0;
+        display: block;
+        overflow: hidden;
+    }
 }
 
 :where(#{$root}-paging-bottom, #{$root}-padding-top) {

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

packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx

@@ -24,23 +24,29 @@ export function GridHeader(): ReactElement {
         <div className="widget-datagrid-grid-head" role="rowgroup" ref={gridSizeStore.gridHeaderRef}>
             <div key="headers_row" className="tr" role="row">
                 <CheckboxColumnHeader key="headers_column_select_all" />
-                {columns.map(column => (
-                    <ColumnProvider column={column} key={`${column.columnId}`}>
-                        <Header
-                            dropTarget={dragOver}
-                            isDragging={isDragging}
-                            resizer={
-                                <ColumnResizer
-                                    onResizeStart={() => columnsStore.setIsResizing(true)}
-                                    onResizeEnds={() => columnsStore.setIsResizing(false)}
-                                    setColumnWidth={(width: number) => column.setSize(width)}
-                                />
-                            }
-                            setDropTarget={setDragOver}
-                            setIsDragging={setIsDragging}
-                        />
-                    </ColumnProvider>
-                ))}
+                {columns.map(column => {
+                    const filterMinWidth = columnsStore.columnFilters[column.columnIndex]?.suggestedMinWidth ?? 0;
+                    const minWidth = Math.max(50, column.minWidthLimit, filterMinWidth);
+
+                    return (
+                        <ColumnProvider column={column} key={`${column.columnId}`}>
+                            <Header
+                                dropTarget={dragOver}
+                                isDragging={isDragging}
+                                resizer={
+                                    <ColumnResizer
+                                        minWidth={minWidth}
+                                        onResizeStart={() => columnsStore.setIsResizing(true)}
+                                        onResizeEnds={() => columnsStore.setIsResizing(false)}
+                                        setColumnWidth={(width: number) => column.setSize(width)}
+                                    />
+                                }
+                                setDropTarget={setDragOver}
+                                setIsDragging={setIsDragging}
+                            />
+                        </ColumnProvider>
+                    );
+                })}
                 {columnsHidable && (
                     <ColumnSelector
                         key="headers_column_selector"

packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx

@@ -46,7 +46,9 @@ export function MockHeader(): ReactNode {
                     // 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>
+                >
+                    <span>{c.header}</span>
+                </div>
             ))}
             {config.selectorColumnEnabled && <div data-column-id="selector" key={"selector"}></div>}
         </div>

packages/pluggableWidgets/datagrid-web/src/helpers/ColumnBase.ts

@@ -8,7 +8,6 @@ interface BaseColumnProps {
     width: WidthEnum;
     size: number | null;
     alignment: AlignmentEnum;
-
     wrapText: boolean;
     minWidth: MinWidthEnum;
     minWidthLimit: number;
@@ -45,6 +44,10 @@ export class BaseColumn {
         return this.properties.wrapText;
     }
 
+    get minWidthLimit(): number {
+        return this.properties.minWidthLimit;
+    }
+
     getCssWidth(): string {
         switch (this.properties.width) {
             case "autoFit": {

packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx

@@ -27,10 +27,12 @@ export class ColumnFilterStore implements IColumnFilterStore {
     private _filterStore: FilterStore | null = null;
     private _context: FilterAPI;
     private _filterHost: ObservableFilterHost;
+    private _attributeType: ListAttributeValue["type"] | undefined;
 
     constructor(props: ColumnsType, info: StaticInfo, filterHost: ObservableFilterHost) {
         this._filterHost = filterHost;
         this._widget = props.filter;
+        this._attributeType = isListAttributeValue(props.attribute) ? props.attribute.type : undefined;
         const storeResult = this.createFilterStore(props, null);
         if (storeResult === null) {
             this._error = this._filterStore = null;
@@ -104,6 +106,28 @@ export class ColumnFilterStore implements IColumnFilterStore {
             this._filterStore?.fromJSON(data);
         }
     }
+
+    get suggestedMinWidth(): number {
+        if (this._attributeType === undefined) {
+            return 0;
+        }
+        switch (this._attributeType) {
+            case "DateTime":
+                return 150;
+            case "AutoNumber":
+            case "Decimal":
+            case "Integer":
+            case "Long":
+                return 120;
+            case "String":
+            case "HashString":
+            case "Boolean":
+            case "Enum":
+                return 100;
+            default:
+                return 0;
+        }
+    }
 }
 
 const isListAttributeValue = (

packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx

@@ -112,6 +112,10 @@ export class ColumnStore implements GridColumn {
         return this.baseInfo.draggable;
     }
 
+    get minWidthLimit(): number {
+        return this.baseInfo.minWidthLimit;
+    }
+
     // hiding
     get canHide(): boolean {
         return this.baseInfo.hidable;

packages/pluggableWidgets/datagrid-web/src/typings/GridColumn.ts

@@ -33,6 +33,7 @@ export interface GridColumn {
 
     // sizing
     canResize: boolean;
+    minWidthLimit: number;
     size: number | undefined;
     setSize(size: number): void;
     getCssWidth(): string;