Display string values in pivot table cells

23 Aug 20254 minutes to read

The pivot table allows users to display custom string values in value cells by using the aggregateCellInfo event. This is useful when you need to format numeric values into readable strings, such as converting seconds to time format or applying custom formatting rules.

Converting numeric values to time format

The following example demonstrates how to convert numeric values in the Sold field to time format (HH:MM:SS) using the aggregateCellInfo event. The event provides access to cell data through args.cellSets, allowing you to customize the display value based on the underlying data.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'

import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotView, FieldListService, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    providers: [FieldListService],
    template: `<div class="col-md-8"> <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [width]=width height=height 
   (aggregateCellInfo)='aggregateCellInfo($event)' showFieldList='true'></ejs-pivotview></div>`
})
export class AppComponent implements OnInit {

    public width?: string;
    public height?: number;
    public dataSourceSettings?: DataSourceSettingsModel;

    @ViewChild('pivotview', { static: false })
    public pivotGridObj?: PivotView;

    aggregateCellInfo(args: any) {
        if (args.fieldName === 'Sold') {
            args.value = this.secondsToHms(args.value);
        }
    }

    secondsToHms(d: number) {
        d = Number(d);
        var h = Math.floor(d / 3600);
        var m = Math.floor((d % 3600) / 60);
        var s = Math.floor((d % 3600) % 60);
        return (
            ('0' + h).slice(-2) + ':' + ('0' + m).slice(-2) + ':' + ('0' + s).slice(-2)
        );
    }

    ngOnInit(): void {

        this.width = "100%";
        this.height = 350;

        this.dataSourceSettings = {
            expandAll: false,
            dataSource: Pivot_Data as IDataSet[],
            columns: [{ name: 'Year' }, { name: 'Quarter' }],
            values: [{ name: 'Sold' }, { name: 'Amount' }],
            rows: [{ name: 'Country' }, { name: 'Products' }]
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));