feat(pivotGrid): Implement row dimension headers. #14016

projects/igniteui-angular/migrations/update-17_2_0/changes/inputs.json

@@ -81,6 +81,15 @@
                 "selector": "igx-dialog",
                 "type": "component"
             }
+        },
+        {
+            "name": "showPivotConfigurationUI",
+            "replaceWith": "[pivotUI]",
+            "valueTransform": "pivotConfigurationUI_to_pivotUI",
+            "owner": {
+                "selector": "igx-pivot-grid",
+                "type": "component"
+            }
         }
     ]
 }

projects/igniteui-angular/migrations/update-17_2_0/index.spec.ts

@@ -333,4 +333,20 @@ describe(`Update to ${version}`, () => {
         `
         );
     });
+
+    it('should replace PivotGrid property `showPivotConfigurationUI` with `pivotUI`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-pivot-grid [showPivotConfigurationUI]="false"></igx-pivot-grid>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-pivot-grid [pivotUI]="{ showConfiguration: false }"></igx-pivot-grid>
+        `
+        );
+    });
 });

projects/igniteui-angular/migrations/update-17_2_0/index.ts

@@ -24,5 +24,20 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
         }
     });
 
+    update.addValueTransform('pivotConfiguration_to_pivotUI', (args: BoundPropertyObject): void => {
+        args.bindingType = InputPropertyType.STRING;
+
+        switch (args.value) {
+            case 'true':
+                args.value = '{ showConfiguration: true }';
+                break;
+            case 'false':
+                args.value = '{ showConfiguration: false }';
+                break;
+            default:
+                args.value += ` ? { showConfiguration: true } : { showConfiguration: false } `;
+        }
+    });
+
     update.applyChanges();
 };

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

@@ -3049,6 +3049,15 @@
         border-bottom: 0;
     }
 
+    %igx-grid__tr-pivot--small-row-area {
+        height: var(--header-size);
+        align-items: flex-end;
+
+        border-inline-start: 0;
+        border-inline-end: 0;
+        border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+    }
+
     %igx-grid__tr-pivot--filter-container {
         display: flex;
         flex-direction: column;
@@ -3106,6 +3115,33 @@
                 align-items: center;
             }
         }
+
+        igx-pivot-row-header-group {
+            padding-left: pad-inline(
+                map.get($grid-header-padding-inline, 'compact'),
+                map.get($grid-header-padding-inline, 'cosy'),
+                map.get($grid-header-padding-inline, 'comfortable')
+            );
+
+            igx-pivot-row-dimension-header {
+                align-items: center;
+
+                .igx-grid-th__icons {
+                    padding-right: pad-inline(
+                        map.get($grid-header-padding-inline, 'compact'),
+                        map.get($grid-header-padding-inline, 'cosy'),
+                        map.get($grid-header-padding-inline, 'comfortable')
+                    );
+                }
+            }
+
+            &:last-of-type {
+                igx-pivot-row-dimension-header {
+                    border-inline-end: 0;
+                }
+            }
+        }
     }
+
     // Pivot grid END
 }

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

@@ -34,7 +34,7 @@ import { ISortingExpression, ISortingStrategy, SortingDirection } from '../../da
 import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
-import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface';
+import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings } from '../pivot-grid/pivot-grid.interface';
 import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
 import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
 import { IgxGridValidationService } from '../grid/grid-validation.service';
