From 087cb3ade850117126edd59d1967f570ddcacaff Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 09:19:09 +0200
Subject: [PATCH 01/13] fix(pivotGrid): Do not render empty columns for
 PivotGrid when there's still no data.

---
 .../src/lib/grids/pivot-grid/pivot-header-row.component.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4c1cf49841b..b6bf01dc3aa 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
@@ -188,7 +188,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
         if (columnDimensions.length === 0) {
             return 1;
         }
-        let totalDepth = columnDimensions.map(x => PivotUtil.getDimensionDepth(x) + 1).reduce((acc, val) => acc + val);
+        let totalDepth = columnDimensions.map(x => this.grid.data.length > 0 ? PivotUtil.getDimensionDepth(x) + 1 : 0).reduce((acc, val) => acc + val);
         if (this.grid.hasMultipleValues) {
             totalDepth += 1;
         }

From 14e991d048a0971e3ccc2309998c5ccac1c73a5f Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 09:20:26 +0200
Subject: [PATCH 02/13] fix(pivotGrid): Fix empty space at the bottom of Pivot
 Grid due to ngFor rerender.

---
 .../pivot-grid/pivot-header-row.component.html      | 13 +++++++------
 .../grids/pivot-grid/pivot-header-row.component.ts  | 11 ++++++++++-
 2 files changed, 17 insertions(+), 7 deletions(-)

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 637e952d7fe..6fe87d6a706 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
@@ -255,19 +255,20 @@
                     </igx-grid-header-group>
                 </ng-container>
             </ng-container>
-            <div class="igx-grid-thead--virtualizationWrapper"  [style.max-height.px]='maxContainerHeight' (click)="grid.navigation.focusOutRowHeader($event)">
-                <div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>
+            <div class="igx-grid-thead--virtualizationWrapper"  [style.max-height.px]="maxContainerHeight" (click)="grid.navigation.focusOutRowHeader($event)">
+                <div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]="totalDepth > 1 ? grid.rowHeight : undefined"
+                        *ngFor="let dimLevelColumns of columnDimensionsByLevel; let i = index; trackBy: trackColumnDimensionByLevel;" [style.width.px]="grid.unpinnedWidth">
                     <ng-template igxGridFor #headerVirtualContainer let-column
