Row expansion / roll-up

Click a group row to expand or collapse its children. In the default full-tree mode the engine ships the entire nested aggregation tree once, so every expand/collapse is a pure client-side reveal — zero round-trips, instant. Recomputing the backend just to show 12 already-known child rows would be pure waste, so we don’t. (Only the opt-in lazy / server mode fetches children on demand.)

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "formats": {"revenue": "currency:USD"},
})

# Expansion is client-side and frontend-owned; `expanded_state` reflects it (and can seed it).
# Drive it imperatively with `command` (bump `n` each time so the same action fires again).
TensorGrid(
    id="grid",
    row_data=payload["row_data"],
    column_defs=payload["column_defs"],
    expanded_state=True,                      # True = all expanded, or { node_id: bool }
    command={"action": "expandToDepth", "args": {"depth": 1}, "n": 1},
)

React

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

// Click a group row to toggle it; `showExpandControls` adds Expand all / Collapse all / Level N.
<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  showExpandControls
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  show-expand-controls
/>

Vanilla JS

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

const grid = mountTensorGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
});

grid.expandAll();
grid.collapseAll();
grid.expandToLevel(1);                        // reveal down to depth 1
grid.setExpanded({ '["EMEA"]': true });       // by stable node id

Notes

• Stable node ids. Expansion is keyed by the group-key path ("EMEA/Germany"), never the array index — a data refresh keeps the same rows expanded instead of silently collapsing.
• Both axes roll up. In a pivot, column groups expand and collapse the same way rows do — the tree is symmetric.
• Imperative control. Vanilla exposes expandAll / collapseAll / expandToLevel / setExpanded; the React/Vue components expose the same via the opt-in expand toolbar; Dash drives it with the command prop and reads expanded_state.