Svelte Pivot Table
A pivot table turns a flat list of facts into a crosstab: pick the fields that become rows, the fields that become columns, and the measures to aggregate in the cells. SvGrid does that with createPivotModel over your existing array, and renders the result through the same grid you already use.
If you want your users to build the pivot rather than you, SvPivotDesigner gives them a searchable field list and four drop wells for Filters, Rows, Columns and Values, with per-field aggregators. Its layout is a single bindable prop, so saving and restoring a view is one line.
Install
npm i @svgrid/grid @svgrid/enterpriseThe grid and its data model are MIT-licensed in @svgrid/grid; this view ships in the commercial @svgrid/enterprise package and runs unlicensed while you evaluate.
The code
import { createPivotModel } from '@svgrid/enterprise'
const pivot = createPivotModel(orders, {
rows: ['region', 'salesPerson'],
cols: ['quarter'],
values: [
{ field: 'amount', agg: 'sum', label: 'Total', format: { type: 'currency', currency: 'USD' } },
{ field: 'amount', agg: 'avg', label: 'Avg' },
],
})What you get
- Rows, columns, measures - Any number of row and column dimensions, and as many value aggregations as you need, each with its own aggregator and number format.
- Drag-and-drop designer - SvPivotDesigner gives end users the field list and the four wells, so they can build their own view without a code change.
- Subtotals and grand totals - Multi-level column headers with subtotal rows per group and a grand total, expandable and collapsible from the row headers.
- Pivot mode toggle - Flip one switch to swap between the flat grid and the pivot, keeping the same page, the same theme and the same toolbar.
- Heatmaps and charts - Tint measure cells by value to read the cube at a glance, or feed the pivot straight into a chart view.
- Export what you see - The pivot exports to Excel with its header structure intact, not as a flattened dump of the source rows.
Live examples
- Pivot - Table + Designer - Drag-and-drop Pivot Designer with Filters / Rows / Columns / Values zones, multi-level column headers, subtotal + grand-total rows, row-header sort menu.
- Pivot - Designer component - SvPivotDesigner: self-contained, enterprise-ready pivot authoring with a left-rail field picker (search + grouped), four drop wells (Filters / Columns / Rows / Values), drag-and-drop between wells, per-chip aggregator + filter menus, presets toolbar, and an inline pivot grid driven by createPivotModel. Single bindable `layout` prop so the page can persist or restore it.
- Pivot mode grid - Built on <SvPivotDesigner panelPosition="right">: a docked tool panel with a PIVOT MODE toggle, field checklist, and Columns / Rows / Values wells (drag-and-drop). OFF renders the flat participant grid (column groups, flags, ratings, inline filter row); ON pivots Language -> Country x Game with heat-mapped avg measures.
- Pivot - Sales pipeline - Polished pivot view: KPI strip, region/sales-person rows, quarter columns, two measures, expand-all/collapse-all toolbar, heatmap tinting.
- Pivot - Totals + Subtotals - Live toggles for grandTotalRow / grandTotalCol / rowSubtotals on createPivotModel. Subtotals get a Σ badge, the grand-total row is tinted accent, the grand-total column is an amber stripe.
- Pivot chart - One drag-drop pivot layout, two synced views: <SvPivotDesigner chartable> renders the SAME Rows / Columns / Values as either an expandable pivot grid or a chart (Columns -> series, Values -> measure). Powered by the enterprise pivot engine.
Documentation
- Pivot tables - Enterprise - A built-in pivot model that turns a flat data set into a row-axis tree, a nested column-axis header, and one aggregated cell per (row-path × col-path ×…
- Mobile card view with grid-on-desktop - Same data, two layouts. Auto-pivot below 720px or force one via a toolbar switch.
Related articles
- Pivot Tables in Svelte - Summarize Data Without a Spreadsheet - Run a cross-tab pivot directly inside your Svelte app using @svgrid/enterprise createPivotModel - no Excel, no server-side aggregation, no stale exports.
Frequently asked questions
How do I make a pivot table in Svelte?
Call createPivotModel from @svgrid/enterprise with your rows, your row and column dimensions and your value aggregations, then render the result through <SvGrid>. For a user-built pivot, drop in SvPivotDesigner instead.
Is the pivot table free?
No. Pivot is part of the commercial @svgrid/enterprise package, alongside export, import, print and the board and scheduler views. It runs unlicensed with a watermark while you evaluate it.
Can users build their own pivot?
Yes. SvPivotDesigner ships a searchable field picker and Filters, Columns, Rows and Values wells with drag-and-drop between them. Its layout is a bindable prop you can persist per user.
How large a dataset can it pivot?
The pivot aggregates in memory, so it is bound by how much data you can hold client-side. For very large sources, aggregate on the server and pivot the summary rows.