svelte-pivottable

svelte-pivottable is a Svelte 5 pivot table library with drag-and-drop data exploration, grouping, and subtotals — similar to the pivot table experience in older versions of Microsoft Excel.

It is a Svelte port of react-pivottable-grouping, itself a fork of react-pivottable by Nicolas Kruchten, which is a React port of his jQuery-based PivotTable.js.

What does it do?

svelte-pivottable lets you summarize a dataset into a cross-tabulated table or a Plotly.js chart using a drag-and-drop interface. You can move attributes between rows, columns, filters, and aggregation slots interactively.

A live demo is available here.

Installation

npm install svelte-pivottable

Basic usage

Interactive UI with table output

PivotTableUI is the full drag-and-drop component. It manages its own UI state but delegates data rendering to PivotTable.

<script>
    import { PivotTableUI } from 'svelte-pivottable';

    const data = [
        { name: 'Alice', department: 'Engineering', salary: 95000 },
        { name: 'Bob',   department: 'Marketing',   salary: 72000 },
        { name: 'Carol', department: 'Engineering', salary: 105000 },
        // ...
    ];
</script>

<PivotTableUI {data} rows={['department']} cols={[]} />

Data can also be provided as an array of arrays (first row is headers):

<script>
    import { PivotTableUI } from 'svelte-pivottable';

    const data = [
        ['name', 'department', 'salary'],
        ['Alice', 'Engineering', 95000],
        ['Bob',   'Marketing',   72000],
    ];
</script>

<PivotTableUI {data} />

Non-interactive snapshot rendering

PivotTable renders a saved configuration without any drag-and-drop UI. Use it for embedding fixed pivot views in dashboards.

<script>
    import { PivotTable, TableRenderers, aggregators } from 'svelte-pivottable';

    const data = [ /* ... */ ];
</script>

<PivotTable
    {data}
    rows={['department']}
    cols={['year']}
    aggregator={aggregators['Sum']}
    vals={['salary']}
    renderers={TableRenderers}
    rendererName="Table Heatmap"
/>

Renderers

Table renderers

TableRenderers is the default renderer set. Import it from svelte-pivottable or the svelte-pivottable/TableRenderers subpath.

Key	Description
Table	Plain cross-tabulation table
Table Heatmap	Table with full color scale across all cells
Table Col Heatmap	Heatmap scaled per column
Table Row Heatmap	Heatmap scaled per row
TsvExport	Tab-separated values export view

<script>
    import { PivotTable, TableRenderers } from 'svelte-pivottable';
</script>

<PivotTable {data} rows={['region']} cols={['quarter']} renderers={TableRenderers} rendererName="Table Col Heatmap" />

Plotly renderers

Plotly.js is injected as a dependency to avoid mandatory bundling. Pass the Plotly object to PlotlyRenderers() to get the renderer map.

<script>
    import { PivotTableUI, TableRenderers, PlotlyRenderers } from 'svelte-pivottable';
    import Plotly from 'plotly.js';

    const renderers = { ...TableRenderers, ...PlotlyRenderers(Plotly) };
</script>

<PivotTableUI {data} {renderers} />

If you load Plotly via a <script> tag rather than bundling it:

<script>
    import { onMount } from 'svelte';
    import { PivotTableUI, TableRenderers, PlotlyRenderers } from 'svelte-pivottable';

    let renderers = { ...TableRenderers };

    onMount(() => {
        renderers = { ...TableRenderers, ...PlotlyRenderers(window.Plotly) };
    });
</script>

<svelte:head>
    <script src="https://cdn.plot.ly/plotly-basic-latest.min.js"></script>
</svelte:head>

<PivotTableUI {data} {renderers} />

Aggregators

Built-in aggregators

The aggregators export is a ready-to-use map of aggregation functions. Pass it (or a subset) to PivotTableUI via the aggregators prop, or use individual entries as the aggregator prop on PivotTable.

<script>
    import { PivotTable, aggregators } from 'svelte-pivottable';
</script>

<!-- Render a Sum table directly -->
<PivotTable
    {data}
    rows={['department']}
    cols={['year']}
    aggregator={aggregators['Sum']}
    vals={['salary']}
/>

Available built-in aggregators:

Key	Description
Count	Number of records
Count Unique Values	Number of distinct values
List Unique Values	Comma-separated distinct values
Sum	Sum of a numeric field
Integer Sum	Sum formatted as integer
Average	Mean
Median	Median
Sample Variance	Sample variance
Sample Standard Deviation	Sample standard deviation
Minimum	Minimum value
Maximum	Maximum value
First	First value seen
Last	Last value seen
Sum over Sum	Ratio of two sums
Sum as Fraction of Total	Each cell as % of grand total
Sum as Fraction of Rows	Each cell as % of its row total
Sum as Fraction of Columns	Each cell as % of its column total
Count as Fraction of Total	Count as % of grand total
Count as Fraction of Rows	Count as % of row total
Count as Fraction of Columns	Count as % of column total

Limiting the aggregator dropdown

Pass a subset of aggregators to restrict what appears in the UI:

<script>
    import { PivotTableUI, aggregators } from 'svelte-pivottable';

    const myAggregators = {
        Count:   aggregators['Count'],
        Sum:     aggregators['Sum'],
        Average: aggregators['Average'],
    };
</script>

<PivotTableUI {data} aggregators={myAggregators} />

Custom aggregators with aggregatorTemplates

Use aggregatorTemplates as building blocks for your own aggregation logic:

<script>
    import { PivotTableUI, aggregators, aggregatorTemplates, fmtInt } from 'svelte-pivottable';

    // Count records where a field exceeds a threshold
    const countAbove = (threshold) =>
        ([attr]) =>
            () => ({
                count: 0,
                push(record) {
                    if (Number(record[attr]) > threshold) this.count++;
                },
                value() { return this.count; },
                format: fmtInt,
                numInputs: 1,
            });

    const myAggregators = {
        ...aggregators,
        'High Earners': countAbove(100000),
    };
