fix(datagrid-web): revert minwidth approach, use a small js-css contract for filterType instead

Author: rahmanunver

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

@@ -603,26 +603,19 @@ $root: ".widget-datagrid";
 }
 
 // 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;
-    }
+// 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;
+}
 
-    // Date filter (has calendar button) → 150px override
-    .widget-datagrid-grid:has(#{$hcol} .filter .btn-calendar) #{$mcol}::after {
-        width: 150px;
-    }
+.grid-mock-header > [data-filter="date"]::after {
+    width: 175px;
 }
 
 :where(#{$root}-paging-bottom, #{$root}-padding-top) {

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

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

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

@@ -35,7 +35,6 @@ 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,
@@ -84,7 +83,7 @@ export function Header(props: HeaderProps): ReactElement {
                 </div>
                 {columnsFilterable && (
                     <div className="filter" style={{ pointerEvents: props.isDragging ? "none" : undefined }}>
-                        {filterStore?.renderFilterWidgets()}
+                        {columnsStore.columnFilters[column.columnIndex]?.renderFilterWidgets()}
                     </div>
                 )}
             </div>

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

@@ -1,8 +1,7 @@
-import { observer } from "mobx-react-lite";
 import { ReactNode, useCallback, useEffect } from "react";
 import { useColumnsStore, useDatagridConfig, useGridSizeStore } from "../model/hooks/injection-hooks";
 
-export const MockHeader = observer(function MockHeader(): ReactNode {
+export function MockHeader(): ReactNode {
     const columnsStore = useColumnsStore();
     const config = useDatagridConfig();
     const gridSizeStore = useGridSizeStore();
@@ -40,6 +39,7 @@ export const MockHeader = observer(function MockHeader(): ReactNode {
         <div className={"grid-mock-header"} aria-hidden>
             {config.checkboxColumnEnabled && <div data-column-id="checkboxes" key={"checkboxes"}></div>}
             {columnsStore.visibleColumns.map(c => {
+                const filterType = columnsStore.columnFilters[c.columnIndex]?.filterType;
                 return (
                     <div
                         data-column-id={c.columnId}
@@ -48,6 +48,7 @@ export const MockHeader = observer(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)}
+                        data-filter={filterType}
                     >
                         <span>{c.header}</span>
                     </div>
@@ -56,4 +57,4 @@ export const MockHeader = observer(function MockHeader(): ReactNode {
             {config.selectorColumnEnabled && <div data-column-id="selector" key={"selector"}></div>}
         </div>
     );
-});
+}

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

@@ -8,6 +8,7 @@ interface BaseColumnProps {
     width: WidthEnum;
     size: number | null;
     alignment: AlignmentEnum;
+
     wrapText: boolean;
     minWidth: MinWidthEnum;
     minWidthLimit: number;
@@ -44,10 +45,6 @@ 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": {

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

@@ -13,22 +13,26 @@ 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 {
+export class ColumnFilterStore implements IColumnFilterStore {
     private _widget: ReactNode;
     private _error: APIError | null;
     private _filterStore: FilterStore | null = null;
     private _context: FilterAPI;
     private _filterHost: ObservableFilterHost;
-    readonly filterMinWidth: number;
+    readonly filterType: string | undefined;
 
     constructor(props: ColumnsType, info: StaticInfo, filterHost: ObservableFilterHost) {
+        this.filterType = ColumnFilterStore.resolveFilterType(props);
         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;
@@ -102,6 +106,27 @@ export class ColumnFilterStore {
             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 = (

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

@@ -112,10 +112,6 @@ 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;

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

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