Pivoting (Enterprise)

Pivoting in apex-grid-enterprise reshapes flat rows into a cross-tab: one column's distinct values become columns, one or more fields become row dimensions, and measures are aggregated into each cell.

The three pivot inputs

Property	Type	Role
pivotOn	string	Column-dimension field — its distinct values become columns
pivotRows	string[]	Row-dimension field(s) — one leading column each
pivotValues	AggregationConfig	Measures aggregated into each cell, e.g. { salary: ['sum'] }

import 'apex-grid-enterprise/define';

const grid = document.createElement('apex-grid-enterprise');
grid.columns = columns;
grid.data = data;

grid.pivotOn = 'quarter';                 // Q1, Q2, Q3, Q4 become columns
grid.pivotRows = ['region'];              // one row per region
grid.pivotValues = { revenue: ['sum'] };  // each cell = sum of revenue

document.body.appendChild(grid);

This produces a matrix of region (rows) × quarter (columns), each cell holding the summed revenue.

Multiple row dimensions

grid.pivotRows = ['region', 'country'];   // nested row dimensions

Multiple measures

Each measure/function pair becomes its own set of value columns under each pivot column:

grid.pivotValues = {
  revenue: ['sum', 'avg'],
  units: ['sum'],
};

pivotValues uses the same AggregationConfig shape as aggregations.

Disabling pivot

Set pivotOn to an empty string to turn pivoting off. Check whether a pivot view is active with the isPivoting getter:

grid.pivotOn = '';                 // back to flat rows
console.log(grid.isPivoting);      // false

Pivot vs grouping

Pivoting requires pivotRows and pivotValues in addition to pivotOn. Pivoting and row grouping are mutually exclusive: when pivotOn is set, pivot wins and groupBy is ignored.

Charting a pivot

The integrated chart reads the current view, so a <apex-grid-chart> bound to the grid redraws automatically when the pivot changes (both fire the apex-view-changed event).

React example

import { useEffect, useRef } from 'react'
import 'apex-grid-enterprise/define'

export default function PivotGrid() {
  const ref = useRef<any>(null)

  useEffect(() => {
    const grid = ref.current
    grid.columns = columns
    grid.data = data
    grid.pivotOn = 'quarter'
    grid.pivotRows = ['region']
    grid.pivotValues = { revenue: ['sum'] }
  }, [])

  return <apex-grid-enterprise ref={ref} style={{ height: 480 }} />
}