← WebPivotTable
Playground
CDN — Minimal
Copy
▶ Run
Docs
Samples
◀
🚀
Quick Start
▶
CDN — Minimal
Simplest possible setup: one script tag, one element, load CSV data.
CDN — Classic Script
Traditional <script> in <head>, then API calls in <body>.
npm — ES Module Import
view only
Use "import 'webpivottable'" in any bundler project. (Preview only — cannot run in playground.)
⚡
Frameworks
▶
📊
Data Sources
▶
⚙️
API & Options
▶
20 samples
index.html
⌘↵ to run
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, sans-serif; } </style> </head> <body> <web-pivot-table id="wpt" style="width:100vw; height:100vh; display:block" ></web-pivot-table> <script> var wpt = document.getElementById('wpt'); // When loading scripts dynamically, wait for ready event wpt.addEventListener('wpt:ready', function () { wpt.setOptions({ locale: 'en', localeFilePath: 'https://cdn.webpivottable.com/wpt/latest/locales' }); wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv'); }, { once: true }); var s = document.createElement('script'); s.src = 'https://cdn.webpivottable.com/wpt/latest/wpt.js'; document.head.appendChild(s); </script> </body> </html>
⌘+Enter — run
Tab — indent
33 lines
▶
Click
Run
to see the preview