Building Your First Pivot Table with PivotBlitz

In this tutorial, we’ll walk through building an interactive pivot table from scratch using PivotBlitz. By the end, you’ll have a fully functional pivot table with drag-and-drop, multiple aggregators, and a toolbar.

Prerequisites

You’ll need:

• Node.js 18+
• A project using Svelte, React, Vue, or Angular

We’ll use Svelte for this tutorial, but the concepts apply to all frameworks.

Step 1: Install PivotBlitz

npm install @pivot-blitz/core @pivot-blitz/svelte

Step 2: Prepare Your Data

PivotBlitz works with arrays of objects. Each object is a row, and each key is a field:

const salesData = [
  { date: '2026-01', region: 'North', product: 'Laptops', channel: 'Online', revenue: 45000, units: 150 },
  { date: '2026-01', region: 'South', product: 'Phones', channel: 'Retail', revenue: 32000, units: 200 },
  { date: '2026-01', region: 'East', product: 'Tablets', channel: 'Online', revenue: 28000, units: 175 },
  { date: '2026-02', region: 'North', product: 'Laptops', channel: 'Retail', revenue: 51000, units: 170 },
  { date: '2026-02', region: 'West', product: 'Phones', channel: 'Online', revenue: 38000, units: 220 },
  // ... more data
];

Step 3: Create a Basic Pivot Table

<script>
  import { PivotTable } from '@pivot-blitz/svelte';

  const data = [/* your data here */];
</script>

<PivotTable
  {data}
  rows={['region']}
  cols={['product']}
  vals={['revenue']}
  aggregatorName="Sum"
/>

This creates a pivot table with regions as rows, products as columns, and the sum of revenue as values.

Step 4: Add a Toolbar

The toolbar gives users the ability to change the pivot configuration without writing code:

<script>
  import { PivotTable, PivotToolbar } from '@pivot-blitz/svelte';
  import { usePivotStore } from '@pivot-blitz/svelte';

  const data = [/* your data here */];

  const store = usePivotStore({
    data,
    rows: ['region'],
    cols: ['product'],
    vals: ['revenue'],
    aggregatorName: 'Sum'
  });
</script>

<PivotToolbar {store} />
<PivotTable {store} />

The toolbar lets users:

• Drag fields between rows, columns, and values
• Change the aggregator (Sum, Count, Average, etc.)
• Apply filters
• Change layout modes

Step 5: Enable Multiple Aggregators

You can show multiple values at once by passing an array:

<PivotTable
  {data}
  rows={['region']}
  cols={['product']}
  vals={['revenue', 'units']}
  aggregatorName="Sum"
/>

Step 6: Add Filtering

PivotBlitz supports field-level filtering out of the box:

<PivotTable
  {data}
  rows={['region']}
  cols={['product']}
  vals={['revenue']}
  aggregatorName="Sum"
  filter={(row) => row.channel === 'Online'}
/>

Or let users filter interactively by enabling the FieldChooser:

<script>
  import { PivotTable, FieldChooser } from '@pivot-blitz/svelte';
</script>

<FieldChooser {store} />
<PivotTable {store} />

Step 7: Export to CSV

Exporting is built into the Community edition:

<script>
  import { exportCSV } from '@pivot-blitz/core';

  function handleExport() {
    exportCSV(store);
  }
</script>

<button onclick={handleExport}>Export CSV</button>

Next Steps

Now that you have a working pivot table, you can explore:

• Charts and Sparklines — Visualize your data
• Calculated Fields — Add computed columns
• Conditional Formatting — Highlight important values
• Real-time Data — Connect to live data sources

Check out the interactive demo to see all these features in action.