-                                 [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]="grid.parentVirtDir"
+                                 [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache]="true" [igxForScrollContainer]="grid.parentVirtDir"
                                  [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
                                  [igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
                         <igx-grid-header-group [ngClass]="column.headerGroupClasses"
-                                               [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'
+                                               [style.height.px]="totalDepth > 1 ? calcHeight(column, i) : undefined"
                                                [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"
-                                               [class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'
-                                               [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'
+                                               [class.igx-grid__tr-pivot--columnDimensionLeaf]="isDuplicateOfExistingParent(column, i)"
+                                               [class.igx-grid__tr-pivot--columnMultiRowSpan]="isMultiRow(column, i)"
                         >
                         </igx-grid-header-group>
                     </ng-template>
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 b6bf01dc3aa..372d514bf61 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
@@ -38,6 +38,7 @@ import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive
 import { NgIf, NgFor, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component';
 import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component';
+import { IgxColumnComponent } from 'igniteui-angular';
 
 /**
  *
@@ -66,7 +67,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     public filterDropdownDimensions: Set<any> = new Set<any>();
     public filterAreaDimensions: Set<any> = new Set<any>();
     private _dropPos = DropPosition.AfterDropTarget;
-    private valueData: Map<string, IPivotAggregator[]>;
     private _subMenuPositionSettings: PositionSettings = {
         verticalStartPoint: VerticalAlignment.Bottom,
         closeAnimation: undefined
@@ -203,6 +203,15 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
         return this.totalDepth * this.grid.renderedRowHeight;
     }
 
+    /**
+    * @hidden
+    * @internal
+    * Use tracking function to fix ngFor not clearing old records while updating, causing incorrect header height during _calculateGridBodyHeight.
+    */
+    public trackColumnDimensionByLevel(_, item: IgxColumnComponent[]) {
+        return item.map(col => col.field).join('-');
+    }
+
     /**
     * @hidden
     * @internal

From 770d3ef03b1dced7f729ec705fe1b508e74941a1 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 09:22:07 +0200
Subject: [PATCH 03/13] fix(pivotGrid): Fix empty space for body when there's
 still no data and is in horizontal layout.

---
 .../src/lib/grids/pivot-grid/pivot-grid.component.ts      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index 1b91da92ff7..85048adbdaf 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -1289,8 +1289,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     /** @hidden @internal */
     public get pivotContentCalcWidth() {
-        const totalDimWidth = this.rowDimensions.length > 0 ?
-            this.rowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
+        if (!this.visibleRowDimensions.length) {
+            return this.calcWidth;
+        }
+
+        const totalDimWidth = this.visibleRowDimensions.length > 0 ?
+            this.visibleRowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
             0;
         return this.calcWidth - totalDimWidth;
     }

From a9c407027af60d5b2e28f74513223619a230b64f Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 09:23:44 +0200
Subject: [PATCH 04/13] feat(pivotGrid): Add row columns area to fill empty
 space.

Applicable when there's no data or all rows are less than grid height.
---
 .../styles/components/grid/_grid-theme.scss   | 10 ++++++
 .../pivot-grid/pivot-grid.component.html      | 32 ++++++++++++++-----
 .../grids/pivot-grid/pivot-grid.component.ts  |  6 +++-
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 90ce37cda12..9f4ff2f9007 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -3492,10 +3492,20 @@
         }
     }
 
+    .igx-grid__tbody-pivot-dimension {
+        & > .igx-grid-thead__wrapper {
+            border-bottom: initial;
+        }
+    }
+
     %igx-grid__tbody-pivot-mrl-dimension {
         .igx-grid-th {
             border-bottom: none;
         }
+
+        & > .igx-grid-thead__wrapper {
+            border-bottom: initial;
+        }
     }
 
     // Pivot grid END
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
index f027ce2452c..21873e4cab9 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -130,14 +130,23 @@
 </ng-template>
 
 <ng-template #defaultRowDimensionsTemplate>
-    <div tabindex="0" [style.height.px]="totalHeight" *ngFor="let dim of rowDimensions; let dimIndex = index;" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
-        <ng-template igxGridFor let-rowData [igxGridForOf]="dataView
-        | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger"
-                     let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
-                     [igxForContainerSize]="calcHeight"
-                     [igxForItemSize]="renderedRowHeight"
-                     [igxForSizePropName]="'height'"
-                     #verticalRowDimScrollContainer>
+    <div #rowDimensionContainer
+        *ngFor="let dim of rowDimensions; let dimIndex = index;"
+        tabindex="0"
+        role="rowgroup"
+        class="igx-grid__tbody-pivot-dimension"
+        [style.height.px]="totalHeight"
+        (focus)="navigation.focusTbody($event)"
+        (keydown)="navigation.handleNavigation($event)"
+        [style.width.px]="rowDimensionWidthToPixels(dim)">
+        <ng-template igxGridFor let-rowData [igxGridForOf]="dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger"
+            let-rowIndex="index"
+            [igxForScrollOrientation]="'vertical'"
+            [igxForScrollContainer]="verticalScroll"
+            [igxForContainerSize]="calcHeight"
+            [igxForItemSize]="renderedRowHeight"
+            [igxForSizePropName]="'height'"
+            #verticalRowDimScrollContainer>
             <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
                                              [dimension]="rowData.dimensions[dimIndex]"
                                              [rootDimension]="dim"
@@ -146,7 +155,11 @@
                                              [width]="rowDimensionWidthToPixels(dim)">
             </igx-pivot-row-dimension-content>
         </ng-template>
+        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.width]="'100%'" [style.height.px]="remainingBottomSize">
+            <div class="igx-grid-th" [style.width]="'100%'" [style.height]="'100%'"></div>
+        </div>
     </div>
+
 </ng-template>
 
 <ng-template #horizontalRowDimensionsTemplate>
@@ -163,6 +176,9 @@
                 <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
             </ng-template>
         </ng-container>
+        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.width.px]="'100%'" [style.height.px]="remainingBottomSize">
+            <div class="igx-grid-th" [style.width]="'100%'" [style.height]="'100%'"></div>
+        </div>
     </div>
 </ng-template>
 
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index 85048adbdaf..f54ecbbbb49 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -39,7 +39,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
 import { ColumnType, GridType, IGX_GRID_BASE, IgxColumnTemplateContext, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings, PivotRowLayoutType, PivotSummaryPosition } from './pivot-grid.interface';
+import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings, PivotRowLayoutType, PivotSummaryPosition, IPivotGridGroupRecord } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -1151,6 +1151,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return false;
     }
 
+    protected get remainingBottomSize() {
+        return this.totalHeight - (<any>this.verticalScroll).scrollComponent.size;
+    }
+
     /** @hidden @internal */
     public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
         options.outlet = this.outlet;

From 9858ca07be458cd3807894b1961f8f71996082d4 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 09:35:34 +0200
Subject: [PATCH 05/13] chore(*): Clear old import and add more info.

---
 .../src/lib/grids/pivot-grid/pivot-grid.component.ts            | 2 +-
 .../src/lib/grids/pivot-grid/pivot-header-row.component.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index f54ecbbbb49..7f858a953b9 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -39,7 +39,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
 import { ColumnType, GridType, IGX_GRID_BASE, IgxColumnTemplateContext, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings, PivotRowLayoutType, PivotSummaryPosition, IPivotGridGroupRecord } from './pivot-grid.interface';
+import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings, PivotRowLayoutType, PivotSummaryPosition } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
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 372d514bf61..8ecbf055861 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
@@ -206,7 +206,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     /**
     * @hidden
     * @internal
-    * Use tracking function to fix ngFor not clearing old records while updating, causing incorrect header height during _calculateGridBodyHeight.
+    * Use tracking function to fix ngFor not clearing old records from the DOM while updating it, causing incorrect header height during _calculateGridBodyHeight.
     */
     public trackColumnDimensionByLevel(_, item: IgxColumnComponent[]) {
         return item.map(col => col.field).join('-');

From 1c09b20924364542bda2060b6bdb728b2d603d8c Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 09:59:26 +0200
Subject: [PATCH 06/13] feat(pivotGrid): Unify row dimension sections width
 when there's no data.

---
 .../src/lib/grids/pivot-grid/pivot-grid.component.html    | 2 +-
 .../src/lib/grids/pivot-grid/pivot-grid.component.ts      | 2 +-
 .../lib/grids/pivot-grid/pivot-header-row.component.html  | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
index 21873e4cab9..453f051f392 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -163,7 +163,7 @@
 </ng-template>
 
 <ng-template #horizontalRowDimensionsTemplate>
-    <div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+    <div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)" [style.width.px]="pivotRowWidths">
         <ng-container *ngIf="dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger as groupedData">
             <ng-template #verticalRowDimScrollContainer role="rowgroup" igxGridFor let-rowGroup let-rowIndex="index"
                     [igxGridForOf]="groupedData"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index 7f858a953b9..45a149d856d 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -1294,7 +1294,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /** @hidden @internal */
     public get pivotContentCalcWidth() {
         if (!this.visibleRowDimensions.length) {
-            return this.calcWidth;
+            return this.calcWidth - this.pivotRowWidths;
         }
 
         const totalDimWidth = this.visibleRowDimensions.length > 0 ?
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 6fe87d6a706..3e1e96ae0cc 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
@@ -227,8 +227,8 @@
                 </div>
             </ng-container>
 
-            <ng-container *ngIf="grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0">
-                <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
+            <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
+                <ng-container *ngIf="grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0">
                     <ng-container *ngFor="let dim of grid.visibleRowDimensions; index as colIndex;last as isLast">
                         <igx-pivot-row-header-group #rowDimensionHeaders *ngIf="getRowDimensionColumn(dim) as dimCol"
                             [ngClass]="dimCol.headerGroupClasses"
@@ -241,8 +241,8 @@
                             [rowIndex]="-1" >
                         </igx-pivot-row-header-group>
                     </ng-container>
-                </div>
-            </ng-container>
+                </ng-container>
+            </div>
 
             <!-- Pinned columns collection from the start -->
             <ng-container *ngIf="pinnedColumnCollection.length && grid.isPinningToStart">

From ac22809ba3cf100c0542d52ed30374663c6ae132 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 10:06:30 +0200
Subject: [PATCH 07/13] chore(*): Remove unnecessary nesting css selector.

---
 .../src/lib/core/styles/components/grid/_grid-theme.scss      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 9f4ff2f9007..6d187e2e233 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -3493,7 +3493,7 @@
     }
 
     .igx-grid__tbody-pivot-dimension {
-        & > .igx-grid-thead__wrapper {
+        > .igx-grid-thead__wrapper {
             border-bottom: initial;
         }
     }
@@ -3503,7 +3503,7 @@
             border-bottom: none;
         }
 
