Rows, Columns and Values

A Pivot table answers a question by grouping records and calculating a summary. For sales by region and quarter, the three choices are:

Choice	Example	What appears
Rows	Region	North, South and West down the left
Columns	Quarter	Q1 and Q2 across the top
Values	Sum of Sales	Sales total at each intersection

Try a different question

Interactive example

Rows, columns and values

Rows group regions, columns compare quarters, and values add up sales.

Try it: Switch the row grouping to products.

The example loads when visible.

Reset

What to notice: The same orders answer a different question.

TypeScript source

Use this code in your app after installing the packages described in this guide.

first-table.ts

first-table.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { PivotPlugin } from '@revolist/pivot';
import { orders, salesReport } from './sales-data';
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
import '@revolist/pivot/styles.css';

// Register the grid once in your application.
defineCustomElements();
await customElements.whenDefined('revo-grid');

export const grid = document.createElement('revo-grid');
grid.style.height = '280px';
grid.plugins = [PivotPlugin];
grid.pivot = salesReport;
grid.source = orders;
document.body.append(grid);

Download first-table.ts

sales-data.ts

sales-data.ts

import type { PivotConfig } from '@revolist/pivot';

export const orders = [
  { region: 'North', product: 'Headphones', quarter: 'Q1', sales: 200 },
  { region: 'North', product: 'Headphones', quarter: 'Q1', sales: 100 },
  { region: 'North', product: 'Speakers', quarter: 'Q2', sales: 300 },
  { region: 'South', product: 'Headphones', quarter: 'Q1', sales: 100 },
  { region: 'South', product: 'Speakers', quarter: 'Q2', sales: 200 },
  { region: 'West', product: 'Speakers', quarter: 'Q2', sales: 100 },
];

export const salesReport: Partial<PivotConfig> = {
  dimensions: [
    { prop: 'region', name: 'Region', size: 160 },
    { prop: 'product', name: 'Product', size: 160 },
    { prop: 'quarter', name: 'Quarter', size: 100 },
    { prop: 'sales', name: 'Sales', dataType: 'number', size: 120 },
  ],
  rows: ['region'],
  columns: ['quarter'],
  values: [{ id: 'sales-sum', prop: 'sales', aggregator: 'sum', label: 'Sales',
    format: { preset: 'currency', currency: 'USD', locale: 'en-US', options: { maximumFractionDigits: 0 } } }],
  totals: { grandTotal: true },
  hasConfigurator: false,
  contextMenu: false,
};

Download sales-data.ts

Changing a row or column field changes how the same records are grouped. It does not edit the records. Adding a second row field creates nested groups; for example, Region → Product.

Configure the three areas

import type { PivotConfig } from '@revolist/pivot';

const config: Partial<PivotConfig> = {
  rows: ['region'],
  columns: ['quarter'],
  values: [{ prop: 'sales', aggregator: 'sum', label: 'Sales' }],
};

The strings are property names in your source records. A dimension is the reusable metadata for one of those fields; it can provide a friendly name, available aggregations and formatting.

What a cell means

The North/Q1 cell adds the sales values of all records whose region is North and quarter is Q1. Grand Total summarizes the whole selected dataset. Totals and averages explain why an average total is calculated from records rather than averaged from visible cells.

Next steps

Prepare your data, then create your first Pivot. To change fields through the interface, use the field panel or configurator. The same fields become chart categories and series.