Next.js + WebPivotTable

This entire demo site is the Next.js test! You're running on Next.js 15 App Router right now.

Architecture

Framework: Next.js 15 with App Router
Deployment: AWS Lambda + CloudFront via SST v3
Integration: Dynamic import('webpivottable') for client-side loading
Custom Elements: <web-pivot-table> with TypeScript globals
SSR Safety: 'use client' boundary prevents server rendering issues

Live Examples on This Site

/demo — Single pivot with AI integration /try — Multi-sample playground React Integration — React component integration Feature Examples — Individual feature tests

Key Integration Patterns

// pages or components that use webpivottable
'use client'

import { useEffect, useRef } from 'react'

export default function PivotPage() {
  const wptRef = useRef<any>(null)

  useEffect(() => {
    // Import only on client side
    import('webpivottable').then(() => {
      const wpt = wptRef.current
      
      // Wait for wpt:ready before configuring
      wpt.addEventListener('wpt:ready', () => {
        wpt.setOptions({ 
          locale: 'en',
          fileProxy: '/api/wpt/file-proxy'
        })
        wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')
      }, { once: true })
    })
  }, [])

  return <web-pivot-table ref={wptRef} />
}

// TypeScript globals for JSX
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'web-pivot-table': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>, 
        HTMLElement
      >
    }
  }
}