Skip to main content

DHTMLX Pivot. Svelte demo example

Demo of DHTMLX Pivot integration with Svelte using the official GitHub demo. Shows Svelte component initialization and cleanup for a Pivot instance.

Try it online

View on GitHub - open the repository and click "Open in Codespaces" on the README page to launch a fully configured Svelte app with DHTMLX Pivot in seconds. No local setup required.

Svelte's compile-time reactivity model makes it a natural fit for integrating third-party widgets like DHTMLX Pivot. Unlike virtual-DOM frameworks, Svelte components compile to efficient imperative code, so wrapping an external widget requires careful attention to lifecycle hooks - initialize the pivot when the component mounts and destroy it when the component is removed from the DOM.

The demo component creates a Pivot instance in onMount, passing a container element bound via bind:this as the mount point along with configuration for fields, data, headerShape, tableShape, columnShape, and config (rows, columns, values). The onDestroy hook calls table.destructor() for proper resource management. Props fields and dataset are exported from the component using export let, keeping data management in Svelte's layer.

This example links to the official DHTMLX Pivot Svelte demo on GitHub, which demonstrates the recommended integration pattern. You can launch the demo directly in GitHub Codespaces from the repository's README page. The demo covers bind:this container binding, onMount initialization, and cleanup on component destruction.

Solution overview​

To integrate DHTMLX Pivot with Svelte, follow the standard widget lifecycle pattern:

  1. Bind the container using bind:this={container} on a <div> element - Svelte resolves the binding before onMount runs, so the DOM element is available for initialization.
  2. Initialize in onMount - call new Pivot(container, config) after Svelte renders the component, passing fields, data, and pivot configuration (headerShape, tableShape, columnShape, config with rows, columns, values).
  3. Pass data via props - the parent App.svelte provides fields and dataset as props, while Pivot.svelte declares them with Svelte's export let syntax, keeping data loading separate from the widget lifecycle.
  4. Clean up in onDestroy by calling table.destructor() to remove all event listeners and internal state, preventing memory leaks during route navigation.

Key points​

  • bind:this for container binding: Svelte's element binding provides a direct DOM reference without wrapper objects, passed directly to the Pivot constructor
  • Initialization in onMount: Creates the Pivot instance after the component is first rendered to the DOM, with full configuration for fields, data, header/table/column shapes, and row/column/value definitions
  • Mandatory destructor() in onDestroy: Calls table.destructor() to prevent memory leaks, especially in single-page applications with SvelteKit routing where components mount and unmount during navigation
  • GitHub Codespaces support: The official demo repository supports one-click launch via "Open in Codespaces", providing a fully configured development environment without local setup

Additional resources​