Lattice Grid Buy a licence

demo D72

Pivot

Transposing values across distinct keys, with a column guard

columns.pivot(['status'])

Building…
Loading a live grid…

The configuration

import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

// A pivot needs three things: a column to group down the side, a column to
// spread across the top, and a column with a reduction to fill every cell.
// Each environment in the data becomes a generated column holding that
// account's cost in that environment. maxColumns is the guard: past the limit
// the grid shows the rows unpivoted rather than building a grid nobody can read.
const columns = [
  { field: 'account', title: 'Account', filter: { type: 'set' }, group: { enabled: true, index: 0 } },
  { field: 'environment', title: 'Env', filter: { type: 'set' }, pivot: { enabled: true, index: 0 },
    cell: { decoration: 'pill', variant: { map: {
      prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
      staging: 'warning', untagged: 'warning', test: 'info',
      dev: 'success', 'not-prod': 'neutral',
    } } } },
  { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
    format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
];

const rows = [/* 20,000 cloud cost records */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    rowKey: 'id',
    pivot: { enabled: true, maxColumns: 24 },
    showTotalInHeader: true,
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'views', 'quick'],
          actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' },
    columns: columns,
    rows: rows,
  };
}

bootstrapApplication(AppComponent);

Turning row values into columns with a pivot table

A pivot transposes data: instead of one row per record, distinct values in a chosen field become the columns themselves, and each cell holds the aggregated figure for that combination, such as revenue by product down the rows and by quarter across the top. A developer reaches for this once a flat table stops answering the question directly, typically when a stakeholder wants a cross-tabulation rather than a list, or when a report needs the same underlying rows read two ways without a second dataset. This demo builds that structure through columns.pivot(['status']), an array of field names whose distinct values become the pivoted column set, with a guard that caps the number of generated columns so a field with high cardinality cannot silently produce hundreds of them. Because Lattice Grid is a JavaScript data grid built on virtual scrolling and incremental aggregation rather than server round trips, the pivot recalculates from the same per-column total definitions used elsewhere in the grid, so a sum defined once for grouping or the grand total row is reused here without a separate formula. Pivoted headers carry the same column semantics as any other, including sort and resize, so the transposed view behaves like a normal grid rather than a static export.

How do I create a pivot table in a JavaScript data grid?

Call columns.pivot() with an array of field names whose values should become columns, for example columns.pivot(['status']) to spread each distinct status into its own column. Lattice Grid aggregates the existing per-column totals into each generated cell and applies a column guard that limits how many columns a high-cardinality field can produce.

Related demos