-        & > .igx-grid-thead__wrapper {
+        > .igx-grid-thead__wrapper {
             border-bottom: initial;
         }
     }

From eaa8a041c9c235d828cbce880422fd4f922568f0 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 18 Feb 2025 11:12:44 +0200
Subject: [PATCH 08/13] chore(*): Fix wrong column import

---
 .../src/lib/grids/pivot-grid/pivot-header-row.component.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 8ecbf055861..adb47b046a1 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
@@ -38,7 +38,7 @@ import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive
 import { NgIf, NgFor, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component';
 import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component';
-import { IgxColumnComponent } from 'igniteui-angular';
+import { IgxColumnComponent } from '../columns/column.component';
 
 /**
  *

From c7583154e99f6280c47798c8a5671fb03f0756fc Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Thu, 20 Feb 2025 18:44:12 +0200
Subject: [PATCH 09/13] fix(pivotGrid): Fix inital size of pivot grid not
 sizing based on content when parent has no width.

---
 .../styles/components/grid/_grid-theme.scss   | 11 +++-
 .../pivot-grid/pivot-grid.component.html      | 13 ++---
 .../grids/pivot-grid/pivot-grid.component.ts  |  2 +-
 .../pivot-grid-state.sample.html              | 57 ++++++++++---------
 .../pivot-grid-state.sample.scss              |  2 +-
 5 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 6d187e2e233..dc67358689c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -3496,16 +3496,21 @@
         > .igx-grid-thead__wrapper {
             border-bottom: initial;
         }
-    }
 
-    %igx-grid__tbody-pivot-mrl-dimension {
         .igx-grid-th {
-            border-bottom: none;
+            height: 100%;
         }
+    }
 
+    %igx-grid__tbody-pivot-mrl-dimension {
         > .igx-grid-thead__wrapper {
             border-bottom: initial;
         }
+
+        .igx-grid-th {
+            height: 100%;
+            border-bottom: none;
+        }
     }
 
     // Pivot grid END
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
index 453f051f392..61a662bf387 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -137,8 +137,7 @@
         class="igx-grid__tbody-pivot-dimension"
         [style.height.px]="totalHeight"
         (focus)="navigation.focusTbody($event)"
-        (keydown)="navigation.handleNavigation($event)"
-        [style.width.px]="rowDimensionWidthToPixels(dim)">
+        (keydown)="navigation.handleNavigation($event)">
         <ng-template igxGridFor let-rowData [igxGridForOf]="dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger"
             let-rowIndex="index"
             [igxForScrollOrientation]="'vertical'"
@@ -155,15 +154,15 @@
                                              [width]="rowDimensionWidthToPixels(dim)">
             </igx-pivot-row-dimension-content>
         </ng-template>
-        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.width]="'100%'" [style.height.px]="remainingBottomSize">
-            <div class="igx-grid-th" [style.width]="'100%'" [style.height]="'100%'"></div>
+        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="rowDimensionWidthToPixels(dim)">
+            <div class="igx-grid-th"></div>
         </div>
     </div>
 
 </ng-template>
 
 <ng-template #horizontalRowDimensionsTemplate>
-    <div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)" [style.width.px]="pivotRowWidths">
+    <div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
         <ng-container *ngIf="dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger as groupedData">
             <ng-template #verticalRowDimScrollContainer role="rowgroup" igxGridFor let-rowGroup let-rowIndex="index"
                     [igxGridForOf]="groupedData"
@@ -176,8 +175,8 @@
                 <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
             </ng-template>
         </ng-container>
-        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.width.px]="'100%'" [style.height.px]="remainingBottomSize">
-            <div class="igx-grid-th" [style.width]="'100%'" [style.height]="'100%'"></div>
+        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="pivotRowWidths">
+            <div class="igx-grid-th"></div>
         </div>
     </div>
 </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index 45a149d856d..bbbe8343a3c 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -1294,7 +1294,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /** @hidden @internal */
     public get pivotContentCalcWidth() {
         if (!this.visibleRowDimensions.length) {
-            return this.calcWidth - this.pivotRowWidths;
+            return Math.max(0, this.calcWidth - this.pivotRowWidths);
         }
 
         const totalDimWidth = this.visibleRowDimensions.length > 0 ?
diff --git a/src/app/pivot-grid-state/pivot-grid-state.sample.html b/src/app/pivot-grid-state/pivot-grid-state.sample.html
index 4afc8d18613..824c946dde7 100644
--- a/src/app/pivot-grid-state/pivot-grid-state.sample.html
+++ b/src/app/pivot-grid-state/pivot-grid-state.sample.html
@@ -1,31 +1,34 @@
 <div class="sample-flex-row">
-    <button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
-    <button igxButton="contained" (click)="restoreState()">RESTORE STATE</button>
-    <button igxButton="contained" (click)="export()">EXPORT</button>
-    <igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowHeadersToggle($event)">Show headers</igx-switch>
-    <igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
-<div class="pivot-container">
     <div>
-        <igx-pivot-grid
-            #grid1
-            [igxGridState]="options"
-            (valueInit)='onValueInit($event)'
-            (dimensionInit)='onDimensionInit($event)'
-            [data]="origData"
-            [width]="'100%'"
-            [height]="'800px'"
-            [superCompactMode]="true"
-            [defaultExpandState]="true"
-            [pivotConfiguration]="pivotConfigHierarchy"
-            [pivotUI]="pivotUI"
-            [allowFiltering]="true"
-            [filterMode]="'quickFilter'"
-            [rowSelection]="'single'"
-        >
-            <ng-template igxPivotRowDimensionHeader let-col>
-                <span>{{col.header}} 📐</span>
-            </ng-template>
-        </igx-pivot-grid>
+        <button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
+        <button igxButton="contained" (click)="restoreState()">RESTORE STATE</button>
+        <button igxButton="contained" (click)="export()">EXPORT</button>
+        <igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowHeadersToggle($event)">Show headers</igx-switch>
+        <igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
+    </div>
+    <div class="pivot-container">
+        <div style="width: 100%;">
+            <igx-pivot-grid
+                #grid1
+                [igxGridState]="options"
+                (valueInit)='onValueInit($event)'
+                (dimensionInit)='onDimensionInit($event)'
+                [data]="origData"
+                [width]="'100%'"
+                [height]="'800px'"
+                [superCompactMode]="true"
+                [defaultExpandState]="true"
+                [pivotConfiguration]="pivotConfigHierarchy"
+                [pivotUI]="pivotUI"
+                [allowFiltering]="true"
+                [filterMode]="'quickFilter'"
+                [rowSelection]="'single'"
+            >
+                <ng-template igxPivotRowDimensionHeader let-col>
+                    <span>{{col.header}} 📐</span>
+                </ng-template>
+            </igx-pivot-grid>
+        </div>
+        <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
     </div>
-    <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
 </div>
diff --git a/src/app/pivot-grid-state/pivot-grid-state.sample.scss b/src/app/pivot-grid-state/pivot-grid-state.sample.scss
index 9504c49e32d..87497a93579 100644
--- a/src/app/pivot-grid-state/pivot-grid-state.sample.scss
+++ b/src/app/pivot-grid-state/pivot-grid-state.sample.scss
@@ -13,8 +13,8 @@ igx-pivot-grid {
 }
 
 .sample-flex-row {
-    align-items: center;
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
     gap: 16px;
     margin-bottom: 16px;

From 55017cf3714a3b3e597a21be0ce08e56d65fff36 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Thu, 27 Feb 2025 10:37:50 +0200
Subject: [PATCH 10/13] fix(pivotGrid): Cover additional cases for empty row
 dimension list. Add separate fill style and template.

---
 .../styles/components/grid/_grid-theme.scss   | 16 +++-----
 .../pivot-grid/pivot-grid.component.html      | 37 ++++++++++++-------
 .../grids/pivot-grid/pivot-grid.component.ts  |  2 +-
 .../pivot-header-row.component.html           |  9 +++--
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index dc67358689c..386c989d1fd 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -3492,23 +3492,19 @@
         }
     }
 
-    .igx-grid__tbody-pivot-dimension {
-        > .igx-grid-thead__wrapper {
+    .igx-pivot-grid-row-filler__wrapper {
+        .igx-grid-thead__wrapper {
+            height: 100%;
             border-bottom: initial;
-        }
 
-        .igx-grid-th {
-            height: 100%;
+            .igx-grid-th {
+                height: 100%;
+            }
         }
     }
 
     %igx-grid__tbody-pivot-mrl-dimension {
-        > .igx-grid-thead__wrapper {
-            border-bottom: initial;
-        }
-
         .igx-grid-th {
-            height: 100%;
             border-bottom: none;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
index 61a662bf387..cd28149bb37 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -154,11 +154,8 @@
                                              [width]="rowDimensionWidthToPixels(dim)">
             </igx-pivot-row-dimension-content>
         </ng-template>
-        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="rowDimensionWidthToPixels(dim)">
-            <div class="igx-grid-th"></div>
-        </div>
+        <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(dim) }"></ng-container>
     </div>
-
 </ng-template>
 
 <ng-template #horizontalRowDimensionsTemplate>
@@ -175,20 +172,21 @@
                 <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
             </ng-template>
         </ng-container>
-        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="pivotRowWidths">
-            <div class="igx-grid-th"></div>
-        </div>
+        <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: pivotRowWidths }"></ng-container>
     </div>
 </ng-template>
 
 <ng-template #emptyRowDimensionsTemplate>
-    <div tabindex="0" *ngIf="columnDimensions.length > 0 || values.length > 0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
-        <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
-            [dimension]="emptyRowDimension"
-            [rootDimension]="emptyRowDimension"
-            [rowIndex]="0" [rowData]="dataView[0]"
-            [width]="rowDimensionWidthToPixels(emptyRowDimension)">
-        </igx-pivot-row-dimension-content>
+    <div tabindex="0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+        @if ((columnDimensions.length > 0 || values.length > 0) && data.length > 0) {
+            <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
+                [dimension]="emptyRowDimension"
+                [rootDimension]="emptyRowDimension"
+                [rowIndex]="0" [rowData]="dataView[0]"
+                [width]="rowDimensionWidthToPixels(emptyRowDimension)">
+            </igx-pivot-row-dimension-content>
+        }
+        <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(emptyRowDimension) }"></ng-container>
     </div>
 </ng-template>
 
@@ -198,6 +196,17 @@
     </span>
 </ng-template>
 
+<ng-template #emptyRowDimensionFill let-width="widthPx">
+    @if (emptyBottomSize > 0) {
+        <div class="igx-pivot-grid-row-filler__wrapper" [style.height.px]="emptyBottomSize" [style.width.px]="width">
+            <!-- Reuse header styles to keep visuals consistent -->
+            <div class="igx-grid-thead__wrapper">
+                <div class="igx-grid-th"></div>
+            </div>
+        </div>
+    }
+</ng-template>
+
 <div [hidden]="true">
     <igx-grid-excel-style-filtering [maxHeight]="excelStyleFilterMaxHeight" [minHeight]="excelStyleFilterMinHeight">
         <div igxExcelStyleColumnOperations [hidden]="true"></div>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index bbbe8343a3c..052bfa981a6 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -1151,7 +1151,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return false;
     }
 
