Pivot / cross-tab

A pivot turns one or more dimensions into columns. Rows and columns are symmetric — both group, subtotal, and collapse the same way. The engine builds both halves (the row tree and the nested column groups); the frontend renders the cross-tab.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "columns": ["category"],          # the pivot axis
    "measures": {"revenue": "sum"},
    "formats": {"revenue": "currency:USD"},
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

React

import { TensorPivot } from '@tensorgrid/react';

<TensorPivot
  data={data}
  rows={['region', 'country']}
  cols={['category']}
  measures={{ revenue: 'sum' }}
  formats={{ revenue: '$0,0' }}
/>;

Vue

<TensorPivot
  :data="data"
  :rows="['region', 'country']"
  :cols="['category']"
  :measures="{ revenue: 'sum' }"
  :formats="{ revenue: '$0,0' }"
/>

Vanilla JS

import { mountTensorPivot } from '@tensorgrid/vanilla';

mountTensorPivot(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  cols: ['category'],
  measures: { revenue: 'sum' },
  formats: { revenue: '$0,0' },
});

Notes

• Changing the pivot shape is the one “heavy” interaction — it changes the table’s column structure, so in Dash it needs a callback round-trip (engine.pivot(...)) and a pivot_state prop. Full expand/collapse within a shape is client-side.
• Column subtotals and a grand-total column are on by default (col_subtotals, grand_total); a grand-total row is opt-in (row_grand_total).
• Add percent-of-column / -row / -total context measures for share analysis, or an interactive drag-and-drop pivot configurator.