Apply Custom Styling to a Specific OLAP PivotGrid Column in JavaScript

June 23 2026

Background

The Wijmo OLAP PivotGrid extends FlexGrid, so rendered cells should be customized with the formatItem event. Since OLAP columns are generated dynamically by the PivotEngine, adding a style object directly to a field definition will not style the rendered pivot cells.

Steps to Complete

Install and import the Wijmo OLAP packages.
Add a host element for the PivotGrid.
Add CSS classes for the custom column styling.
Create the PivotEngine.
Create the PivotGrid and handle formatItem.

Getting Started

Install and import the Wijmo OLAP packages

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

import '@mescius/wijmo.styles/wijmo.css';
import { PivotEngine, PivotGrid } from '@mescius/wijmo.olap';

PivotEngine creates the summarized OLAP view, and PivotGrid displays that view in the browser.

Add a host element for the `PivotGrid`

<div id="pivotGrid"></div>

The JavaScript PivotGrid constructor needs a DOM element or selector where the grid will be created.

Add CSS classes for the custom column styling

.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 for the Allowance cells and headers.

Create the `PivotEngine`

const 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 fields and pivot layout. When adding fields to rowFields, columnFields, or valueFields by string, use the field header.

Create the `PivotGrid` and handle `formatItem`

const pivotGrid = new PivotGrid('#pivotGrid', {
  itemsSource: pivotEngine,
  formatItem
});

function getValueField(grid, colIndex) {
  const valueFields = grid.engine?.valueFields;

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

function formatItem(grid, e) {
  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 = 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. Using grid.engine.valueFields lets you identify the original value field. Since grid cells are recycled, always remove custom classes before applying them again.

Optional: inspect pivot keys for more specific styling

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

console.log({
  generatedBinding: grid.columns[e.col].binding,
  valueFieldBinding: valueField?.binding,
  valueFieldHeader: valueField?.header,
  columnFields: keys?.colKey?.fields,
  columnValues: keys?.colKey?.values
});