index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NPM Import Example</title>
</head>
<body>
<h1>My Pivot Table App</h1>
<!-- Place the web component -->
<web-pivot-table id="wpt" style="width:100%;height:600px"></web-pivot-table>
<!-- Import your main script -->
<script type="module" src="./main.js"></script>
</body>
</html>
main.js
// Import WebPivotTable from npm package
import 'webpivottable'
document.addEventListener('DOMContentLoaded', async () => {
const wpt = document.getElementById('wpt')
if (!wpt) {
console.error('web-pivot-table element not found')
return
}
try {
// Configure options
wpt.setOptions({
locale: 'en',
uiFlags: {
export: true,
save: true
}
})
// Load data from CSV
await wpt.setWptFromCsvUrl('/data/sales.csv')
// Listen to events
wpt.eventBus.on('PIVOT_CHANGED', () => {
console.log('Pivot layout changed!')
})
wpt.eventBus.on('DATA_LOADED', (detail) => {
console.log('Data loaded:', detail.rowCount, 'rows')
})
console.log('Pivot table initialized successfully')
} catch (error) {
console.error('Error setting up pivot table:', error)
}
})
package.json
{
"name": "my-pivot-app",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"webpivottable": "^7.1.1"
},
"devDependencies": {
"vite": "^6.0.0"
}
}