-    protected get remainingBottomSize() {
+    protected get emptyBottomSize() {
         return this.totalHeight - (<any>this.verticalScroll).scrollComponent.size;
     }
 
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 3e1e96ae0cc..3f7f8b73d9b 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
@@ -227,8 +227,9 @@
                 </div>
             </ng-container>
 
-            <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
-                <ng-container *ngIf="grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0">
+            <!-- Pivot Row Headers only area. If there are defined row dimension, but data is missing so no visibleRowDimensions are calculated, will show just empty area. -->
+            <ng-container *ngIf="grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0">
+                <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
                     <ng-container *ngFor="let dim of grid.visibleRowDimensions; index as colIndex;last as isLast">
                         <igx-pivot-row-header-group #rowDimensionHeaders *ngIf="getRowDimensionColumn(dim) as dimCol"
                             [ngClass]="dimCol.headerGroupClasses"
@@ -241,8 +242,8 @@
                             [rowIndex]="-1" >
                         </igx-pivot-row-header-group>
                     </ng-container>
-                </ng-container>
-            </div>
+                </div>
+            </ng-container>
 
             <!-- Pinned columns collection from the start -->
             <ng-container *ngIf="pinnedColumnCollection.length && grid.isPinningToStart">

From b9bc72192dc6de33a0bbb010598045578768cf28 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Tue, 4 Mar 2025 14:27:38 +0200
Subject: [PATCH 11/13] chore(*): Apply back track function after merge.

---
 .../src/lib/grids/pivot-grid/pivot-header-row.component.html    | 2 +-
 .../src/lib/grids/pivot-grid/pivot-header-row.component.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 b238803b861..8675b5f82a8 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
@@ -278,7 +278,7 @@
                 }
             }
             <div class="igx-grid-thead--virtualizationWrapper" [style.max-height.px]="maxContainerHeight" (click)="grid.navigation.focusOutRowHeader($event)">
