fix(grid): prevent collapsible column group header from being inflated by minColumnWidth (#17042)

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

@@ -2682,7 +2682,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         } else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
             this.widthConstrained = true;
             return this.userSetMinWidthPx;
-        } else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
+        } else if ((this.columnLayout || !this.columnGroup) && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
             return this.grid.minColumnWidth;
         } else {
             this.widthConstrained = false;

projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts

@@ -4,14 +4,55 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
     CollapsibleColumnGroupTestComponent,
     CollapsibleGroupsTemplatesTestComponent,
-    CollapsibleGroupsDynamicColComponent
+    CollapsibleGroupsDynamicColComponent,
+    CollapsibleColumnGroupWithExplicitWidthsComponent
 } from '../../../test-utils/grid-samples.spec';
 import { GridFunctions } from '../../../test-utils/grid-functions.spec';
 import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
 import { DropPosition } from 'igniteui-angular/grids/core';
 import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core';
 import { SortingDirection } from 'igniteui-angular/core';
 
+describe('IgxGrid - collapsible column group with explicit widths regression #17042 #grid', () => {
+    let fixture;
+    let grid: IgxGridComponent;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NoopAnimationsModule,
+                CollapsibleColumnGroupWithExplicitWidthsComponent
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CollapsibleColumnGroupWithExplicitWidthsComponent);
+        fixture.detectChanges();
+        grid = fixture.componentInstance.grid;
+    });
+
+    it('collapsed column group calcPixelWidth should equal the sum of visible children calcPixelWidth when columns have explicit widths smaller than minColumnWidth', () => {
+        const colGroup = grid.getColumnByName('ID').parent as IgxColumnGroupComponent;
+        const visibleChild = grid.getColumnByName('ID');
+
+        // Group is collapsed by default (expanded=false in the template)
+        expect(colGroup.collapsible).toBeTrue();
+        expect(colGroup.expanded).toBeFalse();
+
+        // The visible child has explicit width 100px, which is less than the grid's MINIMUM_COLUMN_WIDTH (136px).
+        // The column group's calcPixelWidth should equal its visible child's calcPixelWidth,
+        // NOT be inflated to the grid's minimum column width.
+        const visibleChildWidth = visibleChild.calcPixelWidth;
+        const groupWidth = colGroup.calcPixelWidth;
+
+        expect(visibleChildWidth).toBe(100);
+        expect(groupWidth).toBe(visibleChildWidth,
+            `Column group calcPixelWidth (${groupWidth}) should equal the visible child calcPixelWidth (${visibleChildWidth}). ` +
+            `The group header must not be inflated by minColumnWidth because that causes header/cell misalignment.`);
+    });
+});
+
 describe('IgxGrid - multi-column headers #grid', () => {
     let contactInf;
     let countryInf;

projects/igniteui-angular/test-utils/grid-samples.spec.ts

@@ -2009,6 +2009,34 @@ export class CollapsibleGroupsDynamicColComponent {
     }
 }
 
+/**
+ * Test component for verifying that a collapsed collapsible column group with explicit column widths
+ * smaller than the grid's MINIMUM_COLUMN_WIDTH does not cause header/cell misalignment.
+ * Regression test for: https://github.com/IgniteUI/igniteui-angular/issues/17042
+ */
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="500px" width="900px">
+        <igx-column-group header="Customer Information" [collapsible]="true" [expanded]="false">
+            <igx-column field="ID" width="100px" [visibleWhenCollapsed]="true"></igx-column>
+            <igx-column field="CompanyName" width="100px" [visibleWhenCollapsed]="false"></igx-column>
+            <igx-column field="ContactName" width="100px" [visibleWhenCollapsed]="false"></igx-column>
+        </igx-column-group>
+        <igx-column field="ContactTitle"></igx-column>
+        <igx-column field="Address"></igx-column>
+        <igx-column field="City"></igx-column>
+        <igx-column field="Country"></igx-column>
+        <igx-column field="Phone"></igx-column>
+    </igx-grid>
+    `,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+})
+export class CollapsibleColumnGroupWithExplicitWidthsComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+    public data = SampleTestData.contactInfoDataFull();
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" height="500px" width="1300px" columnWidth="100px">