Aggregation

Group your source rows by one or more dimensions (rows) and roll numeric columns up with a measure aggregation. The engine builds the whole subtotalled tree; the grid expands and collapses it client-side. Built-in aggregations: sum, mean, min, max, count, median, std, first, last, nunique — plus arbitrary Python callables and the formula DSL for calculated measures.

Pick your technology — the code below switches everywhere on the site:

Dash (Python)

from dash import Dash
from dash_tensor_grid import TensorGrid, build_grid

# Accepts a list[dict], a pandas DataFrame, a Polars DataFrame/LazyFrame, or a JSON string.
sales = [
    {"region": "EMEA", "country": "Germany", "revenue": 100, "cost": 60, "qty": 3},
    # …
]

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "cost": "sum", "qty": "sum"},
    "formats": {"revenue": "currency:USD", "cost": "currency:USD"},
    "headers": {"region": "Region / Country"},
    "grand_total": True,
})

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

React

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

export function Sales({ data }: { data: Record<string, unknown>[] }) {
  return (
    <TensorGrid
      data={data}
      rows={['region', 'country']}
      measures={{ revenue: 'sum', cost: 'sum', qty: 'sum' }}
      formats={{ revenue: '$0,0', cost: '$0,0' }}
      headers={{ region: 'Region / Country' }}
      grandTotal
    />
  );
}

Vue

<script setup lang="ts">
import { TensorGrid } from '@tensorgrid/vue';
defineProps<{ data: Record<string, unknown>[] }>();
</script>

<template>
  <TensorGrid
    :data="data"
    :rows="['region', 'country']"
    :measures="{ revenue: 'sum', cost: 'sum', qty: 'sum' }"
    :formats="{ revenue: '$0,0', cost: '$0,0' }"
    :headers="{ region: 'Region / Country' }"
    grand-total
  />
</template>

Vanilla JS

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

mountTensorGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', cost: 'sum', qty: 'sum' },
  formats: { revenue: '$0,0', cost: '$0,0' },
  headers: { region: 'Region / Country' },
  grandTotal: true,
});

Notes

• The frontend does zero math. Every subtotal, grand total, and cell value is computed by the Polars engine (Dash) or the parity-verified @tensorgrid/core port (adapters).
• grandTotal prepends a synthetic top row aggregating across every group.
• Multiple measures are just more keys in measures; each becomes a column.
• Need a ratio or weighted average? Reach for a calculated measure instead of a raw aggregation.