Apply Custom Styling to a Specific OLAP PivotGrid Column in Angular

Background

The Wijmo OLAP PivotGrid is built on top of the FlexGrid control. Because the pivot grid generates its output columns dynamically from the PivotEngine, adding a style object directly to a field or column definition will not apply custom formatting to the rendered pivot cells.

To style a specific OLAP value field, such as an Allowance column, use the formatItem event. This event lets you inspect each rendered cell, identify the pivot value field, and apply custom CSS.

Steps to Complete

1. Install and import the Wijmo Angular OLAP packages.
2. Add CSS classes for the custom column styling.
3. Create the PivotEngine.
4. Render the Angular wj-pivot-grid.
5. Use formatItem to style the target value field.

Getting Started

Install and import the Wijmo Angular OLAP packages

npm install @mescius/wijmo.angular2.olap @mescius/wijmo.olap @mescius/wijmo.grid @mescius/wijmo.styles

Import the Angular OLAP module and core OLAP/Grid APIs in app.component.ts:

import { Component } from '@angular/core';
import { WjOlapModule, WjPivotGrid } from '@mescius/wijmo.angular2.olap';
import { PivotEngine } from '@mescius/wijmo.olap';
import { FormatItemEventArgs } from '@mescius/wijmo.grid';

• The Angular package provides the wj-pivot-grid component. The core PivotEngine creates the pivot view, and FormatItemEventArgs provides access to the rendered cell.

Add CSS classes for the custom column styling

Add the Wijmo stylesheet and your custom classes to src/styles.css:

@import '@mescius/wijmo.styles/wijmo.css';

.allowance-cell {
  background-color: #fff3cd;
  color: #856404;
  font-weight: 700;
}

.allowance-header {
  background-color: #ffe69c;
  color: #664d03;
  font-weight: 700;
}

• These classes define the custom background color, text color, and font weight. Use global CSS because Wijmo creates and recycles grid cell elements dynamically.

Create the PivotEngine

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjOlapModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  pivotEngine = new PivotEngine({
    itemsSource: getData(),
    fields: [
      { binding: 'region', header: 'Region' },
      { binding: 'product', header: 'Product' },
      { binding: 'sales', header: 'Sales', format: 'n2' },
      { binding: 'allowance', header: 'Allowance', format: 'n2' }
    ],
    rowFields: ['Region'],
    columnFields: ['Product'],
    valueFields: ['Sales', 'Allowance']
  });
}

• The PivotEngine defines the available fields and the current pivot layout. When adding fields to rowFields, columnFields, or valueFields by string, use the field header.

Render the Angular wj-pivot-grid

Add the grid to app.component.html:

<wj-pivot-grid
  #pivotGrid
  [itemsSource]="pivotEngine"
  (formatItem)="formatItem(pivotGrid, $event)">
</wj-pivot-grid>

• The itemsSource is set to the PivotEngine. The #pivotGrid template variable passes the grid instance into the formatItem handler, while $event contains the cell formatting event arguments.

Use formatItem to style the target value field

private getValueField(grid: WjPivotGrid, colIndex: number) {
  const valueFields = grid.engine?.valueFields;

  return valueFields?.length
    ? valueFields[colIndex % valueFields.length]
    : null;
}

formatItem(grid: WjPivotGrid, e: FormatItemEventArgs) {
  const isDataCell = e.panel === grid.cells;
  const isHeaderCell = e.panel === grid.columnHeaders;

  if (!isDataCell && !isHeaderCell) {
    return;
  }

  e.cell.classList.remove('allowance-cell', 'allowance-header');

  const valueField = this.getValueField(grid, e.col);
  const isAllowance =
    valueField?.binding === 'allowance' ||
    valueField?.header === 'Allowance';

  if (isAllowance) {
    e.cell.classList.add(isDataCell ? 'allowance-cell' : 'allowance-header');
  }
}

• PivotGrid columns are generated from the pivot view, so grid.columns[e.col].binding may not match the original source field name. The safest way to identify the displayed value field is to use grid.engine.valueFields. Also, because grid cells are recycled, remove the custom classes before applying them again.

Optional: inspect pivot keys for more specific styling

const keys = grid.getKeys(e.row, e.col);

console.log({
  valueField: valueField?.binding,
  columnFields: keys?.colKey?.fields,
  columnValues: keys?.colKey?.values
});

• Use getKeys when you need to style Allowance only for a specific pivot column group, such as a particular product, year, or region.

With this setup, every rendered Allowance value column receives the custom background color, text color, and font weight.

Happy coding!