-                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {
+                @for (dimLevelColumns of columnDimensionsByLevel; track trackColumnDimensionByLevel(dimLevelColumns); let i = $index) {
                     <div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]="totalDepth > 1 ? grid.rowHeight : undefined" [style.width.px]="grid.unpinnedWidth">
                         <ng-template igxGridFor #headerVirtualContainer let-column
                             [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache]="true" [igxForScrollContainer]="grid.parentVirtDir"
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 4e35e913dda..3499e268584 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
@@ -208,7 +208,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     * @internal
     * Use tracking function to fix ngFor not clearing old records from the DOM while updating it, causing incorrect header height during _calculateGridBodyHeight.
     */
-    public trackColumnDimensionByLevel(_, item: IgxColumnComponent[]) {
+    public trackColumnDimensionByLevel(item: IgxColumnComponent[]) {
         return item.map(col => col.field).join('-');
     }
 

From c0d79f6f51a8e50efb4cb51cdd2d80e78b79e51d Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Wed, 5 Mar 2025 17:10:32 +0200
Subject: [PATCH 12/13] chore(*): Remove back track function due to duplicate
 keys.

---
 .../lib/grids/pivot-grid/pivot-header-row.component.html | 2 +-
 .../lib/grids/pivot-grid/pivot-header-row.component.ts   | 9 ---------
 2 files changed, 1 insertion(+), 10 deletions(-)

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 8675b5f82a8..b238803b861 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
@@ -278,7 +278,7 @@
                 }
             }
             <div class="igx-grid-thead--virtualizationWrapper" [style.max-height.px]="maxContainerHeight" (click)="grid.navigation.focusOutRowHeader($event)">
