IgniteUI · Copilot · Mar 19, 2026 · Mar 19, 2026 · Mar 20, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes for each version of this project will be documented in this
 
 ## 21.2.0
 
+### Bug Fixes
+
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Fixed a regression introduced in 20.1.13 where headers and cells became misaligned after horizontal scrolling when a collapsible column group was collapsed and its child columns had explicit widths set. The column group's calculated width is now always derived from the sum of its visible children's widths and is no longer incorrectly constrained to `minColumnWidth`.
+
 ### New Features
 
 - `IgxCombo`, `IgxSimpleCombo`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,17 +59,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.3",
-    "@angular/common": "^21.1.3",
-    "@angular/compiler": "^21.1.3",
-    "@angular/core": "^21.1.3",
-    "@angular/elements": "^21.1.3",
-    "@angular/forms": "^21.1.3",
-    "@angular/platform-browser": "^21.1.3",
-    "@angular/platform-browser-dynamic": "^21.1.3",
-    "@angular/platform-server": "^21.1.3",
-    "@angular/router": "^21.1.3",
-    "@angular/ssr": "^21.1.2",
+    "@angular/animations": "^21.2.5",
+    "@angular/common": "^21.2.5",
+    "@angular/compiler": "^21.2.5",
+    "@angular/core": "^21.2.5",
+    "@angular/elements": "^21.2.5",
+    "@angular/forms": "^21.2.5",
+    "@angular/platform-browser": "^21.2.5",
+    "@angular/platform-browser-dynamic": "^21.2.5",
+    "@angular/platform-server": "^21.2.5",
+    "@angular/router": "^21.2.5",
+    "@angular/ssr": "^21.2.3",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
@@ -79,7 +79,7 @@
     "igniteui-i18n-core": "^1.0.2",
     "igniteui-theming": "^25.0.0",
     "igniteui-trial-watermark": "^3.1.0",
-    "jspdf": "^4.0.0",
+    "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21",
     "marked": "^17.0.1",
     "marked-shiki": "^1.2.1",
@@ -95,10 +95,10 @@
     "@angular-eslint/eslint-plugin-template": "^21.2.0",
     "@angular-eslint/schematics": "^21.2.0",
     "@angular-eslint/template-parser": "^21.2.0",
-    "@angular/build": "^21.1.2",
-    "@angular/cli": "^21.1.2",
-    "@angular/compiler-cli": "^21.1.3",
-    "@angular/language-service": "^21.1.3",
+    "@angular/build": "^21.2.3",
+    "@angular/cli": "^21.2.3",
+    "@angular/compiler-cli": "^21.2.5",
+    "@angular/language-service": "^21.2.5",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",

diff --git a/projects/igniteui-angular/grids/core/src/columns/column.component.ts b/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.minWidth && !this.columnGroup && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
             return this.grid.minColumnWidth;
         } else {
             this.widthConstrained = false;

diff --git a/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts
@@ -3,6 +3,7 @@ import { IgxGridComponent } from './grid.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
     CollapsibleColumnGroupTestComponent,
+    CollapsibleGroupFirstColumnWidthComponent,
     CollapsibleGroupsTemplatesTestComponent,
     CollapsibleGroupsDynamicColComponent
 } from '../../../test-utils/grid-samples.spec';
@@ -28,7 +29,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
                 NoopAnimationsModule,
                 CollapsibleColumnGroupTestComponent,
                 CollapsibleGroupsTemplatesTestComponent,
-                CollapsibleGroupsDynamicColComponent
+                CollapsibleGroupsDynamicColComponent,
+                CollapsibleGroupFirstColumnWidthComponent
             ]
         }).compileComponents();
     }));
@@ -636,4 +638,28 @@ describe('IgxGrid - multi-column headers #grid', () => {
             GridFunctions.verifyColumnIsHidden(countryCol, true, 12);
         });
     });
