From 7e948dff2c974951b7b3e3dec99ec64e531f8f55 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 5 Sep 2025 13:53:52 +0300 Subject: [PATCH 01/13] fix(IgxGrid): Remove default group min-width. Leave only constraints on col. --- .../src/lib/grids/common/grid.interface.ts | 2 -- .../src/lib/grids/grid-base.directive.ts | 20 +------------------ .../headers/grid-header-group.component.html | 4 ++-- .../headers/grid-header-row.component.html | 12 +++++------ .../src/lib/grids/headers/pipes.ts | 4 ++-- .../pivot-header-row.component.html | 16 +++++++-------- ...pivot-row-dimension-content.component.html | 6 +++--- 7 files changed, 22 insertions(+), 42 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index fda967afb6c..7b182c245b1 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/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 */ diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 80883a9302a..715a5d86132 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/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)) { @@ -4743,7 +4725,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`; } /** diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html index 1a6c65419ff..3c90a212bd2 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html @@ -84,8 +84,8 @@ [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"> + [style.min-width]="child.resolvedWidth | igxHeaderGroupWidth:grid.hasColumnLayouts" + [style.flex-basis]="child.resolvedWidth | igxHeaderGroupWidth:grid.hasColumnLayouts"> } } diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html index 3163dd403cf..98144bcd0ff 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html @@ -67,8 +67,8 @@ [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.min-width]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL" + [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL"> } } @@ -86,8 +86,8 @@ [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.min-width]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL" + [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL"> @@ -98,8 +98,8 @@ [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.min-width]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL" + [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL" [style.left]="column.rightPinnedOffset"> } diff --git a/projects/igniteui-angular/src/lib/grids/headers/pipes.ts b/projects/igniteui-angular/src/lib/grids/headers/pipes.ts index 7ba05b3e046..f5a6524f881 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/pipes.ts @@ -20,9 +20,9 @@ export class SortingIndexPipe implements PipeTransform { }) export class IgxHeaderGroupWidthPipe implements PipeTransform { - public transform(width: any, minWidth: any, hasLayout: boolean) { + public transform(width: any, hasLayout: boolean) { const isFitContent = width === 'fit-content'; - return hasLayout ? '' : isFitContent ? width : `${Math.max(parseFloat(width), minWidth)}px`; + return hasLayout ? '' : isFitContent ? width : `${parseFloat(width)}px`; } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html index 5d507b28fba..bdda31181bc 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html @@ -254,8 +254,8 @@ } @@ -287,8 +287,8 @@ @@ -303,8 +303,8 @@ @for (column of pinnedEndColumnCollection | igxTopLevel; track column) { } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html index f1ff0f00e2c..ccd4e6af52c 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html @@ -3,9 +3,9 @@
Date: Fri, 5 Sep 2025 16:33:49 +0300 Subject: [PATCH 02/13] chore(*): Apply widths to inner igx-grid-header so it matches the cells. --- .../headers/grid-header-group.component.html | 5 +-- .../headers/grid-header-group.component.ts | 17 +------- .../headers/grid-header-row.component.html | 10 +---- .../headers/grid-header-row.component.ts | 2 +- .../grids/headers/grid-header.component.ts | 41 ++++++++++++++++++- .../grid-percantge-widths.sample.html | 15 +++---- .../grid-percantge-widths.sample.scss | 9 ++++ .../grid-percantge-widths.sample.ts | 3 +- 8 files changed, 64 insertions(+), 38 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html index 3c90a212bd2..d159f58981e 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html @@ -83,9 +83,7 @@ + [column]="child"> } } @@ -111,6 +109,7 @@ [ghostHost]="grid.outlet.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" + [style.width]="column.resolvedWidth" [igxColumnMovingDrop]="column" [column]="column" > diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts index fd1ec6cc014..7692e16e536 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts @@ -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 { @@ -121,21 +121,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; diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html index 98144bcd0ff..c0136d74a61 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html @@ -66,9 +66,7 @@ + [column]="column"> } } @@ -85,9 +83,7 @@ + [column]="column"> @@ -98,8 +94,6 @@ [ngClass]="column.headerGroupClasses" [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column" - [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL" - [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL" [style.left]="column.rightPinnedOffset"> } diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts index 480e72b768b..20b06c5c4ec 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts @@ -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 { diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index f9b319eeab4..02ce129a63b 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/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); diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html index 569372a8c9f..3bc02248080 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html @@ -1,22 +1,23 @@
- - + + - + - + {{val | date:'dd/MM/yyyy'}} - - + + + -
diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss index 7c04a23abac..8d311316b69 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss @@ -7,3 +7,12 @@ igx-card { text-transform: uppercase; margin: 0.7rem 0 0.3rem; } + +::ng-deep igx-grid-cell { + border-right: 1px solid lightgray; + padding: 0 7px !important; + } + + ::ng-deep igx-grid-header { + padding: 0 7px !important; +} diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts b/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts index 4f6c0632681..c5e43ff3b19 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts @@ -9,7 +9,8 @@ import { IColumnPipeArgs, IgxButtonDirective, IgxCardComponent, IgxCardContentDi providers: [], selector: 'app-grid-percantge-widths.sample', templateUrl: 'grid-percantge-widths.sample.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, IgxSelectItemComponent, IgxButtonDirective, CurrencyPipe, DatePipe] + styleUrls: ['grid-percantge-widths.sample.scss'], + imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, IgxSelectItemComponent, IgxButtonDirective, CurrencyPipe, DatePipe] }) export class GridColumnPercentageWidthsSampleComponent implements OnInit { @ViewChild('grid1', { read: IgxGridComponent, static: true }) From 7bc5d1339af634cf03da42d480d4c20733d8754e Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 5 Sep 2025 16:55:53 +0300 Subject: [PATCH 03/13] chore(*): Adjust where pinned border is applied. --- .../base/grid-filtering-cell.component.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts index a2b08705437..7d4497d6847 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts +++ b/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( From ac8d9e4e528a5a980d79c5fb11f8165ae7e42dff Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 5 Sep 2025 17:00:19 +0300 Subject: [PATCH 04/13] chore(*): Remove header group width pipe as it is not needed. --- .../grids/headers/grid-header-group.component.ts | 2 +- .../grids/headers/grid-header-row.component.ts | 2 +- .../src/lib/grids/headers/pipes.ts | 13 ------------- .../pivot-grid/pivot-header-row.component.html | 16 ++++++++-------- .../pivot-grid/pivot-header-row.component.ts | 4 ++-- .../pivot-row-dimension-content.component.html | 6 +++--- .../pivot-row-dimension-content.component.ts | 4 ++-- 7 files changed, 17 insertions(+), 30 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts index 7692e16e536..af53e361582 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts +++ b/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'; diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts index 20b06c5c4ec..6bc670cc319 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts +++ b/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'; diff --git a/projects/igniteui-angular/src/lib/grids/headers/pipes.ts b/projects/igniteui-angular/src/lib/grids/headers/pipes.ts index f5a6524f881..f779dd390f7 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/pipes.ts +++ b/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, hasLayout: boolean) { - const isFitContent = width === 'fit-content'; - return hasLayout ? '' : isFitContent ? width : `${parseFloat(width)}px`; - } -} - - @Pipe({ name: 'igxHeaderGroupStyle', standalone: true diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html index bdda31181bc..577a0f122e9 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html @@ -254,8 +254,8 @@ } @@ -287,8 +287,8 @@ @@ -303,8 +303,8 @@ @for (column of pinnedEndColumnCollection | igxTopLevel; track column) { } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index 6fd9016f8f6..5f289234260 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts @@ -26,7 +26,7 @@ import { DropPosition } from '../moving/moving.service'; import { IPivotAggregator, IPivotDimension, IPivotValue, PivotDimensionType } from './pivot-grid.interface'; import { PivotUtil } from './pivot-util'; import { IgxGridTopLevelColumns } from '../common/pipes'; -import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from '../headers/pipes'; +import { IgxHeaderGroupStylePipe } from '../headers/pipes'; import { IgxExcelStyleSearchComponent } from '../filtering/excel-style/excel-style-search.component'; import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from '../filtering/excel-style/excel-style-filtering.component'; import { IgxDropDownItemComponent } from '../../drop-down/drop-down-item.component'; @@ -56,7 +56,7 @@ import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.compon NgTemplateOutlet, IgxGridHeaderGroupComponent, NgClass, NgStyle, IgxGridForOfDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, - IgxExcelStyleSearchComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns, + IgxExcelStyleSearchComponent, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns, IgxPivotRowHeaderGroupComponent] }) export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implements OnChanges { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html index ccd4e6af52c..fea1cb9878d 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html @@ -3,9 +3,9 @@
Date: Fri, 5 Sep 2025 17:03:19 +0300 Subject: [PATCH 05/13] chore(*): Leave pinned style on root so background isn't transparent. --- .../src/lib/grids/headers/grid-header-group.component.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts index af53e361582..27d28045182 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts @@ -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}`; } From d3e0544a31ac98d787b84cd747fd2d3d8e8def85 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 9 Sep 2025 11:44:47 +0300 Subject: [PATCH 06/13] chore(*): Set max to multi-col header. --- .../src/lib/grids/headers/grid-header-group.component.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html index d159f58981e..7d9df1fa594 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html +++ b/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) {
From 9ab09965fb8102ea80215d8451d7e704c7d5d120 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 9 Sep 2025 13:28:14 +0300 Subject: [PATCH 07/13] chore(*): Fix auto-size calcs. --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 8 +++----- .../igniteui-angular/src/lib/grids/grid/column.spec.ts | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 715a5d86132..62480f37d53 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -4599,16 +4599,14 @@ 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); + // Take into consideration border since column pinning applies borders to it if its not a columnGroup. + const borderSize = parseFloat(headerStyle.borderRightWidth) + parseFloat(headerStyle.borderLeftWidth); return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) }; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts index 591b01000ed..294740a4186 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts +++ b/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 () => { From b24c28045e4c9538519a8277a39c823d64d7e89d Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 9 Sep 2025 13:35:25 +0300 Subject: [PATCH 08/13] chore(*): Remove border from calc since it's already on the header elem. --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 62480f37d53..4a110f58dc7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -4605,9 +4605,7 @@ export abstract class IgxGridBaseDirective implements GridType, const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) + parseFloat(headerStyle.borderRightWidth); - // Take into consideration border since column pinning applies borders to it if its not a columnGroup. - const borderSize = parseFloat(headerStyle.borderRightWidth) + parseFloat(headerStyle.borderLeftWidth); - return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) }; + return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding) }; } /** From 726e0cf6b044f6645b7fcd0061cb5bd1ae071892 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 9 Sep 2025 13:43:21 +0300 Subject: [PATCH 09/13] chore(*): Set size to filter cell as well. --- .../src/lib/grids/headers/grid-header-group.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html index 7d9df1fa594..88e66e7512f 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html @@ -117,7 +117,7 @@ > @if (grid.allowFiltering && grid.filterMode === 'quickFilter') { - + } @if (!column.columnGroup && column.resizable) { Date: Tue, 9 Sep 2025 15:48:22 +0300 Subject: [PATCH 10/13] chore(*): Update tests to consider borders. --- .../src/lib/grids/grid/column-resizing.spec.ts | 4 ++-- .../src/lib/grids/grid/grid.component.spec.ts | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 45273b7deae..7fb076ad2af 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/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 %.', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 5e25e4e9274..f254c062bd5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/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); } }); From 77e078d18b4a208ca4d2419760d9538b1de705e6 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 9 Sep 2025 16:15:10 +0300 Subject: [PATCH 11/13] chore(*): Move sizes for pivot in pivot header. --- .../pivot-grid/pivot-row-dimension-content.component.html | 3 --- .../pivot-grid/pivot-row-dimension-content.component.ts | 7 ------- .../pivot-row-dimension-header-group.component.html | 3 +++ .../pivot-row-dimension-header-group.component.ts | 8 ++++++++ 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html index fea1cb9878d..44b857d76dd 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html @@ -3,9 +3,6 @@
@if (!column.columnGroup && column.resizable) { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts index b665f9b0056..13cf4335fb1 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts @@ -146,6 +146,14 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup }; } + + protected getHeaderWidthFromDimension() { + if (this.grid.hasHorizontalLayout) { + return this.parent.width === -1 ? 'fit-content' : this.width; + } + return this.grid.rowDimensionWidth(this.parent.rootDimension); + } + private findRootDimension(field: string): IPivotDimension { const rows = this.grid.rowDimensions; let tempRow; From b3818fd9bfb74b692995fc834b04d749bfa52008 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 9 Sep 2025 16:30:16 +0300 Subject: [PATCH 12/13] chore(*): Move func in group. --- .../grids/pivot-grid/pivot-row-header-group.component.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts index a1838ab37bb..f3baf7b4a9f 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts @@ -157,4 +157,11 @@ export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent public override get selectable(): boolean { return false; } + + protected getHeaderWidthFromDimension() { + if (this.grid.hasHorizontalLayout) { + return this.dimWidth === -1 ? 'fit-content' : this.width; + } + return this.grid.rowDimensionWidth(this.parent.rootDimension); + } } From fa23da5c106e743445cfe9e714de2b0a58eea5f6 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 9 Sep 2025 16:40:29 +0300 Subject: [PATCH 13/13] chore(*): Generate elements config. --- .../src/analyzer/elements.config.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index f17b7ad8fb8..132d2b55169 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/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" },