Quick Start

Three ways to integrate WebPivotTable into any web application. Choose the approach that fits your project.

WebPivotTable is a standards-based Web Component. It works in any framework (Vue, Angular, Svelte, etc.) or plain HTML. Pick one of the approaches below to get started.

See It in Action

A live WebPivotTable component loaded from CDN. Toggle “View Source” to see the HTML behind it.

Approach 1 — CDN

Load directly from our CDN with a single script tag. No build step required.

Classic script tag

One script — works in any browser, no module system required.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.webpivottable.com/wpt/latest/web-pivot-table.js"></script>
</head>
<body>
  <web-pivot-table id="wpt" style="width:100%;height:600px;"></web-pivot-table>

  <script>
    var pivot = document.getElementById('wpt');
    pivot.setCsvUrl('/data/sales.csv');
  </script>
</body>
</html>

Approach 2 — npm Install

Install from the npm registry and import in any bundler-based project (Vite, Webpack, Next.js, etc.).

Step 1: Install

# npm
npm install @webpivottable/core

# or yarn
yarn add @webpivottable/core

Step 2: Import and register the custom element

// main.js or app entry
import '@webpivottable/core/define';   // registers <web-pivot-table>
import '@webpivottable/core/style.css'; // optional default styles

Step 3: Use in HTML or template

<web-pivot-table id="wpt" style="width:100%;height:600px;"></web-pivot-table>

<script type="module">
  const pivot = document.getElementById('wpt');
  pivot.setCsvUrl('/data/sales.csv');
</script>

Locale files (lazy-loaded)

Language files are not bundled in JS. They are loaded at runtime via fetch() when the user switches locale. Copy the locale folder to your public directory:

cp -r node_modules/@webpivottable/core/locales public/wpt-locales

Then configure the base URL so the component knows where to find them:

pivot.setLocaleBaseUrl('/wpt-locales');

Approach 3 — Download & Self-Host

Download the release package and serve from your own public directory. Full control over hosting and versioning.

Step 1: Download

Download the latest release archive from the Download page and extract it.

Step 2: Copy to your public directory

your-project/
  public/
    wpt/
      web-pivot-table.js
      style.css
      locales/
        en.json
        zh-cn.json
        ...

Step 3: Reference in HTML

<script src="/wpt/web-pivot-table.js"></script>

<web-pivot-table id="wpt" style="width:100%;height:600px;"></web-pivot-table>

<script>
  var pivot = document.getElementById('wpt');
  pivot.setCsvUrl('/data/sales.csv');

  // Point to self-hosted locale files
  pivot.setLocaleBaseUrl('/wpt/locales');
</script>

Which Approach Should I Use?

Quick comparison to help you choose.

ApproachBuild step?Version controlBest for
CDNNoPin via URL versionQuick prototypes, plain HTML
npmYes (bundler)package.json lockProduction apps, CI/CD pipelines
Self-hostNoManualAirgapped / intranet environments

Support Scope

Expected support model and service boundaries.