← Back to Features

CDN Quick Start

Load WebPivotTable via CDN script tag and display data from a CSV URL. This is the fastest way to get started.

🎯 Live Demo

💻 Implementation Code

cdn-quick-start.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CDN Quick Start</title>

  <!-- Load WebPivotTable from CDN -->
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</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>

  <script>
    // Get the element and load data
    const wpt = document.getElementById('wpt')

    // Load CSV data from URL
    wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')

    // Optional: Configure options
    wpt.setOptions({
      locale: 'en',
      uiFlags: {
        export: true,
        save: true
      }
    })

    // Optional: Listen to events
    wpt.eventBus.on('PIVOT_CHANGED', () => {
      console.log('Pivot layout changed!')
    })
  </script>
</body>
</html>

📋 Usage Notes