mendix · rahmanunver · Feb 18, 2026 · Feb 24, 2026
@@ -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) {

@@ -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

@@ -24,23 +24,25 @@ 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 => {
+                    return (
+                        <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>
+                    );
+                })}
                 {columnsHidable && (
                     <ColumnSelector
                         key="headers_column_selector"

@@ -35,6 +35,8 @@ export function Header(props: HeaderProps): ReactElement {
     const canDrag = columnsDraggable && column.canDrag;
     const canSort = columnsSortable && column.canSort;
     const canResize = columnsResizable && column.canResize;
+    const filterStore = columnsStore.columnFilters[column.columnIndex];
+    const filterRef = useCallback((el: HTMLDivElement | null) => filterStore?.setFilterElement(el), [filterStore]);
 
     const draggableProps = useDraggable(
         canDrag,
@@ -82,8 +84,12 @@ export function Header(props: HeaderProps): ReactElement {
                     {sortIcon}
                 </div>
                 {columnsFilterable && (
-                    <div className="filter" style={{ pointerEvents: props.isDragging ? "none" : undefined }}>
-                        {columnsStore.columnFilters[column.columnIndex]?.renderFilterWidgets()}
+                    <div
+                        className="filter"
+                        style={{ pointerEvents: props.isDragging ? "none" : undefined }}
+                        ref={filterRef}
+                    >
+                        {filterStore?.renderFilterWidgets()}
                     </div>
                 )}
             </div>

@@ -1,7 +1,8 @@
+import { observer } from "mobx-react-lite";
 import { ReactNode, useCallback, useEffect } from "react";
 import { useColumnsStore, useDatagridConfig, useGridSizeStore } from "../model/hooks/injection-hooks";
 
-export function MockHeader(): ReactNode {
+export const MockHeader = observer(function MockHeader(): ReactNode {
     const columnsStore = useColumnsStore();
     const config = useDatagridConfig();
     const gridSizeStore = useGridSizeStore();
@@ -38,17 +39,23 @@ 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 filterMinWidth = columnsStore.columnFilters[c.columnIndex]?.measuredFilterWidth;
+                return (
+                    <div
+                        data-column-id={c.columnId}
+                        key={c.columnId}
+                        style={filterMinWidth ? { minWidth: filterMinWidth } : undefined}
+                        // 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)}
+                    >
+                        <span>{c.header}</span>
+                    </div>
+                );
+            })}
             {config.selectorColumnEnabled && <div data-column-id="selector" key={"selector"}></div>}
         </div>
     );
-}
+});
@@ -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.minWidth === "manual" ? this.properties.minWidthLimit : 0;
+    }
+
     getCssWidth(): string {
         switch (this.properties.width) {
             case "autoFit": {

@@ -8,25 +8,24 @@ import { ObservableFilterHost } from "@mendix/widget-plugin-filtering/typings/Ob
 import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 import { ListAttributeListValue, ListAttributeValue } from "mendix";
 import { FilterCondition } from "mendix/filters";
-import { computed, makeObservable } from "mobx";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { ReactNode } from "react";
 import { ColumnsType } from "../../../../typings/DatagridProps";
 import { StaticInfo } from "../../../typings/static-info";
 
-export interface IColumnFilterStore {
-    renderFilterWidgets(): ReactNode;
-}
-
 type FilterStore = InputFilterStore | EnumFilterStore;
 
 const { Provider } = getGlobalFilterContextObject();
 
-export class ColumnFilterStore implements IColumnFilterStore {
+export class ColumnFilterStore {
     private _widget: ReactNode;
     private _error: APIError | null;
     private _filterStore: FilterStore | null = null;
     private _context: FilterAPI;
     private _filterHost: ObservableFilterHost;
+    private _filterResizeObserver: ResizeObserver | null = null;
+
+    measuredFilterWidth: number = 0;
 
     constructor(props: ColumnsType, info: StaticInfo, filterHost: ObservableFilterHost) {
         this._filterHost = filterHost;
@@ -44,6 +43,7 @@ export class ColumnFilterStore implements IColumnFilterStore {
         this._context = this.createContext(this._filterStore, info);
 
         makeObservable<this>(this, {
+            measuredFilterWidth: observable,
             condition: computed
         });
     }
@@ -53,6 +53,10 @@ export class ColumnFilterStore implements IColumnFilterStore {
         if (this._filterStore && "setup" in this._filterStore) {
             add(this._filterStore.setup());
         }
+        add(() => {
+            this._filterResizeObserver?.disconnect();
+            this._filterResizeObserver = null;
+        });
         return disposeAll;
     }
 
@@ -104,6 +108,25 @@ export class ColumnFilterStore implements IColumnFilterStore {
             this._filterStore?.fromJSON(data);
         }
     }
+
+    setFilterElement(el: HTMLDivElement | null): void {
+        this._filterResizeObserver?.disconnect();
+        this._filterResizeObserver = null;
+
+        if (el === null) {
+            runInAction(() => {
+                this.measuredFilterWidth = 0;
+            });
+            return;
+        }
+
+        this._filterResizeObserver = new ResizeObserver(
+            action((entries: ResizeObserverEntry[]) => {
+                this.measuredFilterWidth = (entries[0].target as HTMLElement).scrollWidth;
+            })
+        );
+        this._filterResizeObserver.observe(el);
+    }
 }
 
 const isListAttributeValue = (

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

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