Removing hardcoded values that limit widths and don't allow users to set custom styles that change size.

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -274,7 +274,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },
@@ -571,7 +570,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },
@@ -755,7 +753,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedStartColumns" },
       { name: "pinnedEndColumns" },
@@ -882,7 +879,6 @@ export var registerConfig = [
       { name: "cdr" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedStartColumns" },
       { name: "pinnedEndColumns" },
@@ -1034,7 +1030,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -939,8 +939,6 @@ export interface GridType extends IGridDataBindable {
     /** The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling */
     rowHeight: number;
     multiRowLayoutRowSize: number;
-    /** Minimal width for headers */
-    defaultHeaderGroupMinWidth: any;
     maxLevelHeaderDepth: number;
     defaultRowHeight: number;
     /** The default font size, calculated for each element */

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts

@@ -76,6 +76,21 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
     public expressionsList: ExpressionUI[];
     public moreFiltersCount = 0;
 
+    @HostBinding('class.igx-grid-th--pinned')
+    public get pinnedCss() {
+        return this.column.pinned;
+    }
+
+    @HostBinding('class.igx-grid-th--pinned-last')
+    public get pinnedLastCss() {
+        return !this.column.grid.hasColumnLayouts ? this.column.isLastPinned : false;
+    }
+
+    @HostBinding('class.igx-grid-th--pinned-first')
+    public get pinnedFirstCSS() {
+        return !this.column.grid.hasColumnLayouts ? this.column.isFirstPinned : false;;
+    }
+
     private baseClass = 'igx-grid__filtering-cell-indicator';
 
     constructor(

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

@@ -4560,24 +4560,6 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
     }
 
-    /**
-     * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width.
-     *
-     * @remarks
-     * Used internally for restricting header group component width.
-     * The values below depend on the header cell default right/left padding values.
-     */
-    public get defaultHeaderGroupMinWidth(): number {
-        switch (this.gridSize) {
-            case Size.Medium:
-                return 32;
-            case Size.Small:
-                return 24;
-            default:
-                return 48;
-        }
-    }
-
     /** @hidden @internal */
     public get pinnedStartWidth() {
         if (!isNaN(this._pinnedStartWidth)) {
@@ -4617,17 +4599,13 @@ export abstract class IgxGridBaseDirective implements GridType,
     public getHeaderCellWidth(element: HTMLElement): ISizeInfo {
         const range = this.document.createRange();
         const headerWidth = this.platform.getNodeSizeViaRange(range,
-            element,
-            element.parentElement);
+            element, element);
 
         const headerStyle = this.document.defaultView.getComputedStyle(element);
         const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
             parseFloat(headerStyle.borderRightWidth);
 
-        // Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup.
-        const headerGroupStyle = this.document.defaultView.getComputedStyle(element.parentElement);
-        const borderSize = parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth);
-        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) };
+        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding) };
     }
 
     /**
@@ -4743,7 +4721,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     public getHeaderGroupWidth(column: IgxColumnComponent): string {
         return this.hasColumnLayouts
             ? ''
-            : `${Math.max(parseFloat(column.calcWidth), this.defaultHeaderGroupMinWidth)}px`;
+            : `${parseFloat(column.calcWidth)}px`;
     }
 
     /**

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

@@ -861,9 +861,9 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50);
             expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49);
 
-            expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48);
+            expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(49);
             expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50);
-            expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48);
+            expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(49);
         });
 
         it('should size headers correctly when column width is in %.', () => {

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

@@ -259,7 +259,7 @@ describe('IgxGrid - Column properties #grid', () => {
             expect(item.width).toEqual('200px');
         });
         const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
-        expect(headers[0].nativeElement.style['min-width']).toEqual('200px');
+        expect(headers[0].nativeElement.clientWidth).toEqual(200);
     });
 
     it('headers and cells classes should be correct after scroll horizontal', async () => {

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

@@ -1888,9 +1888,12 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(hScroll.nativeElement.hidden).toBe(true);
 
             for (let i = 0; i < grid.columnList.length; i++) {
-                const header = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[i];
+                const header = fix.debugElement.queryAll(By.css('igx-grid-header'))[i];
                 const cell = fix.debugElement.queryAll(By.css('igx-grid-cell'))[i];
-                expect(header.nativeElement.offsetWidth).toEqual(cell.nativeElement.offsetWidth);
+                const headerStyle = document.defaultView.getComputedStyle(header.nativeElement);
+                const paddingsAndBorders = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
+            parseFloat(headerStyle.borderRightWidth);
+                expect(header.nativeElement.offsetWidth).toEqual(Math.max(cell.nativeElement.offsetWidth, paddingsAndBorders));
                 expect(Number.isInteger(header.nativeElement.offsetWidth)).toBe(true);
             }
         });

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -65,6 +65,8 @@
         (click)="groupClicked($event)"
         (pointerenter)="onPinterEnter()"
         (pointerleave)="onPointerLeave()"
+        [style.max-width]="column.resolvedWidth"
+        [style.flex-basis]="column.resolvedWidth"
         >
         @if (column.collapsible) {
             <div class="igx-grid-th__expander" (pointerdown)="onPointerDownIndicator($event)" (click)="toggleExpandState($event)">
@@ -83,9 +85,7 @@
                     <igx-grid-header-group class="igx-grid-thead__subgroup"
                         [ngClass]="child.headerGroupClasses"
                         [ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
-                        [column]="child"
-                        [style.min-width]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
-                        [style.flex-basis]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
+                        [column]="child">
                     </igx-grid-header-group>
                 }
             }
@@ -111,12 +111,13 @@
         [ghostHost]="grid.outlet.nativeElement"
         [attr.droppable]="true"
         (pointerdown)="activate()"
+        [style.width]="column.resolvedWidth"
         [igxColumnMovingDrop]="column"
         [column]="column"
     >
     </igx-grid-header>
     @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {
-        <igx-grid-filtering-cell [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
+        <igx-grid-filtering-cell [column]="column" [attr.draggable]="false" [style.width]="column.resolvedWidth"></igx-grid-filtering-cell>
     }
     @if (!column.columnGroup && column.resizable) {
         <span class="igx-grid-th__resize-handle"

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

@@ -20,7 +20,7 @@ import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-
 import { ColumnType, GridType, IGX_GRID_BASE } from '../common/grid.interface';
 import { GridSelectionMode } from '../common/enums';
 import { PlatformUtil } from '../../core/utils';
-import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from './pipes';
+import { IgxHeaderGroupStylePipe } from './pipes';
 import { IgxResizeHandleDirective } from '../resizing/resize-handle.directive';
 import { IgxIconComponent } from '../../icon/icon.component';
 import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';
@@ -36,7 +36,7 @@ const Z_INDEX = 9999;
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-grid-header-group',
     templateUrl: './grid-header-group.component.html',
-    imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe]
+    imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupStylePipe]
 })
 export class IgxGridHeaderGroupComponent implements DoCheck {
 
@@ -60,6 +60,11 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         return this.column.colStart;
     }
 
+    @HostBinding('class.igx-grid-th--pinned')
+    public get pinnedCss() {
+        return this.column.pinned;
+    }
+
     public get headerID() {
         return `${this.grid.id}_-1_${this.column.level}_${this.column.visibleIndex}`;
     }
@@ -121,21 +126,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         public filteringService: IgxFilteringService,
         protected platform: PlatformUtil) { }
 
-    @HostBinding('class.igx-grid-th--pinned')
-    public get pinnedCss() {
-        return this.isPinned;
-    }
-
-    @HostBinding('class.igx-grid-th--pinned-last')
-    public get pinnedLastCss() {
-        return this.isLastPinned;
-    }
-
-    @HostBinding('class.igx-grid-th--pinned-first')
-    public get pinnedFirstCSS() {
-        return this.isFirstPinned;
-    }
-
     @HostBinding('class.igx-grid__drag-col-header')
     public get headerDragCss() {
         return this.isHeaderDragged;

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html

@@ -66,9 +66,7 @@
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
                     [ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
-                    [column]="column"
-                    [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                    [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
+                    [column]="column">
                 </igx-grid-header-group>
             }
         }
@@ -85,9 +83,7 @@
             <igx-grid-header-group
                 [ngClass]="column.headerGroupClasses"
                 [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
-                [column]="column"
-                [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
+                [column]="column">
             </igx-grid-header-group>
         </ng-template>
 
@@ -98,8 +94,6 @@
                     [ngClass]="column.headerGroupClasses"
                     [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
                     [column]="column"
-                    [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                    [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                     [style.left]="column.rightPinnedOffset">
                 </igx-grid-header-group>
             }

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts

@@ -19,7 +19,7 @@ import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-
 import { IgxGridFilteringRowComponent } from '../filtering/base/grid-filtering-row.component';
 import { IgxGridHeaderGroupComponent } from './grid-header-group.component';
 import { IgxGridHeaderComponent } from './grid-header.component';
-import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from './pipes';
+import { IgxHeaderGroupStylePipe } from './pipes';
 import { IgxGridTopLevelColumns } from '../common/pipes';
 import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
 import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';
@@ -37,7 +37,7 @@ import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-grid-header-row',
     templateUrl: './grid-header-row.component.html',
-    imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe]
+    imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupStylePipe]
 })
 export class IgxGridHeaderRowComponent implements DoCheck {
 

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -55,6 +55,43 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     @ViewChild('sortIconContainer', { read: ElementRef })
     protected sortIconContainer: ElementRef;
 
+    @HostBinding('class.igx-grid-th--pinned')
+    public get pinnedCss() {
+        return this.isPinned;
+    }
+
+    @HostBinding('class.igx-grid-th--pinned-last')
+    public get pinnedLastCss() {
+        return this.isLastPinned;
+    }
+
+    @HostBinding('class.igx-grid-th--pinned-first')
+    public get pinnedFirstCSS() {
+        return this.isFirstPinned;
+    }
+
+    /**
+     * Gets whether the header group is stored in the last column in the pinned area.
+     */
+    public get isLastPinned(): boolean {
+        return !this.grid.hasColumnLayouts ? this.column.isLastPinned : false;
+    }
+
+    /**
+     * Gets whether the header group is stored in the first column of the right pinned area.
+     */
+    public get isFirstPinned(): boolean {
+        return !this.grid.hasColumnLayouts ? this.column.isFirstPinned : false;
+    }
+
+    /**
+     * Gets whether the header group is stored in a pinned column.
+     *
+     * @memberof IgxGridHeaderGroupComponent
+     */
+    public get isPinned(): boolean {
+        return this.column.pinned;
+    }
     /**
      * @hidden
      */
