Apply Custom Styling to a Specific OLAP PivotGrid Column in Vue

June 22 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 Vue OLAP packages.
Add CSS classes for the custom column styling.
Create the PivotEngine.
Render the Vue wj-pivot-grid.
Use formatItem to style the target value field.

Getting Started

Install and import the Wijmo Vue OLAP packages

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

In App.vue, import the Vue OLAP component and the core PivotEngine:

<script setup>
import { WjPivotGrid } from '@mescius/wijmo.vue2.olap';
import { PivotEngine } from '@mescius/wijmo.olap';
</script>

The wijmo.vue2.olap package provides Vue components for Wijmo OLAP controls. Despite the package name, it supports Vue 2 and Vue 3.

Add CSS classes for the custom column styling

Add Wijmo styles and your custom classes to a global stylesheet, such as src/style.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;
}

Avoid placing these styles in a scoped Vue style block because Wijmo creates and recycles grid cell elements dynamically.

Create the `PivotEngine`

<script setup>
import { WjPivotGrid } from '@mescius/wijmo.vue2.olap';
import { PivotEngine } from '@mescius/wijmo.olap';

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']
});
</script>

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

Render the Vue `wj-pivot-grid`

<template>
  <wj-pivot-grid
    :itemsSource="pivotEngine"
    :formatItem="formatItem" />
</template>

The itemsSource is set to the PivotEngine. The formatItem handler is called each time the grid creates or updates a cell.

Use `formatItem` to style the target value field

<script setup>
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');
  }
}
</script>

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. Also, because 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
});