Column groups & collapse

Multi-level column dimensions nest into column groups: each non-leaf level gets a subtotal column and the whole cross-tab gets a grand-total column, both computed by the engine symmetrically with the row hierarchy. When the cross-tab gets wide you can collapse a group down to its subtotal or hide whole groups from view — a display change that never re-aggregates.

The live demo pivots a single category level; the code below nests year → quarter to show the subtotal columns.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "columns": ["year", "quarter"],   # nested column groups: year > quarter
    "measures": {"revenue": "sum"},
    "col_subtotals": True,            # a subtotal column at each non-leaf level (year)
    "grand_total": True,             # a grand-total column across all columns
    "formats": {"revenue": "currency:USD"},
})
TensorGrid(
    id="grid",
    row_data=payload["row_data"], column_defs=payload["column_defs"],
    enable_group_collapse=True,       # collapse a year group down to its subtotal
)

React

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

<TensorPivot
  data={data}
  rows={['region', 'country']}
  cols={['year', 'quarter']}
  measures={{ revenue: 'sum' }}
  formats={{ revenue: '$0,0' }}
  colSubtotals            // subtotal column per non-leaf level (default)
  grandTotal              // grand-total column (default)
  enableColumnGroupFilter // corner picker to hide/show top-level groups
/>;

Vue

<TensorPivot
  :data="data"
  :rows="['region', 'country']"
  :cols="['year', 'quarter']"
  :measures="{ revenue: 'sum' }"
  :formats="{ revenue: '$0,0' }"
  col-subtotals
  grand-total
  enable-column-group-filter
/>

Vanilla JS

import { mountTensorPivot } from '@tensorgrid/vanilla';
import { pivotColumnGroups, pivotGrid } from '@tensorgrid/core';

const handle = mountTensorPivot(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  cols: ['year', 'quarter'],
  measures: { revenue: 'sum' },
  formats: { revenue: '$0,0' },
  colSubtotals: true,
  grandTotal: true,
});

// Enumerate the outer column groups, then prune to the ones you want to show:
const groups = pivotColumnGroups(pivotGrid(data, ['region', 'country'], ['year', 'quarter'], { revenue: 'sum' }).column_defs);
handle.update({ keptColumnGroups: ['2024'] }); // hide every group but 2024; grand total kept

Options

• col_subtotals / colSubtotals (default on) — emit a subtotal column at each non-leaf column level. With cols: ['year', 'quarter'] that is a per-year subtotal beside its quarter columns.
• grand_total / grandTotal (default on) — a grand-total column aggregating across every column; pair it with row_grand_total / rowGrandTotal for the symmetric top “Total” row.
• Collapse vs. prune. Dash’s enable_group_collapse collapses a group to its subtotal in place (deeper columns hidden, subtotal kept). The adapters’ enableColumnGroupFilter (React / Vue) and keptColumnGroups (Vanilla, via handle.update) prune whole top-level groups from view — a client-side display change; the grand-total column is always kept and nothing is re-aggregated.
• Add share columns with percent-of context, or start from a plain pivot.