-                @for (dimLevelColumns of columnDimensionsByLevel; track trackColumnDimensionByLevel(dimLevelColumns); let i = $index) {
+                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {
                     <div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]="totalDepth > 1 ? grid.rowHeight : undefined" [style.width.px]="grid.unpinnedWidth">
                         <ng-template igxGridFor #headerVirtualContainer let-column
                             [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache]="true" [igxForScrollContainer]="grid.parentVirtDir"
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 3499e268584..e9f8e9ecf25 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
@@ -203,15 +203,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
         return this.totalDepth * this.grid.renderedRowHeight;
     }
 
-    /**
-    * @hidden
-    * @internal
-    * Use tracking function to fix ngFor not clearing old records from the DOM while updating it, causing incorrect header height during _calculateGridBodyHeight.
-    */
-    public trackColumnDimensionByLevel(item: IgxColumnComponent[]) {
-        return item.map(col => col.field).join('-');
-    }
-
     /**
     * @hidden
     * @internal

From 4e8f64a845963e01fafe4738e5dac24b1a22b9b6 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Wed, 5 Mar 2025 17:13:01 +0200
Subject: [PATCH 13/13] chore(*): Remove unused import.

---
 .../src/lib/grids/pivot-grid/pivot-header-row.component.ts       | 1 -
 1 file changed, 1 deletion(-)

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 e9f8e9ecf25..0b563f9bfa9 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
@@ -38,7 +38,6 @@ import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component';
 import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component';
-import { IgxColumnComponent } from '../columns/column.component';
 
 /**
  *