@progress/kendo-angular-pivotgrid 15.2.0-develop.1 → 15.2.0-develop.3

package/esm2020/index.mjs

@@ -18,5 +18,10 @@ export { DropTargetDirective } from './configurator/drop-target.directive';
 // Events
 export { ExpandChangeEvent } from './models/expanded-change-event';
 export { ConfigurationChangeEvent } from './models/configuration-change-event';
+// Template Directives
+export { CellTemplateDirective } from './rendering/templates/pivotgrid-cell-template.directive';
+export { ValueCellTemplateDirective } from './rendering/templates/pivotgrid-value-cell-template.directive';
+export { RowHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-row-header-cell-template.directive';
+export { ColumnHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-column-header-cell-template.directive';
 // Export types from PivotGrid common package
 export { sumAggregate, averageAggregate, minAggregate, maxAggregate } from '@progress/kendo-pivotgrid-common';

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1709657996,
-    version: '15.2.0-develop.1',
+    publishDate: 1709730569,
+    version: '15.2.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2020/pivotgrid.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, HostBinding, Input, NgZone, Renderer2, ViewChild } from '@angular/core';
+import { Component, ContentChild, ElementRef, HostBinding, Input, NgZone, Renderer2, ViewChild } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { isChanged, isDocumentAvailable, ScrollbarWidthService } from '@progress/kendo-angular-common';
@@ -14,6 +14,10 @@ import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { ConfiguratorNavigation, PivotGridNavigation } from '@progress/kendo-pivotgrid-common';
 import { PivotLocalizationService } from './localization/pivot-localization.service';
 import { gearIcon } from '@progress/kendo-svg-icons';
+import { CellTemplateDirective } from './rendering/templates/pivotgrid-cell-template.directive';
+import { ValueCellTemplateDirective } from './rendering/templates/pivotgrid-value-cell-template.directive';
+import { RowHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-row-header-cell-template.directive';
+import { ColumnHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-column-header-cell-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-binding/pivotgrid-data.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -252,7 +256,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             provide: L10N_PREFIX,
             useValue: 'kendo.pivotgrid'
         }
-    ], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "customCellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "valueCellTemplate", first: true, predicate: ValueCellTemplateDirective, descendants: true }, { propertyName: "rowHeaderCellTemplate", first: true, predicate: RowHeaderCellTemplateDirective, descendants: true }, { propertyName: "columnHeaderCellTemplate", first: true, predicate: ColumnHeaderCellTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
         loading="Loading"
@@ -366,14 +370,20 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
+                [customCellTemplate]="customCellTemplate"
+                [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                 class="k-pivotgrid-column-headers"
                 tableType="columnHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #rowHeadersTable
+                [customCellTemplate]="customCellTemplate"
+                [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                 class="k-pivotgrid-row-headers"
                 tableType="rowHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #valuesTable
+                [customCellTemplate]="customCellTemplate"
+                [valueCellTemplate]="valueCellTemplate"
                 [colWidth]="columnHeadersWidth"
                 class="k-pivotgrid-values"
                 tableType="values"></kendo-pivotgrid-table>
@@ -403,7 +413,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
-   `, isInline: true, components: [{ type: i4.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: i6.PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i8.LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, components: [{ type: i4.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: i6.PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i8.LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -531,14 +541,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
+                [customCellTemplate]="customCellTemplate"
+                [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                 class="k-pivotgrid-column-headers"
                 tableType="columnHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #rowHeadersTable
+                [customCellTemplate]="customCellTemplate"
+                [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                 class="k-pivotgrid-row-headers"
                 tableType="rowHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #valuesTable
+                [customCellTemplate]="customCellTemplate"
+                [valueCellTemplate]="valueCellTemplate"
                 [colWidth]="columnHeadersWidth"
                 class="k-pivotgrid-values"
                 tableType="values"></kendo-pivotgrid-table>
@@ -606,6 +622,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], configuratorWrapper: [{
                 type: ViewChild,
                 args: ['configurator', { read: ElementRef }]
+            }], customCellTemplate: [{
+                type: ContentChild,
+                args: [CellTemplateDirective]
+            }], valueCellTemplate: [{
+                type: ContentChild,
+                args: [ValueCellTemplateDirective]
+            }], rowHeaderCellTemplate: [{
+                type: ContentChild,
+                args: [RowHeaderCellTemplateDirective]
+            }], columnHeaderCellTemplate: [{
+                type: ContentChild,
+                args: [ColumnHeaderCellTemplateDirective]
             }], loaderSettings: [{
                 type: Input
             }], configurator: [{

package/esm2020/pivotgrid.module.mjs

@@ -20,6 +20,10 @@ import { ChipMenuModule } from './configurator/chip-menu/chip-menu.module';
 import { SharedModule } from './shared.module';
 import { ChipKeyboardNavigationDirective } from './configurator/chip-kb-nav.directive';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { CellTemplateDirective } from './rendering/templates/pivotgrid-cell-template.directive';
+import { ValueCellTemplateDirective } from './rendering/templates/pivotgrid-value-cell-template.directive';
+import { RowHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-row-header-cell-template.directive';
+import { ColumnHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-column-header-cell-template.directive';
 import * as i0 from "@angular/core";
 const IMPORTED_MODULES = [
     EventsModule,
@@ -41,7 +45,11 @@ const DECLARATIONS = [
     DropTargetDirective,
     LocalizedMessagesDirective,
     CustomMessagesComponent,
-    ChipKeyboardNavigationDirective
+    ChipKeyboardNavigationDirective,
+    CellTemplateDirective,
+    ValueCellTemplateDirective,
+    RowHeaderCellTemplateDirective,
+    ColumnHeaderCellTemplateDirective
 ];
 const EXPORTS = [
     PivotGridComponent,
@@ -49,7 +57,11 @@ const EXPORTS = [
     PivotGridCellDirective,
     PivotLocalBindingDirective,
     PivotOLAPBindingDirective,
-    CustomMessagesComponent
+    CustomMessagesComponent,
+    CellTemplateDirective,
+    ValueCellTemplateDirective,
+    RowHeaderCellTemplateDirective,
+    ColumnHeaderCellTemplateDirective
 ];
 /**
  * Sample module
@@ -67,7 +79,11 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DropTargetDirective,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        ChipKeyboardNavigationDirective], imports: [EventsModule,
+        ChipKeyboardNavigationDirective,
+        CellTemplateDirective,
+        ValueCellTemplateDirective,
+        RowHeaderCellTemplateDirective,
+        ColumnHeaderCellTemplateDirective], imports: [EventsModule,
         IndicatorsModule,
         TreeViewModule,
         DraggableModule,
@@ -78,7 +94,11 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         PivotGridCellDirective,
         PivotLocalBindingDirective,
         PivotOLAPBindingDirective,
-        CustomMessagesComponent] });
+        CustomMessagesComponent,
+        CellTemplateDirective,
+        ValueCellTemplateDirective,
+        RowHeaderCellTemplateDirective,
+        ColumnHeaderCellTemplateDirective] });
 PivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridModule, imports: [[...IMPORTED_MODULES]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridModule, decorators: [{
             type: NgModule,

package/esm2020/rendering/pivotgrid-cell.directive.mjs

@@ -5,11 +5,16 @@
 import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
 import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
 import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
+import { CellTemplateDirective } from './templates/pivotgrid-cell-template.directive';
+import { ValueCellTemplateDirective } from './templates/pivotgrid-value-cell-template.directive';
+import { RowHeaderCellTemplateDirective } from './templates/pivotgrid-row-header-cell-template.directive';
+import { ColumnHeaderCellTemplateDirective } from './templates/pivotgrid-column-header-cell-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../data-binding/pivotgrid-data.service";
 import * as i2 from "@progress/kendo-angular-icons";
 import * as i3 from "@angular/common";
 import * as i4 from "@progress/kendo-angular-common";
+import * as i5 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
@@ -29,8 +34,13 @@ export class PivotGridCellDirective {
             });
         };
     }
+    get isNotProvidedCellTemplatePerType() {
+        return (this.tableType === 'values' && !this.valueCellTemplate)
+            || (this.tableType === 'rowHeader' && !this.rowHeaderCellTemplate)
+            || (this.tableType === 'columnHeader' && !this.columnHeaderCellTemplate);
+    }
     get expanded() {
-        return this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length;
+        return (this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length > 0) || false;
     }
     ngOnInit() {
         const nativeElement = this.hostEl.nativeElement;
@@ -52,31 +62,133 @@ export class PivotGridCellDirective {
     }
 }
 PivotGridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
-            aria-hidden="true"
-            [kendoEventsOutsideAngular]="{ click: handleClick }"
-            [name]="expanded ? 'chevron-up' : 'chevron-down'"
-            [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
-            innerCssClass="k-pivotgrid-toggle">
-        </kendo-icon-wrapper>
-        {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
+            <kendo-icon-wrapper
+                *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+                aria-hidden="true"
+                [kendoEventsOutsideAngular]="{ click: handleClick }"
+                [name]="expanded ? 'chevron-up' : 'chevron-down'"
+                [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
+                innerCssClass="k-pivotgrid-toggle">
+            </kendo-icon-wrapper>
+            <!--value cell template-->
+            <ng-template *ngIf="tableType === 'values' && valueCellTemplate"
+                        [templateContext]="{
+                            templateRef: valueCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            value: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType
+                        }">
+            </ng-template>
+            <!--row header cell template-->
+            <ng-template *ngIf="tableType === 'rowHeader' && rowHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: rowHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--column header cell template-->
+            <ng-template *ngIf="tableType === 'columnHeader' && columnHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: columnHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--cell template-->
+            <ng-template *ngIf="customCellTemplate && isNotProvidedCellTemplatePerType"
+                        [templateContext]="{
+                            templateRef: customCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--default cell content-->
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
+            </span>
+        `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i5.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoPivotGridCell]',
                     template: `
-        <kendo-icon-wrapper
-            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
-            aria-hidden="true"
-            [kendoEventsOutsideAngular]="{ click: handleClick }"
-            [name]="expanded ? 'chevron-up' : 'chevron-down'"
-            [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
-            innerCssClass="k-pivotgrid-toggle">
-        </kendo-icon-wrapper>
-        {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`
+            <kendo-icon-wrapper
+                *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+                aria-hidden="true"
+                [kendoEventsOutsideAngular]="{ click: handleClick }"
+                [name]="expanded ? 'chevron-up' : 'chevron-down'"
+                [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
+                innerCssClass="k-pivotgrid-toggle">
+            </kendo-icon-wrapper>
+            <!--value cell template-->
+            <ng-template *ngIf="tableType === 'values' && valueCellTemplate"
+                        [templateContext]="{
+                            templateRef: valueCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            value: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType
+                        }">
+            </ng-template>
+            <!--row header cell template-->
+            <ng-template *ngIf="tableType === 'rowHeader' && rowHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: rowHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--column header cell template-->
+            <ng-template *ngIf="tableType === 'columnHeader' && columnHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: columnHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--cell template-->
+            <ng-template *ngIf="customCellTemplate && isNotProvidedCellTemplatePerType"
+                        [templateContext]="{
+                            templateRef: customCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--default cell content-->
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
+            </span>
+        `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PivotGridDataService }]; }, propDecorators: { cellClass: [{
                 type: HostBinding,
@@ -89,4 +201,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], colIndex: [{
                 type: Input
+            }], customCellTemplate: [{
+                type: Input
+            }], valueCellTemplate: [{
+                type: Input
+            }], rowHeaderCellTemplate: [{
+                type: Input
+            }], columnHeaderCellTemplate: [{
+                type: Input
             }] } });

package/esm2020/rendering/pivotgrid-table.component.mjs

@@ -5,6 +5,10 @@
 import { Component, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
+import { CellTemplateDirective } from './templates/pivotgrid-cell-template.directive';
+import { ValueCellTemplateDirective } from './templates/pivotgrid-value-cell-template.directive';
+import { ColumnHeaderCellTemplateDirective } from './templates/pivotgrid-column-header-cell-template.directive';
+import { RowHeaderCellTemplateDirective } from './templates/pivotgrid-row-header-cell-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../data-binding/pivotgrid-data.service";
 import * as i2 from "./pivotgrid-cell.directive";
@@ -31,7 +35,7 @@ export class PivotGridTableComponent {
     }
 }
 PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth" }, ngImport: i0, template: `
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, ngImport: i0, template: `
         <table
             class="k-pivotgrid-table"
             role="presentation">
@@ -48,6 +52,9 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
+                            [customCellTemplate]="customCellTemplate"
+                            [rowHeaderCellTemplate]="rowHeaderCellTemplate"
+                            [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
                             [rowIndex]="rowIndex"
@@ -56,6 +63,8 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
+                            [customCellTemplate]="customCellTemplate"
+                            [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
@@ -66,7 +75,7 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: i2.PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -88,6 +97,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
+                            [customCellTemplate]="customCellTemplate"
+                            [rowHeaderCellTemplate]="rowHeaderCellTemplate"
+                            [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
                             [rowIndex]="rowIndex"
@@ -96,6 +108,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
+                            [customCellTemplate]="customCellTemplate"
+                            [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
@@ -112,4 +126,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], colWidth: [{
                 type: Input
+            }], customCellTemplate: [{
+                type: Input
+            }], valueCellTemplate: [{
+                type: Input
+            }], rowHeaderCellTemplate: [{
+                type: Input
+            }], columnHeaderCellTemplate: [{
+                type: Input
             }] } });

package/esm2020/rendering/templates/pivotgrid-cell-template.directive.mjs

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the cell template of the PivotGrid.
+ * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `expanded`&mdash;The expanded state of the cell. Use it as an alias for a template variable by utilizing the `let-expanded="expanded"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `text`&mdash;The default cell text. Use it as an alias for a template variable by utilizing the `let-text="text"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+export class CellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CellTemplateDirective, selector: "[kendoPivotGridCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/esm2020/rendering/templates/pivotgrid-column-header-cell-template.directive.mjs

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the column header cell template of the PivotGrid.
+ * Helps to customize the content of the column header cells. To define the column header cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridColumnHeaderCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-column-header-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `expanded`&mdash;The expanded state of the cell. Use it as an alias for a template variable by utilizing the `let-expanded="expanded"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `text`&mdash;The default cell text. Use it as an alias for a template variable by utilizing the `let-text="text"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridColumnHeaderCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+export class ColumnHeaderCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ColumnHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ColumnHeaderCellTemplateDirective, selector: "[kendoPivotGridColumnHeaderCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridColumnHeaderCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/esm2020/rendering/templates/pivotgrid-row-header-cell-template.directive.mjs

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the row header cell template of the PivotGrid.
+ * Helps to customize the content of the row header cells. To define the row header cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridRowHeaderCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-row-header-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `expanded`&mdash;The expanded state of the cell. Use it as an alias for a template variable by utilizing the `let-expanded="expanded"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `text`&mdash;The default cell text. Use it as an alias for a template variable by utilizing the `let-text="text"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridRowHeaderCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+export class RowHeaderCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+RowHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+RowHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RowHeaderCellTemplateDirective, selector: "[kendoPivotGridRowHeaderCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowHeaderCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridRowHeaderCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });