ProPivot — downloadable starter apps for React, Angular, Vue & plain JavaScript

Ready-to-run starter apps for any JavaScript framework.

Grab a complete starter project that already embeds ProPivot over a sample dataset — React, Angular, Vue, or plain JavaScript. Unzip it, install dependencies, and the pivot grid runs locally in your browser — no registry access and no extra wiring. The library comes bundled inside, so it works completely offline.

Pick your framework.

Each archive is a small, self-contained project: the starter app plus a pre-built copy of the ProPivot library wired up as a local dependency.

⚛️

React starter

Vite · React 18 · TypeScript

Renders <Pivot report={…} toolbar /> with a toolbar for expand/collapse and CSV/Excel export. The report object lives in one editable file.

src/App.tsx — the <Pivot> component
src/sampleData.ts — rows + report
README.md — run instructions

⬇ Download React starter · ~276 KB

🅰️

Angular starter

Angular 18 · standalone · TypeScript

Uses a reusable <pro-pivot [report]="report" [toolbar]="true"> wrapper component you can copy straight into your own app.

src/app/app.component.ts — uses <pro-pivot>
src/app/pro-pivot.component.ts — the wrapper
README.md — run instructions

⬇ Download Angular starter · ~278 KB

🟢

Vue starter

Vite · Vue 3 · TypeScript

Renders <Pivot :report="report" toolbar /> with the Vue wrapper component — it forwards every event as an emit and swaps the report reactively.

src/App.vue — the <Pivot> component
src/sampleData.ts — rows + report
README.md — run instructions

⬇ Download Vue starter · ~276 KB

🟨

Vanilla JS starter

Plain HTML + JavaScript · no build step

Zero tooling: a single <script> loads the global build and new ProPivot({…}) mounts the grid. Perfect for server-rendered pages or a WebView.

index.html — loads the global bundle
main.js + sampleData.js — mount + report
README.md — run instructions

⬇ Download Vanilla JS starter · ~275 KB

Three commands and you're pivoting.

For the React, Angular, and Vue starters you need Node.js 18 or newer (Angular needs 18.19+). The plain-JavaScript starter needs nothing but a browser. The steps are the same on macOS, Windows, and Linux.

📦 Already shipped inside the zip — no npm install @proteus/propivot needed to run the starter.

⚛ React

# 1 · unzip, then enter the folder
cd propivot-react-starter

# 2 · install dependencies
npm install

# 3 · start the dev server
npm run dev
# → open http://localhost:5173

Production build: npm run build then npm run preview.

🅰 Angular

# 1 · unzip, then enter the folder
cd propivot-angular-starter

# 2 · install dependencies
npm install

# 3 · start the dev server
npm start
# → open http://localhost:4200

Production build: npm run build.

🟢 Vue

# 1 · unzip, then enter the folder
cd propivot-vue-starter

# 2 · install dependencies
npm install

# 3 · start the dev server
npm run dev
# → open http://localhost:5173

Production build: npm run build then npm run preview.

🟨 Vanilla JS

# 1 · unzip, then enter the folder
cd propivot-vanilla-js-starter

# 2 · serve the folder (no install needed)
npx --yes serve .
# …or: python3 -m http.server 8080
# → open the URL it prints

No build step — it loads the global <script> bundle directly.

Swap in your own data.

The pivot is driven by a plain report object — the slice (rows / columns / measures), number formats, and conditional formatting. Replace the generated rows with your array of objects, describe each field in mapping, and adjust slice:

slice: { rows: [{ uniqueName: 'region' }, { uniqueName: 'category' }], columns: [{ uniqueName: 'year' }], measures: [{ uniqueName: 'sales', aggregation: 'sum', format: 'cur' }], }