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

@@ -3492,8 +3492,23 @@
         }
     }
 
+    .igx-grid__tbody-pivot-dimension {
+        > .igx-grid-thead__wrapper {
+            border-bottom: initial;
+        }
+
+        .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;
         }
     }

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

@@ -130,14 +130,22 @@
 </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)">
+        <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 +154,11 @@
                                              [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>
     </div>
+
 </ng-template>
 
 <ng-template #horizontalRowDimensionsTemplate>
@@ -163,6 +175,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.height.px]="remainingBottomSize" [style.width.px]="pivotRowWidths">
+            <div class="igx-grid-th"></div>
+        </div>
     </div>
 </ng-template>
 

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

@@ -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;
@@ -1289,8 +1293,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

@@ -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">
@@ -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>

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 '../columns/column.component';
 
 /**
  *
@@ -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
@@ -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;
         }
@@ -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 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

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;