← Back to Features

Multi-Instance

Two fully isolated WPT instances on the same page, each with its own data and events.

🎯 Live Demo

Instance 1 — Sales

Instance 2 — Insurance

💻 Implementation Code

multi-instance-example.html 
<!DOCTYPE html>
<html>
<head>
  <title>Multiple WebPivotTable Instances</title>
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
  <style>
    .container { display: flex; gap: 20px; }
    .instance { flex: 1; }
  </style>
</head>
<body>
  <h1>Multiple Instances Demo</h1>

  <!-- Multiple Instances -->
  <div class="container">
    <div class="instance">
      <h3>Sales Data</h3>
      <web-pivot-table id="wpt1" style="width:100%;height:500px"></web-pivot-table>
    </div>
    <div class="instance">
      <h3>Insurance Data</h3>
      <web-pivot-table id="wpt2" style="width:100%;height:500px"></web-pivot-table>
    </div>
  </div>

  <script>
    // Get references to both instances
    const wpt1 = document.getElementById('wpt1')
    const wpt2 = document.getElementById('wpt2')

    // Load different datasets
    wpt1.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')
    wpt2.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/FL_insurance.csv')

    // Apply different themes
    wpt1.setOptions({ theme: { preset: 'default' } })
    wpt2.setOptions({ theme: { preset: 'ocean' } })

    // Sync pivot structure from instance 1 to instance 2
    function syncInstances() {
      const config = JSON.parse(wpt1.generateWptString(true))
      wpt2.setOptions({
        rows: config.rows,
        cols: config.cols,
        vals: config.vals,
        filters: config.filters
      })
    }

    // Event handling per instance
    wpt1.eventBus.on('PIVOT_CHANGED', () => {
      console.log('Instance 1 pivot changed')
    })

    wpt2.eventBus.on('PIVOT_CHANGED', () => {
      console.log('Instance 2 pivot changed')
    })
  </script>
</body>
</html>

� Usage Notes