Login npm

npm login

Patch: 1.0.0 -> 1.0.1

npm version patch

Minor: 1.0.0 -> 1.1.0

npm version minor

Major: 1.0.0 -> 2.0.0

npm version major

Build

npm run build

Publish to npm

npm publish

View version

npm view @hrforte/react-pivottable version

Large datasets (Web Worker)

With large datasets (e.g. 200,000 records) pivot computation is offloaded to a Web Worker so the main thread (and the UI) stays responsive.

1. Get the worker file

The published package ships a self-contained worker bundle (no imports, no dependencies) at:

node_modules/@hrforte/react-pivottable/dist/pivot-worker.js

2. Copy it somewhere the browser can fetch

new Worker(url) resolves url against the page URL, not against the bundle, and it must be served same-origin. So the file has to be copied to a public/static folder of your app - it is not enough to just install the package.

# copy into the folder that the dev server / web server exposes as static root
mkdir -p public
cp node_modules/@hrforte/react-pivottable/dist/pivot-worker.js public/

# optional but recommended: keep it in sync automatically after install
# package.json -> "scripts": { "postinstall": "node -e \"require('fs').copyFileSync('node_modules/@hrforte/react-pivottable/dist/pivot-worker.js','public/pivot-worker.js')\"" }

Where to put it per setup:

| Setup | Target folder | workerUrl prop | | --- | --- | --- | | Plain static site / webpack (this repo) | examples/ (next to index.html) | not needed (default) | | Create React App | public/ | not needed (default) | | Vite | public/ | not needed (default) | | Next.js (app or pages) | public/ | not needed (default) | | Page in a sub-folder (/admin/report.html) | /admin/pivot-worker.js | workerUrl="/admin/pivot-worker.js" | | App deployed under a sub-path (/myapp/) | root of that base path | workerUrl="/myapp/pivot-worker.js" | | Worker hosted elsewhere (CDN) | - | must be same-origin, see below |

3. Pass workerUrl (only when the default does not match)

<PivotTableUI
  data={rows}
  workerUrl="/myapp/pivot-worker.js"   // absolute web-root path (sub-path deploy)
  // or a relative path resolved against the page URL:
  // workerUrl="assets/js/pivot-worker.js"
  // or a full URL on the SAME origin:
  // workerUrl={`${window.location.origin}/static/pivot-worker.js`}
/>

Accepted forms (all verified):

| Value | Resolved by the browser as | Use when | | --- | --- | --- | | 'pivot-worker.js' (default) | <page-directory>/pivot-worker.js | file sits next to the page | | 'assets/js/pivot-worker.js' | <page-directory>/assets/js/... | nested static folder | | '/myapp/pivot-worker.js' | origin root + /myapp/... | app served under a sub-path | | 'https://cdn.example.com/pivot-worker.js' | absolute | same-origin only (CORS does not apply to new Worker) |

Notes:

• A worker script must be same-origin by default. Cross-origin URLs only work if the server sends CORS headers (Access-Control-Allow-Origin) and the browser allows it - support varies, so prefer serving the file from your own origin. If you must host it elsewhere, fetch the script yourself and pass a Blob URL as workerUrl.
• Changing workerUrl at runtime is supported: the previous worker is terminated, a new one is created from the new URL and the current dataset is staged on it again.
• If you bundle the worker yourself, pass the emitted URL, e.g. with Vite: import workerUrl from '@hrforte/react-pivottable/dist/pivot-worker.js?url' then workerUrl={workerUrl}.

4. Fallback

If the worker file cannot be loaded (404, blocked, old browser), the component automatically falls back to the previous synchronous computation: same results, but the main thread is used. Verify with workerDebug:

[pivottable worker] worker created: /myapp/pivot-worker.js
[pivottable worker] #1 dispatching to worker (dataKey=..., staging 1500 records, ...)
[pivottable worker] (in worker) #1 computed in 25ms (rowKeys: 4, colKeys: 3, ...)
[pivottable worker] #1 result received in 86ms { totalRecords: 1500, ... }

Available props

• enableWorker (bool, default true): disable to always compute on the main thread.
• workerThreshold (number, default DEFAULT_WORKER_THRESHOLD, currently 200 in this build): minimum number of records required before using the worker.
• workerUrl (string, default 'pivot-worker.js'): URL of the worker bundle (see above).
• workerDebug (bool, default false): prints the whole worker pipeline (worker creation, data staging, progress, compute, result, errors and the fallback to the main thread) to the browser console with a [pivottable worker] prefix. Logs emitted inside the worker thread are forwarded to the page console as well. Can also be enabled globally with window.__PVT_WORKER_DEBUG__ = true.
• isShowProcessing (bool, default false): testing/debugging hook. When true the loading overlay is forced on top of the table even if nothing is being computed, so the PivotLoadingOverlay can be inspected without generating a large dataset. A sample progress value is supplied so the progress bar and percentage are rendered as well.