Events

WebPivotTable dispatches standard DOM CustomEvents on the <web-pivot-table> element. Use addEventListener to listen for them - no event bus required.

How to Listen to Events

const wpt = document.getElementById('wpt');

wpt.addEventListener('SAVE_WPT', (e) => {
  console.log('Save requested:', e.detail);
});

Important: Application events (SAVE_WPT, OPEN_WPT, etc.) are only dispatched when the corresponding custom handler is enabled. Otherwise the component opens its own built-in dialog.

wpt.setOptions({
  customHandlers: {
    connectSource: true,
    openWpt: true,
    saveWpt: true,
    drillThrough: true,
  }
});

Application Events

These events are emitted when the user performs an action in the UI.

NEW_WPT

Emitted when the user clicks the New toolbar button.

wpt.addEventListener('NEW_WPT', (e) => {
  // Handle new WPT request
});

OPEN_WPT

Emitted when the user clicks the Open toolbar button.

wpt.addEventListener('OPEN_WPT', (e) => {
  // Show your own file picker
});

SAVE_WPT

Emitted when the user clicks the Save toolbar button.

wpt.addEventListener('SAVE_WPT', (e) => {
  const wptData = e.detail;
  // Save to your backend
  fetch('/api/save', { method: 'POST', body: JSON.stringify(wptData) });
});

CONNECT_SOURCE

Emitted when the user clicks the Connect button.

wpt.addEventListener('CONNECT_SOURCE', (e) => {
  // Show your own data source picker
});

DRILL_THROUGH

Emitted when the user clicks a data cell to drill through to the underlying rows.

wpt.addEventListener('DRILL_THROUGH', (e) => {
  const { sheet, row, column, event } = e.detail;
  // Display the drill-through data in your own UI
});

Internal Events

These events are dispatched by element-level methods for programmatic integration.

wpt.addEventListener('wpt:options', (e) => {
  console.log('Options changed:', e.detail.options);
});

wpt.addEventListener('wpt:data', (e) => {
  console.log('Data rows updated:', e.detail.rows.length);
});