@@ -76,7 +113,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     @HostBinding('attr.aria-sort')
     public get ariaSort() {
         return this.sortDirection === SortingDirection.Asc ? 'ascending'
-                : this.sortDirection === SortingDirection.Desc ? 'descending' : null;
+            : this.sortDirection === SortingDirection.Desc ? 'descending' : null;
     }
 
     /**
@@ -300,7 +337,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     }
 
     protected isAdvancedFilterApplied() {
-        if(!this.grid.advancedFilteringExpressionsTree) {
+        if (!this.grid.advancedFilteringExpressionsTree) {
             return false;
         }
         return !!ExpressionsTreeUtil.find(this.grid.advancedFilteringExpressionsTree, this.column.field);

projects/igniteui-angular/src/lib/grids/headers/pipes.ts

@@ -14,19 +14,6 @@ export class SortingIndexPipe implements PipeTransform {
     }
 }
 
-@Pipe({
-    name: 'igxHeaderGroupWidth',
-    standalone: true
-})
-export class IgxHeaderGroupWidthPipe implements PipeTransform {
-
-    public transform(width: any, minWidth: any, hasLayout: boolean) {
-        const isFitContent = width === 'fit-content';
-        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseFloat(width), minWidth)}px`;
-    }
-}
-
-
 @Pipe({
     name: 'igxHeaderGroupStyle',
     standalone: true