How to apply custom styles to Pivot Table cells

18 Aug 20266 minutes to read

The Angular Pivot Table component allows you to alter the appearance of pivot cells using event handlers. This guide demonstrates how to apply custom styling to specific cells in your pivot table.

Overview

You can apply custom styles to different types of cells in the pivot table:

• Use the queryCellInfo event to style row headers and value cells.
• Use the headerCellInfo event to style column headers.

Both events are available through the gridSettings property of the Pivot Table component.

Implementation example

The following example shows how to apply styles to:

• The column header “Sold Amount” under “FY 2016” using the headerCellInfo event.
• The row header “Germany” and its aggregated values using the queryCellInfo event.
• Styles are applied by adding the “e-custom” CSS class to the cell elements.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, ViewChild, OnInit } from '@angular/core';
import { PivotView, FieldListService, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { Observable } from 'rxjs';

@Component({
  imports: [
    PivotViewAllModule,
    PivotFieldListAllModule
  ],
  standalone: true,
  selector: 'app-container',
  providers: [FieldListService],
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings' [width]=width height=height showFieldList='true'></ejs-pivotview>`
})

export class AppComponent implements OnInit {

  public width?: string;
  public height?: number;
  public dataSourceSettings?: DataSourceSettingsModel;
  public gridSettings?: GridSettings;
  public observable = new Observable();

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

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

    this.dataSourceSettings = {
      dataSource: Pivot_Data as IDataSet[],
      expandAll: false,
      enableSorting: true,
      columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
      values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
      rows: [{ name: 'Country' }, { name: 'Products' }],
      formatSettings: [{ name: 'Amount', format: 'C0' }],
      filters: []
    };

    this.gridSettings = {
      columnWidth: 140,
      queryCellInfo: this.observable.subscribe((args: any) => {
        let colIndex: number = Number(args.cell.getAttribute('data-colindex'));
        let cells: any = args.data[colIndex] ? args.data[colIndex] : {};
        // Here by using 'actualText' option, a custom class can be added to the specific row header and its value to apply custom style.
        if (cells.actualText === 'Germany') {
          args.cell.classList.add('e-custom');
        } else if (cells.actualText === 'Amount' &&
          cells.columnHeaders === 'FY 2016' && cells.rowHeaders === 'Germany') {
          args.cell.classList.add('e-custom');
        }
      }) as any,
      headerCellInfo: this.observable.subscribe((args: any) => {
        let customAttributes: any = args.cell.column.customAttributes;
        // Here custom class can be added to the specific column header by using unique level name, to apply custom style.
        if (args.node.classList.contains('e-columnsheader') && customAttributes &&
          customAttributes.cell.valueSort.levelName === 'FY 2016.Sold Amount') {
          args.node.classList.add('e-custom');
        }
      }) as any,
    } as GridSettings;
  }
}

main.ts

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

NOTE

The dot(.) character in FY 2016.Sold Amount is used by default to identify the header levels in the pivot table’s row and column. It can be changed by setting the headerDelimiter in the valueSortSettings property to any other delimiter instead of the default separator.