mendix · rahmanunver · Feb 18, 2026 · Feb 24, 2026 · Feb 25, 2026
@@ -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,36 @@ $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.
+// Uses :has() to detect non-empty filters in each header column and applies
+// an invisible ::after element of matching width to the corresponding MockHeader cell.
+// Only affects flexible tracks (initial render); fixed tracks (after user resize) are unaffected.
+@for $i from 1 through 20 {
+    $hcol: ".widget-datagrid-grid-head .tr > :nth-child(#{$i})";
+    $mcol: ".grid-mock-header > :nth-child(#{$i})";
+
+    // Any non-empty filter → 100px minimum
+    .widget-datagrid-grid:has(#{$hcol} .filter:not(:empty)) #{$mcol}::after {
+        content: "";
+        display: block;
+        visibility: hidden;
+        height: 0;
+        width: 100px;
+    }
+
+    // Date filter (has calendar button) → 150px override
+    .widget-datagrid-grid:has(#{$hcol} .filter .btn-calendar) #{$mcol}::after {
+        width: 150px;
+    }
 }
 
 :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,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 => {
+                    return (
+                        <ColumnProvider column={column} key={`${column.columnId}`}>
+                            <Header
+                                dropTarget={dragOver}
+                                isDragging={isDragging}
+                                resizer={
+                                    <ColumnResizer
+                                        minWidth={Math.max(
+                                            column.minWidthLimit || 50,
+                                            columnsStore.columnFilters[column.columnIndex]?.filterMinWidth ?? 0
+                                        )}
+                                        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,7 @@ 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 draggableProps = useDraggable(
         canDrag,
@@ -83,7 +84,7 @@ export function Header(props: HeaderProps): ReactElement {
                 </div>
                 {columnsFilterable && (
                     <div className="filter" style={{ pointerEvents: props.isDragging ? "none" : undefined }}>
-                        {columnsStore.columnFilters[column.columnIndex]?.renderFilterWidgets()}
+                        {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,21 @@ 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 => {
+                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)}
+                    >
+                        <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": {

@@ -13,24 +13,22 @@ 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;
+    readonly filterMinWidth: number;
 
     constructor(props: ColumnsType, info: StaticInfo, filterHost: ObservableFilterHost) {
         this._filterHost = filterHost;
         this._widget = props.filter;
+        this.filterMinWidth = props.filter ? (props.attribute?.type === "DateTime" ? 150 : 100) : 0;
         const storeResult = this.createFilterStore(props, null);
         if (storeResult === null) {
             this._error = this._filterStore = null;

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