Web Pivot Table (React 19 + Web Component)

• Single-file web component (IIFE) + ESM build
• Zustand slices (options/system/source/sheet)
• Element defaults to display:block;width:100%;height:100%
• Size API: setSize/getSize, wpt:size event
• Layout options: options.layout = { headerReserve, aspectRatio, fitMode }
• Fullscreen-aware (ResizeObserver + screenfull change listener)

Install

yarn install

Dev

yarn dev # Custom Element dev page

Locale source-of-truth is public/locales/*.json. Local dev uses locale files directly from public/locales with no copy step. Build steps copy locales into dist/locales and release outputs.

Build

yarn build:cdn yarn build:npm yarn build:self-host yarn build:all

Note: component styles are inlined into JS bundles during build (no separate wpt.css file required in releases).

IIFE

ESM

Size & layout

el.setSize(800, 400) el.getSize() // { width, height } el.addEventListener('wpt:size', e => console.log(e.detail))

options.layout = { headerReserve: 180, aspectRatio: 1.6, fitMode: 'fill' // 'fit-width' | 'fit-height' }

Locale deployment modes

Runtime options:

• localeDeploymentMode: cdn | self-host
• localeBaseUrl: explicit locale URL base (highest priority)
• localeCdnBaseUrl: optional CDN override for cdn mode

1) CDN mode (best DX)

• Default mode in this repo.
• Locales are resolved from versioned CDN path: https://cdn.webpivottable.com/wpt/v<version>/locales.
• Example:

el.options = {
  locale: "de",
  localeDeploymentMode: "cdn",
};

2) Self-host mode

• Copy locale files into your app under /public/locales.
• Set:

el.options = {
  locale: "pt",
  localeDeploymentMode: "self-host",
  localeBaseUrl: "/locales",
};

Build locale deployment assets

Generate versioned CDN deployment bundle (JS + locales):

yarn build:cdn

• Output folder:
  • releases/cdn/v<version>/
  • includes JS bundles + locales/*.json + manifest.json

Generate npm-install package tarball (bundle + locales):

yarn build:npm

• Output folder:
  • releases/npm/*.tgz

Generate self-host/local-copy package (folder + zip for unzip/upload workflows):

yarn build:self-host

• Output folder:
  • releases/self-host/v<version>/
• Output zip:
  • releases/self-host/web-pivot-table-v<version>-self-host.zip

Build all three deployment modes together:

yarn build:all

Note: locale assets are prepared automatically during build:cdn, build:npm, and build:self-host. The locale source files are read from public/locales.

CDN deployment

CDN setup + deploy (manual and GitHub Actions), AWS IAM/OIDC policies, release checklist, and rollback steps are documented in:

• AWS_CDN_DEPLOY_GUIDE.md