Sorting

Sorting reorders siblings within each group — it is a pure view reorder, never a recomputation. The engine builds and aggregates the tree once; sorting just permutes the already-computed nodes, so subtotals and the grand total are untouched. Click a measure header to cycle ascending → descending → off; shift-click a second header to add a secondary key.

Dash (Python)

from dash import Dash
from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "formats": {"revenue": "currency:USD", "qty": "number:0"},
    # Sorting is on by default; disable it per column when needed.
    "column_options": {"country": {"sortable": False}},
})

app = Dash(__name__)
app.layout = TensorGrid(
    id="grid",
    row_data=payload["row_data"],
    column_defs=payload["column_defs"],
)

React

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

// Header-click sorting is built in — asc → desc → off, shift-click for a secondary key.
<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  formats={{ revenue: '$0,0', qty: '0,0' }}
/>;

Vue

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

Vanilla JS

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

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

// Programmatic multi-column sort (same result as shift-clicking two headers):
grid.setSortKeys([{ by: 'revenue', desc: true }, { by: 'qty', desc: false }]);

Notes

• Multi-column sort. Shift-click adds a secondary key; each sorted header shows its arrow and a 1-based priority number. Siblings order by the first key, ties broken by the next.
• Nulls sort last in both ascending and descending directions, and equal values keep their original relative order (a stable sort) so a re-sort never scrambles ties.
• Sorting is per level. Each group’s children are ordered independently — the hierarchy is preserved, only siblings move.
• Disable per column with column_options: {col: {sortable: false}} (Dash) or enableSorting: false on a column def. See filtering to narrow rows and aggregation for how the values are computed.