webpivottable

v7.1.1

Published

7 months ago

A pure javascript pivot table and pivot chart component.

0High
0Medium
0Low

bright-sea

pivot-table pivot-chart web-component data-analysis business-intelligence react javascript olap csv excel

WebPivotTable

A professional-grade pivot table & pivot chart Web Component — framework-agnostic, works anywhere with a single <script> tag or via npm.

Install

npm install webpivottable
# or
pnpm add webpivottable
# or
yarn add webpivottable

Quick Start (CDN)

No build tools required — just add a script tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>WebPivotTable Quick Start</title>
  <script type="module" src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</head>
<body>
  <div style="width: 100%; height: 500px;">
    <web-pivot-table></web-pivot-table>
  </div>
</body>
</html>

Quick Start (npm)

import 'webpivottable'

Then use the custom element in your HTML or framework template:

<web-pivot-table></web-pivot-table>

Framework Integration

WebPivotTable works with any framework — React, Vue, Angular, Svelte, or plain HTML.

// React example
import 'webpivottable'

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <web-pivot-table />
    </div>
  )
}

Loading Data

Load data programmatically via JavaScript:

const wpt = document.querySelector('web-pivot-table')

// Load from a CSV URL
wpt.setCsvUrl('https://example.com/data.csv')

// Or pass an array of objects directly
wpt.setData([
  { Region: 'East', Product: 'Widget', Sales: 100 },
  { Region: 'West', Product: 'Gadget', Sales: 200 },
])

Options

Configure the component via the options attribute or setOptions():

const wpt = document.querySelector('web-pivot-table')
wpt.setOptions({ locale: 'zh' })

Locales

Locale files are included in the package under dist/locales/. Load a locale to switch the UI language:

<web-pivot-table locale="zh"></web-pivot-table>

Documentation

For full documentation, live demos, API reference, and configuration options:

webpivottable.com/docs

Community & Support

Bug Reports: GitHub Issues
Questions / Discussions: GitHub Discussions
Website: webpivottable.com

License

See LICENSE for details.