Examples

Ready-to-use code snippets for common scenarios. Each example is self-contained and can be copied directly into your project.

1. Basic Pivot Table

Minimal setup with rows, columns, and aggregated values.

svelte

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

  const data = [
    { region: 'North', product: 'Widget', revenue: 1200 },
    { region: 'South', product: 'Widget', revenue: 980 },
    { region: 'North', product: 'Gadget', revenue: 2100 },
    { region: 'South', product: 'Gadget', revenue: 1800 },
  ];

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

<PivotTable {store} layout="tabular" zebra enableHover />

2. Pivot with Toolbar and Field Chooser

Full-featured setup with toolbar controls and an interactive field chooser panel.

svelte

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

  const store = createPivotStore(data, {
    rows: ['region', 'category'],
    cols: ['year'],
    vals: ['revenue'],
    aggregatorName: 'Sum',
  });

  let layout = $state('compact');
  let showFieldChooser = $state(false);
</script>

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

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

3. Calculated Fields

Add computed columns using formulas before creating the store.

svelte

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

  const fields = [
    {
      name: 'Profit Margin',
      formula: '(revenue - cost) / revenue * 100',
      format: { type: 'number', decimals: 1, suffix: '%' },
    },
    {
      name: 'Revenue/Unit',
      formula: 'revenue / quantity',
      format: { type: 'number', decimals: 2 },
    },
  ];

  const enriched = applyCalculatedFields(data, fields);

  const store = createPivotStore(enriched, {
    rows: ['category'],
    cols: ['year'],
    vals: ['revenue', 'Profit Margin'],
    aggregatorName: 'Average',
  });
</script>

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

4. Conditional Formatting

Apply visual rules to highlight cells based on their values.

svelte

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

  const store = createPivotStore(data, config);

  // Use preset rules
  const rules = [
    presetRules.heatmapGYR(),      // Green-Yellow-Red gradient
  ];

  // Or create custom rules
  const customRules = [
    {
      id: 'high',
      operator: 'gt',
      value: 100000,
      style: { backgroundColor: '#dcfce7', color: '#166534', fontWeight: 'bold' },
    },
    {
      id: 'low',
      operator: 'lt',
      value: 10000,
      style: { backgroundColor: '#fee2e2', color: '#991b1b' },
    },
  ];
</script>

<PivotTable {store} formattingRules={rules} />

Available presets: heatmapGYR(), trafficLight(low, high), dataBarsBlue(), arrowIcons(), starRating(), highlightTopN(n), positiveNegative(), aboveBelowAverage().

5. Chart Integration

Display a chart alongside or instead of the table.

svelte

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

  const store = createPivotStore(data, config);
</script>

<!-- Split view: table + chart side by side -->
<div style="display: flex; gap: 16px">
  <div style="flex: 1">
    <PivotTable {store} layout="tabular" />
  </div>
  <div style="flex: 1">
    <PivotChart
      {store}
      type="bar"
      showLegend
      height={400}
    />
  </div>
</div>

Chart types: bar, line, pie, doughnut, area, stacked.

6. Sparklines

Render inline trend charts in each row.

svelte

<PivotTable
  {store}
  layout="tabular"
  sparkline={{ type: 'line', height: 24, color: '#3b82f6', showMinMax: true }}
/>

Types: line, bar, area.

7. Export to CSV

Programmatically export pivot data.

svelte

<script>
  import { createPivotStore, exportToCSV, exportToJSON, exportToHTML } from '@pivotblitz/svelte';

  const store = createPivotStore(data, config);

  function download(format) {
    const filename = 'pivot-export-' + Date.now();
    switch (format) {
      case 'csv':  exportToCSV(store.pivotData, { filename }); break;
      case 'json': exportToJSON(store.pivotData, { filename }); break;
      case 'html': exportToHTML(store.pivotData, { filename }); break;
    }
  }
</script>

<button onclick={'={'}() => download('csv')}>Export CSV</button>
<button onclick={'={'}() => download('json')}>Export JSON</button>

8. Dark Mode

Wrap your pivot in a ThemeProvider for dark mode support.

svelte

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

  const store = createPivotStore(data, config);
  let dark = $state(false);
</script>

<button onclick={'={'}() => dark = !dark}>
  {dark ? 'Light' : 'Dark'} Mode
</button>

<ThemeProvider mode={dark ? 'dark' : 'light'}>
  <PivotTable {store} layout="tabular" />
</ThemeProvider>

Modes: 'light', 'dark', 'system' (auto-detect).

9. Internationalization

Set the locale for number formatting, labels, and text direction.

svelte

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

  const store = createPivotStore(data, {
    rows: ['regione'],
    cols: ['prodotto'],
    vals: ['fatturato'],
    aggregatorName: 'Sum',
  });
</script>

<!-- Italian locale: 1.234,56 number format, Italian labels -->
<PivotTable {store} locale="it" />

Supported locales: en, it, de, fr, es, pt, ja, zh, ar (RTL).

10. Real-time Data Updates

Push incremental updates without replacing the entire dataset.

svelte

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

  const store = createPivotStore(data, config);

  // Simulate real-time updates every 2 seconds
  setInterval(() => {
    store.applyDelta({
      inserts: [
        { region: 'North', product: 'Widget', revenue: Math.random() * 1000 },
      ],
    });
  }, 2000);
</script>

<PivotTable
  {store}
  layout="tabular"
  cellFlash={{ enabled: true, duration: 500 }}
/>

The cellFlash prop highlights cells that change value, providing visual feedback for real-time data.