Apply Custom Styling to a Specific OLAP PivotGrid Column in React

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 provides access to each rendered cell so you can inspect the pivot column, identify the value field, and apply custom CSS.

Steps to Complete

1. Install and import the Wijmo React OLAP packages.
2. Create a PivotEngine with the fields used in the pivot view.
3. Add CSS classes for the custom column styling.
4. Use the formatItem event to identify the Allowance value field.
5. Render the PivotGrid
6. Optionally use getKeys to inspect the row and column context for each pivot cell.

Getting Started

Install and import the Wijmo React OLAP packages

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

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

• The React OLAP package provides the PivotGrid component, while PivotEngine defines the pivot view.

Create a PivotEngine with the fields used in the pivot view

const pivotEngine = useMemo(() => {
  return 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']
  });
}, []);

• When adding fields to rowFields, columnFields, or valueFields by string, use the field header. You can still compare against the original data property by checking the field’s binding.

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;
}

• Using CSS classes keeps the formatting easier to maintain than setting several inline styles in the event handler.

Use the formatItem event to identify the Allowance value field

const getValueField = (grid, colIndex) => {
  const valueFields = grid.engine?.valueFields;
  return valueFields?.length
    ? valueFields[colIndex % valueFields.length]
    : null;
};

const formatItem = useCallback((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');
  }
}, []);

• The important part is grid.engine.valueFields[e.col % grid.engine.valueFields.length]. PivotGrid column bindings are generated for the pivot output, so the rendered column’s binding is not always the same as the original data field. The value field collection gives you the original PivotField, including its binding and header.

• Because grid cells are recycled as the user scrolls, always remove or reset custom styles before applying them.

Render the PivotGrid

export default function App() {
  const pivotEngine = useMemo(() => {
    return 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']
    });
  }, []);

  return (
    <PivotGrid
      itemsSource={pivotEngine}
      formatItem={formatItem}
    />
  );
}

Optionally use getKeys to inspect the row and column context for each pivot cell

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
});

• Use getKeys when you need to style a value field only for a specific pivot column group, such as a certain product, year, region, or other column field value.

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

Happy coding!