@@ -1232,7 +1232,7 @@ export interface PivotGridType extends GridType {
      */
     allDimensions: IPivotDimension[],
     /** Specifies whether to show the pivot configuration UI in the grid. */
-    showPivotConfigurationUI: boolean;
+    pivotUI: IPivotUISettings;
     /** @hidden @internal */
     columnDimensions: IPivotDimension[];
     /** @hidden @internal */
@@ -1280,6 +1280,7 @@ export interface PivotGridType extends GridType {
     excelStyleFilterMaxHeight: string;
     excelStyleFilterMinHeight: string;
     valueChipTemplate: TemplateRef<any>;
+    rowDimensionHeaderTemplate: TemplateRef<IgxColumnTemplateContext>;
 }
 
 export interface GridSVGIcon {

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

@@ -18,7 +18,7 @@
 <ng-container *ngIf="!column.columnGroup">
     <div class="igx-grid-th__icons">
         <ng-container *ngIf="column.sortable && !disabled">
-            <div class="sort-icon"
+            <div #sortIconContainer class="sort-icon"
                 [attr.data-sortIndex]="(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions"
                 (pointerdown)="onPointerDownIndicator($event)" (click)="onSortingIconClick($event)">
                 <ng-container *ngTemplateOutlet="sortIconTemplate; context: { $implicit:  this }"></ng-container>

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

@@ -53,6 +53,12 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     @ViewChild('defaultSortHeaderIconTemplate', { read: TemplateRef, static: true })
     protected defaultSortHeaderIconTemplate;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('sortIconContainer', { read: ElementRef })
+    protected sortIconContainer: ElementRef;
+
     /**
      * Returns the `aria-selected` of the header.
      */

projects/igniteui-angular/src/lib/grids/pivot-grid/README.md

@@ -79,7 +79,7 @@ Below is the list of all inputs that are specific to the pivot-grid look/behavio
 |Name|Type|Description|
 |--- |--- |--- |
 |`pivotConfiguration`|IPivotConfiguration|Gets/Sets the pivot configuration with all related dimensions and values.|
-|`showPivotConfigurationUI`|boolean|Gets/Sets the pivot configuration ui for the pivot grid - chips and their corresponding containers for row, filter, column dimensions and values|
+|`pivotUI`|IPivotUISettings|Gets/Sets whether to show the ui for the pivot grid configuration - chips and their corresponding containers for row, filter, column dimensions and values. Also enables/disabled row dimension headers.|
 |`defaultExpandState`| boolean | Gets/Sets the default expand state for all rows. |
 
 Note that the pivot-grid extends base igx-grid, so most of the @Input properties make sense and work in the pivot-grid as well. Keep in mind that due to some specifics, not all grid features and @Input properties will work.

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

@@ -114,7 +114,7 @@
         </igx-circular-bar>
     </div>
 </ng-template>
-<igx-pivot-grid-column-resizer [restrictResizerTop]="theadRow.nativeElement.clientHeight" *ngIf="colResizingService.showResizer"></igx-pivot-grid-column-resizer>
+<igx-pivot-grid-column-resizer [restrictResizerTop]="calculateResizerTop()" *ngIf="colResizingService.showResizer"></igx-pivot-grid-column-resizer>
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
 

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

@@ -33,10 +33,10 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
-import { ColumnType, GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
+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 } from './pivot-grid.interface';
+import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -51,7 +51,13 @@ import {
     IColumnVisibilityChangedEventArgs,
     IGridEditDoneEventArgs,
     IGridToolbarExportEventArgs,
-    IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinRowEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs
+    IPinColumnCancellableEventArgs,
+    IPinColumnEventArgs,
+    IPinRowEventArgs,
+    IRowDataCancelableEventArgs,
+    IRowDataEventArgs,
+    IRowDragEndEventArgs,
+    IRowDragStartEventArgs
 } from '../common/events';
 import { IgxGridRowComponent } from '../grid/grid-row.component';
 import { DropPosition } from '../moving/moving.service';
@@ -74,7 +80,7 @@ import { IgxActionStripToken } from '../../action-strip/token';
 import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy';
 import { PivotSortUtil } from './pivot-sort-util';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
-import { IgxPivotValueChipTemplateDirective } from './pivot-grid.directives';
+import { IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotValueChipTemplateDirective } from './pivot-grid.directives';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
 import { IgxGridValidationService } from '../grid/grid-validation.service';
 import { IgxPivotRowPipe, IgxPivotRowExpansionPipe, IgxPivotAutoTransform, IgxPivotColumnPipe, IgxPivotGridFilterPipe, IgxPivotGridSortingPipe, IgxPivotGridColumnSortingPipe, IgxPivotCellMergingPipe } from './pivot-grid.pipes';
@@ -278,6 +284,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @ContentChild(IgxPivotValueChipTemplateDirective, { read: IgxPivotValueChipTemplateDirective })
     protected valueChipTemplateDirective: IgxPivotValueChipTemplateDirective;
 
+    /**
+     * @hidden @internal
+     */
+    @ContentChild(IgxPivotRowDimensionHeaderTemplateDirective, { read: IgxPivotRowDimensionHeaderTemplateDirective })
+    protected rowDimensionHeaderDirective: IgxPivotRowDimensionHeaderTemplateDirective;
+
     /**
      * Gets/Sets a custom template for the value chips.
      *
@@ -289,6 +301,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @Input()
     public valueChipTemplate: TemplateRef<IgxPivotGridValueTemplateContext>;
 
+    @Input()
+    public rowDimensionHeaderTemplate: TemplateRef<IgxColumnTemplateContext>;
+
     @Input()
     /**
      * Gets/Sets the pivot configuration with all related dimensions and values.
@@ -312,17 +327,23 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this._pivotConfiguration || { rows: null, columns: null, values: null, filters: null };
     }
 
-    @Input({ transform: booleanAttribute })
+    @Input()
     /**
-     * Gets/Sets the pivot configuration ui for the pivot grid - chips and their
+     * Gets/Sets the pivot ui settings for the pivot grid - chips and their
      * corresponding containers for row, filter, column dimensions and values
-     *
+     * as well as headers for the row dimensions values.
      * @example
      * ```html
-     * <igx-pivot-grid [showPivotConfigurationUI]="false"></igx-pivot-grid>
+     * <igx-pivot-grid [pivotUI]="{ showRowHeaders: true }"></igx-pivot-grid>
      * ```
      */
-    public showPivotConfigurationUI = true;
+    public set pivotUI(value: IPivotUISettings) {
+        this._pivotUI = Object.assign(this._pivotUI, value || {});
+    }
+
+    public get pivotUI() {
+        return this._pivotUI;
+    }
 
     /**
      * @hidden @internal
@@ -643,6 +664,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     private _pivotConfiguration: IPivotConfiguration = { rows: null, columns: null, values: null, filters: null };
     private p_id = `igx-pivot-grid-${NEXT_ID++}`;
     private _superCompactMode = false;
+    private _pivotUI: IPivotUISettings = { showConfiguration: true, showRowHeaders: false };
+    private _sortableColumns = true;
 
     /**
     * Gets/Sets the default expand state for all rows.
@@ -1030,6 +1053,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         if (this.valueChipTemplateDirective) {
             this.valueChipTemplate = this.valueChipTemplateDirective.template;
         }
+        if (this.rowDimensionHeaderDirective) {
+            this.rowDimensionHeaderTemplate = this.rowDimensionHeaderDirective.template;
+        }
     }
 
     /**
@@ -1164,7 +1190,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             return 0;
         }
 
-        if (!dim.width) {
+        if (!dim?.width) {
             return MINIMUM_COLUMN_WIDTH;
         }
         const isPercent = dim.width && dim.width.indexOf('%') !== -1;
@@ -2024,11 +2050,15 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     protected generateDimensionColumns(): IgxColumnComponent[] {
-        const rootFields = this.allDimensions.map(x => x.memberName);
         const columns = [];
-        rootFields.forEach((field) => {
+        this.allDimensions.forEach((dim) => {
             const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
-            ref.instance.field = field;
+            ref.instance.field = dim.memberName;
+            ref.instance.header = dim.displayName || dim.memberName;
+            ref.instance.headerTemplate = this.rowDimensionHeaderTemplate;
+            ref.instance.resizable = this.rowDimensionResizing;
+            ref.instance.sortable = this._sortableColumns;
+            ref.instance.width = this.rowDimensionWidthToPixels(dim) + 'px';
             ref.changeDetectorRef.detectChanges();
             columns.push(ref.instance);
         });
@@ -2163,7 +2193,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.instance.width = isPercent ? childWidth + '%' : childWidth + 'px';
             }
             ref.instance.hidden = hidden;
-            ref.instance.sortable = true;
+            ref.instance.sortable = this._sortableColumns;
             ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);
             ref.instance.formatter = val.formatter;
             ref.changeDetectorRef.detectChanges();
@@ -2211,4 +2241,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.valueInit.emit(val);
         });
     }
+
+    protected rowDimensionByName(memberName: string) {
+        return this.rowDimensions.find((rowDim) => rowDim.memberName === memberName);
+    }
+
+    protected calculateResizerTop() {
+        return this.pivotUI.showRowHeaders ?
+            (this.theadRow.pivotFilterContainer?.nativeElement.offsetHeight || 0) + (this.theadRow.pivotRowContainer?.nativeElement.offsetHeight || 0) :
+            this.theadRow.nativeElement.offsetHeight;
+    }
 }

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

@@ -1,5 +1,6 @@
 import { Directive, TemplateRef } from '@angular/core';
 import { IgxPivotGridValueTemplateContext } from './pivot-grid.interface';
+import { IgxColumnTemplateContext } from '../common/grid.interface';
 /**
  * @hidden
  */
@@ -10,7 +11,22 @@ import { IgxPivotGridValueTemplateContext } from './pivot-grid.interface';
 export class IgxPivotValueChipTemplateDirective {
     constructor(public template: TemplateRef<IgxPivotGridValueTemplateContext>) { }
     public static ngTemplateContextGuard(_directive: IgxPivotValueChipTemplateDirective,
-        context: unknown): context is IgxPivotGridValueTemplateContext { 
+        context: unknown): context is IgxPivotGridValueTemplateContext {
+        return true;
+    }
+}
+
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxPivotRowDimensionHeader]',
+    standalone: true
+})
+export class IgxPivotRowDimensionHeaderTemplateDirective {
+    constructor(public template: TemplateRef<IgxColumnTemplateContext>) { }
+    public static ngTemplateContextGuard(_directive: IgxPivotRowDimensionHeaderTemplateDirective,
+        context: unknown): context is IgxColumnTemplateContext {
         return true;
     }
 }

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

@@ -192,6 +192,11 @@ export enum PivotDimensionType {
     Filter
 }
 
+export interface IPivotUISettings {
+    showConfiguration?: boolean;
+    showRowHeaders?: boolean;
+}
+
 export type PivotAggregationType = 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'COUNT' | 'LATEST' | 'EARLIEST' ;
 
 /** Interface describing the pivot dimension data.