Getting Started

Install PivotBlitz and create your first interactive pivot table in minutes.

Installation

PivotBlitz is available for Svelte, React, Vue, and Angular. Install the package for your framework:

Svelte

bash

pnpm add @pivotblitz/svelte

React

bash

pnpm add @pivotblitz/react

Vue

bash

pnpm add @pivotblitz/vue

Angular

bash

pnpm add @pivotblitz/angular

Each framework package includes @pivotblitz/core as a dependency — no need to install it separately.

Basic Setup

A pivot table needs two things: data (an array of objects) and a store (which holds the pivot configuration and computed results).

svelte

<script>
  import { PivotTable, createPivotStore } from '@pivotblitz/svelte';

  // Your data — an array of flat objects
  const data = [
    { region: 'North', product: 'Widget', revenue: 1200, cost: 800 },
    { region: 'North', product: 'Gadget', revenue: 2100, cost: 1400 },
    { region: 'South', product: 'Widget', revenue: 980, cost: 650 },
    { region: 'South', product: 'Gadget', revenue: 1800, cost: 1200 },
  ];

  // Create a pivot store with initial configuration
  const store = createPivotStore(data, {
    rows: ['region'],
    cols: ['product'],
    vals: ['revenue'],
    aggregatorName: 'Sum',
  });
</script>

<PivotTable {store} />

This renders a pivot table with regions as rows, products as columns, and revenue summed in each cell.

Store Configuration

The second argument to createPivotStore configures the initial pivot layout:

Option	Type	Description
`rows`	`string[]`	Fields placed on rows
`cols`	`string[]`	Fields placed on columns
`vals`	`string[]`	Fields to aggregate (values)
`aggregatorName`	`string`	Aggregation function (e.g. `'Sum'`, `'Average'`, `'Count'`)
`locale`	`string`	Locale for number formatting (e.g. `'en'`, `'it'`)

You can update the configuration at any time:

javascript

// Change rows and aggregator
store.setConfig({
  rows: ['region', 'product'],
  aggregatorName: 'Average',
});

// Or use shorthand methods
store.setRows(['region']);
store.setCols(['product', 'channel']);
store.setAggregator('Median');

Adding a Toolbar

The PivotToolbar provides built-in controls for layout switching, export, Top N filtering, and more.

svelte

<script>
  import { PivotTable, PivotToolbar, createPivotStore } from '@pivotblitz/svelte';

  const store = createPivotStore(data, config);
  let layout = $state('compact');
</script>

<PivotToolbar {store} bind:layout />
<PivotTable {store} {layout} />

Adding a Field Chooser

The FieldChooser lets users drag fields between rows, columns, values, and available fields.

svelte

<script>
  import { PivotTable, PivotToolbar, FieldChooser, createPivotStore } from '@pivotblitz/svelte';

  const store = createPivotStore(data, config);
  let layout = $state('tabular');
  let showFieldChooser = $state(false);
</script>

<PivotToolbar
  {store}
  bind:layout
  onToggleFieldChooser={() => showFieldChooser = !showFieldChooser}
/>

<div style="display: flex">
  {#if showFieldChooser}
    <FieldChooser {store} />
  {/if}
  <PivotTable {store} {layout} />
</div>

Enabling Features

Most features are enabled via props on PivotTable:

svelte

<PivotTable
  {store}
  layout="tabular"
  zebra={true}
  enableHover={true}
  enableTooltips={true}
  enableResize={true}
  enableContextMenu={true}
  enableRangeSelection={true}
  enableRowDragDrop={true}
  enableKeyboardNavigation={true}
  statusBar={true}
/>

See the Features Guide for detailed coverage of each feature, or the API Reference for the full list of props.

React Usage

The React API mirrors the Svelte API closely:

tsx

import { PivotTable, usePivotStore } from '@pivotblitz/react';

function App() {
  const store = usePivotStore(data, {
    rows: ['region'],
    cols: ['product'],
    vals: ['revenue'],
    aggregatorName: 'Sum',
  });

  return <PivotTable store={store} layout="tabular" />;
}

Vue Usage

The Vue API uses usePivotStore composable and a PivotTable component:

vue

<script setup lang="ts">
import { PivotTable, usePivotStore } from '@pivotblitz/vue';

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

<template>
  <PivotTable :store="store" />
</template>

Angular Usage

Import PivotTableComponent as a standalone component:

typescript

import { Component } from '@angular/core';
import { PivotTableComponent, createPivotStore } from '@pivotblitz/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PivotTableComponent],
  template: `<pivot-table [store]="store" />`,
})
export class AppComponent {
  store = createPivotStore(data, {
    rows: ['region'],
    cols: ['product'],
    vals: ['revenue'],
    aggregatorName: 'Sum',
  });
}

Next Steps

Features Guide Explore charts, sparklines, conditional formatting, calculated fields, and 15+ more features. API Reference Full technical reference for all components, types, and functions. Examples Copy-paste code snippets for common use cases.