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..53c66c9df2 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss +++ b/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) { 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/GridHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx index a378cd42b7..80fd99b94d 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx @@ -24,23 +24,29 @@ export function GridHeader(): ReactElement {
- {columns.map(column => ( - -
columnsStore.setIsResizing(true)} - onResizeEnds={() => columnsStore.setIsResizing(false)} - setColumnWidth={(width: number) => column.setSize(width)} - /> - } - setDropTarget={setDragOver} - setIsDragging={setIsDragging} - /> - - ))} + {columns.map(column => { + const filterMinWidth = columnsStore.columnFilters[column.columnIndex]?.suggestedMinWidth ?? 0; + const minWidth = Math.max(50, column.minWidthLimit, filterMinWidth); + + return ( + +
columnsStore.setIsResizing(true)} + onResizeEnds={() => columnsStore.setIsResizing(false)} + setColumnWidth={(width: number) => column.setSize(width)} + /> + } + setDropTarget={setDragOver} + setIsDragging={setIsDragging} + /> + + ); + })} {columnsHidable && ( c.setHeaderElementRef(ref)} - >
+ > + {c.header} +
))} {config.selectorColumnEnabled &&
} diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/ColumnBase.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/ColumnBase.ts index 5d518b5c6b..98dc748ada 100644 --- a/packages/pluggableWidgets/datagrid-web/src/helpers/ColumnBase.ts +++ b/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": { 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..d1917977fe 100644 --- a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx +++ b/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 = ( diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx b/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx index f2136d3e8e..89e0b70677 100644 --- a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx +++ b/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; diff --git a/packages/pluggableWidgets/datagrid-web/src/typings/GridColumn.ts b/packages/pluggableWidgets/datagrid-web/src/typings/GridColumn.ts index 23448457fe..2be5eb95f5 100644 --- a/packages/pluggableWidgets/datagrid-web/src/typings/GridColumn.ts +++ b/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;