feat(pivotGrid): Improve PivotGrid visually when there's no data or has empty area at the bottom.

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -3500,6 +3500,17 @@
         }
     }
 
+    .igx-pivot-grid-row-filler__wrapper {
+        .igx-grid-thead__wrapper {
+            height: 100%;
+            border-bottom: initial;
+
+            .igx-grid-th {
+                height: 100%;
+            }
+        }
+    }
+
     %igx-grid__tbody-pivot-mrl-dimension {
         .igx-grid-th {
             border-bottom: none;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html

@@ -157,6 +157,7 @@
                     [width]="rowDimensionWidthToPixels(dim)">
                 </igx-pivot-row-dimension-content>
             </ng-template>
+            <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(dim) }"></ng-container>
         </div>
     }
 </ng-template>
@@ -175,20 +176,22 @@
                 <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 *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: pivotRowWidths }"></ng-container>
     </div>
 </ng-template>
 
 <ng-template #emptyRowDimensionsTemplate>
-    @if (columnDimensions.length > 0 || values.length > 0) {
-        <div tabindex="0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+    <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>
-        </div>
-    }
+        }
+        <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(emptyRowDimension) }"></ng-container>
+    </div>
 </ng-template>
 
 <ng-template #emptyPivotGridTemplate>
@@ -197,6 +200,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>

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

@@ -1148,6 +1148,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return false;
     }
 
+    protected get emptyBottomSize() {
+        return this.totalHeight - (<any>this.verticalScroll).scrollComponent.size;
+    }
+
     /** @hidden @internal */
     public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
         options.outlet = this.outlet;
@@ -1286,8 +1290,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 Math.max(0, this.calcWidth - this.pivotRowWidths);
+        }
+
+        const totalDimWidth = this.visibleRowDimensions.length > 0 ?
+            this.visibleRowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
             0;
         return this.calcWidth - totalDimWidth;
     }

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

@@ -247,7 +247,7 @@
                 </div>
             }
 
-            @if (grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0) {
+            @if (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">
                     @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {
                         @if (getRowDimensionColumn(dim); as dimCol) {
@@ -277,20 +277,20 @@
                     </igx-grid-header-group>
                 }
             }
-            <div class="igx-grid-thead--virtualizationWrapper" [style.max-height.px]='maxContainerHeight' (click)="grid.navigation.focusOutRowHeader($event)">
+            <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) {
-                    <div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' [style.width.px]='grid.unpinnedWidth'>
+                    <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"
+                            [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>

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

@@ -66,7 +66,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
@@ -188,7 +187,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;
         }

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>

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;