Embedding Pivot Tables — Web Component

Minimal HTML Example

Here's a standalone HTML file that renders an interactive pivot table. The JavaScript bundle is served by the ReportBurster server:

<!DOCTYPE html>
<html>
<head>
  <!-- Load the web components bundle from the ReportBurster server -->
  <script src="http://localhost:9090/rb-webcomponents/rb-webcomponents.umd.js"></script>
</head>
<body>

  <rb-pivot-table
    report-code="piv-sales-country-year-duckdb"
    api-base-url="http://localhost:9090/api/jobman/reporting"
  ></rb-pivot-table>

</body>
</html>

That's it — one script tag and one custom element with two attributes.

How It Works

report-code — tells the component which report configuration to load from the server
api-base-url — the ReportBurster API endpoint (the server handles config, data, and aggregation)
The component self-fetches everything: it reads the pivot DSL config from the server, loads the data, and renders the interactive pivot table — all automatically

Requirement: The ReportBurster server must be running. The component loads both its JavaScript bundle and the pivot data from the server. Replace localhost:9090 with your actual server address in production.

Where It Works

✓ Plain HTML files — no build tools needed, just a script tag
✓ Legacy web applications — jQuery apps, PHP pages, ASP.NET, JSP, etc.
✓ Modern frameworks — React, Angular, Vue, Svelte, Next.js
✓ CMS platforms — WordPress, Drupal, SharePoint (via custom HTML blocks)
✓ Grails GSP pages — perfect fit with ReportBurster's backend stack

<rb-pivot-table> is a standard Web Component (Custom Element) built with Svelte and packaged as a UMD bundle. It runs in any modern browser — no framework dependency, no build step. If the page can load a JavaScript file, it can render the pivot table.

Try it — create an HTML file with the snippet above, make sure the ReportBurster server is running, and open it in your browser.