</script>

<PivotTableUI {data} aggregators={myAggregators} aggregatorName="High Earners" vals={['salary']} />

Derived attributes

Use derivedAttributes to compute new fields on the fly without modifying the source data. The built-in derivers helper provides common patterns:

<script>
    import { PivotTableUI, derivers } from 'svelte-pivottable';

    const data = [
        { name: 'Alice', born: '1990-06-15', salary: 95000 },
        // ...
    ];

    const derivedAttributes = {
        // Bin a numeric field into buckets of 10
        'Salary Band': derivers.bin('salary', 10000),

        // Extract year from a date string
        'Birth Year': derivers.dateFormat('born', '%y'),

        // Fully custom computed field
        'Senior': (record) => record.salary > 100000 ? 'Yes' : 'No',
    };
</script>

<PivotTableUI {data} {derivedAttributes} rows={['Salary Band']} />

Sorting

Custom sort order with sortAs

Use sortAs to enforce a fixed value ordering (e.g. month names, priority levels):

<script>
    import { PivotTableUI, sortAs } from 'svelte-pivottable';

    const sorters = {
        quarter: sortAs(['Q1', 'Q2', 'Q3', 'Q4']),
        priority: sortAs(['Low', 'Medium', 'High', 'Critical']),
    };
</script>

<PivotTableUI {data} {sorters} cols={['quarter']} />

Grouping and subtotals

Set grouping={true} to display hierarchical row and column groups with subtotals at each level. This is the main feature added over the original react-pivottable.

<script>
    import { PivotTableUI } from 'svelte-pivottable';
</script>

<PivotTableUI
    {data}
    rows={['continent', 'country', 'city']}
    cols={['year', 'quarter']}
    grouping={true}
    rowGroupBefore={true}
    colGroupBefore={false}
    compactRows={true}
/>

Prop	Type	Default	Description
grouping	boolean	false	Enable hierarchical grouping with subtotals
compactRows	boolean	true	Render row group headers inline rather than as separate rows
rowGroupBefore	boolean	true	Show row subtotals above their children
colGroupBefore	boolean	false	Show column subtotals to the left of their children

All properties

The component stack passes props downward: PivotTableUI → PivotTable → Renderer → PivotData.

Layer	Prop	Type	Default	Description
PivotData	data	array or function	(required)	Dataset to summarize — see accepted formats
PivotData	rows	string[]	[]	Attribute names to pre-populate in the row area
PivotData	cols	string[]	[]	Attribute names to pre-populate in the column area
PivotData	vals	string[]	[]	Attribute names passed to the aggregator function
PivotData	aggregator	function	aggregators['Count']	Aggregation function (see aggregators)
PivotData	valueFilter	Record<string, Record<string, boolean>>	{}	Values to exclude per attribute; populates the filter menus
PivotData	sorters	object or function	{}	Per-attribute sort functions; defaults to natural sort
PivotData	rowOrder	string	"key_a_to_z"	Row sort order: key_a_to_z, value_a_to_z, or value_z_to_a
PivotData	colOrder	string	"key_a_to_z"	Column sort order: key_a_to_z, value_a_to_z, or value_z_to_a
PivotData	derivedAttributes	object of functions	{}	Functions that add computed fields to each record
PivotData	grouping	boolean	false	Enable subtotal rows and columns
PivotData	rowGroupBefore	boolean	true	Place row subtotals above their group
PivotData	colGroupBefore	boolean	false	Place column subtotals to the left of their group
PivotTable	renderers	object	TableRenderers	Map of renderer name → Svelte component
PivotTable	rendererName	string	first key in renderers	Which renderer to use
PivotTableUI	aggregators	object	aggregators from Utilities	Map of aggregator name → function, shown in the dropdown
PivotTableUI	aggregatorName	string	first key in aggregators	Which aggregator to use initially
PivotTableUI	hiddenAttributes	string[]	[]	Attributes to hide from the entire UI
PivotTableUI	hiddenFromAggregators	string[]	[]	Attributes to hide from the aggregator field picker
PivotTableUI	hiddenFromDragDrop	string[]	[]	Attributes to hide from the drag-and-drop zone
PivotTableUI	menuLimit	number	500	Maximum number of values to show in a filter menu
PivotTableUI	unusedOrientationCutoff	number	85	Total character length of attribute names above which unused attributes are shown vertically instead of horizontally. 0 = always vertical, Infinity = always horizontal
PivotTableUI	compactRows	boolean	true	Compact rendering for grouped row headers

Accepted formats for data

Array of objects

const data = [
    { attr1: 'value1', attr2: 'value2' },
    { attr1: 'value3', attr2: 'value4' },
];

Array of arrays

First row is treated as headers. Compatible with CSV parser output (e.g. PapaParse).

const data = [
    ['attr1', 'attr2'],
    ['value1', 'value2'],
    ['value3', 'value4'],
];

Callback function

The function receives a record callback and calls it once per record. Useful for streaming or lazy data sources.

const data = (callback) => {
    callback({ attr1: 'value1', attr2: 'value2' });
    callback({ attr1: 'value3', attr2: 'value4' });
};

Missing attributes and null values are treated as the string "null" in all formats.

Component architecture

PivotTableUI        — stateful drag-and-drop UI
  └─ PivotTable     — stateless renderer selector
       └─ Renderer  — TableRenderer, PlotlyRenderer, TSVExportRenderer, etc.
            └─ PivotData  — aggregation, filtering, sorting, subtotal tree

License

MIT