@pivotblitz/vue

Vue 3 components for PivotBlitz — interactive pivot tables with Composition API support.

Installation

pnpm add @pivotblitz/vue
# or
npm install @pivotblitz/vue

Quick Start

<script setup>
import { usePivotStore, PivotTable } from '@pivotblitz/vue';
import '@pivotblitz/vue/styles.css';

const data = [
  { region: 'North', product: 'Widget', sales: 1200 },
  { region: 'South', product: 'Gadget', sales: 950 },
  // ...
];

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

<template>
  <PivotTable :store="store" :enable-hover="true" :zebra="true" />
</template>

Composables

| Composable | Description | |------------|-------------| | usePivotStore(data, config) | Creates a reactive pivot store with aggregation engine | | usePivotTableController(store, options) | Headless controller for custom table rendering |

usePivotStore

Returns a reactive PivotStore object with:

• config — Current pivot configuration (rows, cols, vals, aggregatorName, etc.)
• attributes — Available field names from data
• rowKeys / colKeys — Computed row and column keys
• pivotData — Aggregated PivotData instance
• setRows(rows) / setCols(cols) / setVals(vals) — Update dimensions
• setConfig(config) — Replace full configuration
• getAttributeValues(attr) — Get unique values for a field
• addInclusion(attr, value) / removeInclusion(attr, value) — Filter control
• clearFilters() — Remove all filters
• getAggregator(rowKey, colKey) — Get aggregated value for a cell
• getRecordsForCell(rowKey, colKey) — Get source records for drill-down

Components

| Component | Description | |-----------|-------------| | PivotTable | Core pivot table with sorting, formatting, hover, zebra striping | | PivotTableAdvanced | Extended table with context menu, keyboard nav, drill-down, resize | | ContextMenu | Right-click context menu for cells | | DrillDownModal | Modal showing source records for a cell |

Core Re-exports

All @pivotblitz/core exports are available directly:

import { exportToCSV, setLocale, formatNumber } from '@pivotblitz/vue';

Documentation

• Getting Started (Vue)
• API Reference
• All Guides

License

MIT