+
+    describe('Regression Tests', () => {
+        it('collapsed column group with explicit child widths should not constrain group calcPixelWidth to minColumnWidth (#17042)', fakeAsync(() => {
+            const fixture = TestBed.createComponent(CollapsibleGroupFirstColumnWidthComponent);
+            fixture.detectChanges();
+            tick(16);
+            fixture.detectChanges();
+
+            const grid = fixture.componentInstance.grid;
+            const colGroup = GridFunctions.getColGroup(grid, 'Customer Information');
+            const companyNameCol = grid.getColumnByName('CompanyName');
+
+            // Group is collapsed: CompanyName (100px) visible, ContactName and ContactTitle hidden
+            expect(companyNameCol.hidden).toBe(false);
+            expect(grid.getColumnByName('ContactName').hidden).toBe(true);
+            expect(grid.getColumnByName('ContactTitle').hidden).toBe(true);
+
+            // The group's calcPixelWidth must equal the sum of visible child widths (100px),
+            // not be constrained to the grid's minColumnWidth (136px).
+            // A mismatch here causes header/cell misalignment after horizontal scrolling.
+            expect(colGroup.calcPixelWidth).toBe(companyNameCol.calcPixelWidth);
+            expect(colGroup.calcPixelWidth).toBe(100);
+        }));
+    });
 });
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
@@ -1,136 +1,136 @@
 {
-    "name": "igniteui-angular",
-    "version": "0.0.1",
-    "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
-    "author": "Infragistics",
-    "license": "SEE LICENSE IN LICENSE",
-    "homepage": "https://www.infragistics.com/products/ignite-ui-angular",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/IgniteUI/igniteui-angular.git",
-        "directory": "projects/igniteui-angular"
+  "name": "igniteui-angular",
+  "version": "0.0.1",
+  "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
+  "author": "Infragistics",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://www.infragistics.com/products/ignite-ui-angular",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/IgniteUI/igniteui-angular.git",
+    "directory": "projects/igniteui-angular"
+  },
+  "bugs": {
+    "url": "https://github.com/IgniteUI/igniteui-angular/issues"
+  },
+  "keywords": [
+    "angular",
+    "UI components",
+    "accordion",
+    "autocomplete",
+    "avatar",
+    "badge",
+    "banner",
+    "bottom nav",
+    "button",
+    "button group",
+    "calendar",
+    "card",
+    "carousel",
+    "checkbox",
+    "chip",
+    "chips",
+    "circular progress",
+    "combo",
+    "csv export",
+    "data table",
+    "datepicker",
+    "datetime editor",
+    "dialog",
+    "drag drop",
+    "drop down",
+    "excel export",
+    "pdf export",
+    "expansion panel",
+    "grid",
+    "hierarchical grid",
+    "hierarchical table",
+    "icon",
+    "input",
+    "linear progress",
+    "list",
+    "mask",
+    "navbar",
+    "navdrawer",
+    "progress bar",
+    "radio",
+    "rating",
+    "select",
+    "slider",
+    "snackbar",
+    "stepper",
+    "switch",
+    "tabs",
+    "timepicker",
+    "toast",
+    "toggle",
+    "tree grid",
+    "tree table",
+    "tree view",
+    "tree"
+  ],
+  "dependencies": {
+    "fflate": "^0.8.2",
+    "tslib": "^2.8.1",
+    "igniteui-trial-watermark": "^3.1.0",
+    "jspdf": "^4.2.1",
+    "lodash-es": "^4.17.21",
+    "igniteui-theming": "^25.0.0",
+    "igniteui-i18n-core": "^1.0.2",
+    "@igniteui/material-icons-extended": "^3.1.0"
+  },
+  "peerDependencies": {
+    "@angular/common": "21",
+    "@angular/core": "21",
+    "@angular/animations": "21",
+    "@angular/forms": "21",
+    "hammerjs": "^2.0.8",
+    "@types/hammerjs": "^2.0.46",
+    "igniteui-webcomponents": "^7.0.0",
+    "igniteui-grid-lite": "~0.6.0"
+  },
+  "peerDependenciesMeta": {
+    "hammerjs": {
+      "optional": true
     },
-    "bugs": {
-        "url": "https://github.com/IgniteUI/igniteui-angular/issues"
+    "@types/hammerjs": {
+      "optional": true
     },
-    "keywords": [
-        "angular",
-        "UI components",
-        "accordion",
-        "autocomplete",
-        "avatar",
-        "badge",
-        "banner",
-        "bottom nav",
-        "button",
-        "button group",
-        "calendar",
-        "card",
-        "carousel",
-        "checkbox",
-        "chip",
-        "chips",
-        "circular progress",
-        "combo",
-        "csv export",
-        "data table",
-        "datepicker",
-        "datetime editor",
-        "dialog",
-        "drag drop",
-        "drop down",
-        "excel export",
-        "pdf export",
-        "expansion panel",
-        "grid",
-        "hierarchical grid",
-        "hierarchical table",
-        "icon",
-        "input",
-        "linear progress",
-        "list",
-        "mask",
-        "navbar",
-        "navdrawer",
-        "progress bar",
-        "radio",
-        "rating",
-        "select",
-        "slider",
-        "snackbar",
-        "stepper",
-        "switch",
-        "tabs",
-        "timepicker",
-        "toast",
-        "toggle",
-        "tree grid",
-        "tree table",
-        "tree view",
-        "tree"
-    ],
-    "dependencies": {
-        "fflate": "^0.8.2",
-        "tslib": "^2.8.1",
-        "igniteui-trial-watermark": "^3.1.0",
-        "jspdf": "^4.0.0",
-        "lodash-es": "^4.17.21",
-        "igniteui-theming": "^25.0.0",
-        "igniteui-i18n-core": "^1.0.2",
-        "@igniteui/material-icons-extended": "^3.1.0"
+    "igniteui-webcomponents": {
+      "optional": true
     },
-    "peerDependencies": {
-        "@angular/common": "21",
-        "@angular/core": "21",
-        "@angular/animations": "21",
-        "@angular/forms": "21",
-        "hammerjs": "^2.0.8",
-        "@types/hammerjs": "^2.0.46",
-        "igniteui-webcomponents": "^7.0.0",
-        "igniteui-grid-lite": "~0.6.0"
+    "igniteui-grid-lite": {
+      "optional": true
+    }
+  },
+  "igxDevDependencies": {
+    "@igniteui/angular-schematics": "~21.1.1490"
+  },
+  "ng-update": {
+    "migrations": "./migrations/migration-collection.json",
+    "packageGroup": [
+      "igniteui-angular",
+      "igniteui-angular-extras",
+      "igniteui-angular-i18n"
+    ]
+  },
+  "schematics": "./schematics/collection.json",
+  "exports": {
+    "./schematics/*": {
+      "default": "./schematics/*"
     },
-    "peerDependenciesMeta": {
-        "hammerjs": {
-            "optional": true
-        },
-        "@types/hammerjs": {
-            "optional": true
-        },
-        "igniteui-webcomponents": {
-            "optional": true
-        },
-        "igniteui-grid-lite": {
-            "optional": true
-        }
+    "./migrations/*": {
+      "default": "./migrations/*"
     },
-    "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~21.1.1490"
+    "./lib/core/styles/themes/index": {
+      "sass": "./lib/core/styles/themes/_index.scss"
     },
-    "ng-update": {
-        "migrations": "./migrations/migration-collection.json",
-        "packageGroup": [
-            "igniteui-angular",
-            "igniteui-angular-extras",
-            "igniteui-angular-i18n"
-        ]
+    "./theming": {
+      "sass": "./lib/core/styles/themes/_index.scss"
     },
-    "schematics": "./schematics/collection.json",
-    "exports": {
-        "./schematics/*": {
-            "default": "./schematics/*"
-        },
-        "./migrations/*": {
-            "default": "./migrations/*"
-        },
-        "./lib/core/styles/themes/index": {
-            "sass": "./lib/core/styles/themes/_index.scss"
-        },
-        "./theming": {
-            "sass": "./lib/core/styles/themes/_index.scss"
-        },
-        "./themes": {
-            "sass": "./lib/core/styles/themes/_index.scss"
-        }
-    },
-    "sideEffects": false
+    "./themes": {
+      "sass": "./lib/core/styles/themes/_index.scss"
+    }
+  },
+  "sideEffects": false
 }