fix(column): use minWidth when sizing columns

Author: RivaIvanova

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1012,6 +1012,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             return;
         }
         this._defaultMinWidth = value;
+        this.minWidthSetByUser = true;
         this.grid.notifyChanges(true);
     }
     public get minWidth(): string {
@@ -1864,6 +1865,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     protected _maxWidth;
+    /**
+     * @hidden
+     */
+    protected _minWidthSetByUser = false;
     /**
      * @hidden
      */
@@ -2149,7 +2154,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             if (size && !!size.width) {
                 result.push(size.width + 'px');
             } else {
-                const currentWidth = parseFloat(this.grid.getPossibleColumnWidth());
+                const possibleWidth = this.getPossibeWidth();
+                const currentWidth = parseFloat(possibleWidth);
                 result.push((this.getConstrainedSizePx(currentWidth)) + 'px');
             }
         }
@@ -2644,7 +2650,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             this._calcWidth = this.grid.calcWidth ? this.getConstrainedSizePx(currentCalcWidth) : 0;
         } else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
-            const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
+            const possibleWidth = this.getPossibeWidth();
+            const currentCalcWidth = this.defaultWidth || possibleWidth;
             this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
         } else {
             const currentCalcWidth =  parseFloat(this.width);
@@ -2699,4 +2706,26 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             this._applySelectableClass = value;
         }
     }
+
+    /**
+     * @hidden
+     */
+    public set minWidthSetByUser(value: boolean) {
+        this._minWidthSetByUser = value;
+    }
+
+    /**
+     * @hidden
+     */
+    public get minWidthSetByUser(): boolean {
+        return this._minWidthSetByUser;
+    }
+
+    private getPossibeWidth(): string {
+        const possibleWidth = this.grid.getPossibleColumnWidth();
+        if (!this.minWidthSetByUser && parseFloat(possibleWidth) < this.grid.minColumnWidth) {
+            return this.grid.minColumnWidth + 'px';
+        }
+        return possibleWidth;
+    }
 }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3237,6 +3237,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _shouldRecalcRowHeight = false;
 
     private _hostWidth;
+    private _possibleColumnWidth: string;
     private _advancedFilteringOverlayId: string;
     private _advancedFilteringPositionSettings: PositionSettings = {
         verticalDirection: VerticalAlignment.Middle,
@@ -5534,8 +5535,8 @@ export abstract class IgxGridBaseDirective implements GridType,
         computedWidth -= this.featureColumnsWidth();
 
         const columnWidth = !Number.isFinite(sumExistingWidths) ?
-            Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
-            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
+            Math.max(computedWidth / columnsToSize, this.defaultHeaderGroupMinWidth) :
+            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.defaultHeaderGroupMinWidth);
 
         return columnWidth + 'px';
     }
@@ -6619,9 +6620,10 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     protected _derivePossibleWidth() {
         if (!this.columnWidthSetByUser) {
-            this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
+            this._possibleColumnWidth = this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
         }
         this._columns.forEach((column: IgxColumnComponent) => {
+            this.setPossibleMinColumnWidth(column);
             if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
                 const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
@@ -8008,4 +8010,16 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
         this._rowCount += 1; // include header row
     }
+
+    private setPossibleMinColumnWidth(column: IgxColumnComponent): void {
+        if (this.columnWidthSetByUser || this.width == null) {
+            return;
+        }
+
+        if (column.minWidthSetByUser || column.hidden) {
+            this._columnWidth = this._possibleColumnWidth;
+        } else if (!column.minWidthSetByUser && parseFloat(this._possibleColumnWidth) < this.minColumnWidth) {
+            this._columnWidth = this.minColumnWidth + 'px';
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

@@ -29,6 +29,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
                 GridFeaturesComponent,
                 LargePinnedColGridComponent,
                 NullColumnsComponent,
+                MinWidthColumnsComponent,
                 ColGridComponent,
                 ColPercentageGridComponent
             ]
@@ -902,6 +903,18 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(headers[headers.length - 1].nativeElement.innerText).toEqual("ReleaseDate");
             expect(firstRowCells.length).toEqual(11);
         }));
+
+        it('should use user-provided `minWidth` as default min column width to size columns - #16057.', fakeAsync(() => {
+            const fixture = TestBed.createComponent(MinWidthColumnsComponent);
+            fixture.detectChanges();
+
+            const grid = fixture.componentInstance.grid;
+
+            expect(grid.columnList.get(0).width).toEqual('80px');
+            expect(grid.columnList.get(1).width).toEqual('101px');
+            expect(grid.columnList.get(2).width).toEqual('101px');
+            expect(grid.columnList.get(3).width).toEqual('101px');
+        }));
     });
 });
 
@@ -989,6 +1002,23 @@ export class NullColumnsComponent implements OnInit {
     }
 }
 
+@Component({
+    template: GridTemplateStrings.declareGrid(`width="400px" height="200px"`, ``, `<igx-column [field]="'ID'" [width]="'80px'" [resizable]="true"></igx-column>
+        <igx-column [field]="'CompanyName'" [minWidth]="'50px'" [resizable]="true"></igx-column>
+        <igx-column [field]="'ContactName'" [minWidth]="'50px'" [resizable]="true"></igx-column>
+        <igx-column [field]="'ContactTitle'" [minWidth]="'50px'" [resizable]="true"></igx-column>`),
+    imports: [IgxGridComponent, IgxColumnComponent]
+})
+export class MinWidthColumnsComponent implements OnInit {
+    @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
+
+    public data = [];
+
+    public ngOnInit(): void {
+        this.data = SampleTestData.contactInfoData();
+    }
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, `<igx-column [field]="'Items'" [width]="'40px'" dataType="string" [filterable]="true"></igx-column>
          <igx-column [field]="'ID'" [width]="'50px'" [header]="'ID'" [filterable]="true"></igx-column>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts

@@ -273,7 +273,13 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
         mirror.inputs.forEach((input) => {
             const propName = input.propName;
             if (!(col[propName] instanceof IgxSummaryOperand)) {
-                ref.instance[propName] = col[propName];
+                if (propName === 'minWidth') {
+                    const minWidthSetByUser = col.minWidthSetByUser;
+                    ref.instance[propName] = col[propName];
+                    ref.instance.minWidthSetByUser = minWidthSetByUser;
+                } else {
+                    ref.instance[propName] = col[propName];
+                }
             } else {
                 ref.instance[propName] = col[propName].constructor;
             }