Skip to main content

DHTMLX Pivot. Vue demo example

Demo of DHTMLX Pivot integration with Vue.js. Access the official GitHub repository with a ready-to-run Vue application featuring DHTMLX Pivot, launchable directly via GitHub Codespaces.

Try it online

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

DHTMLX Pivot integrates with Vue using the Options API - the mounted() hook for initialization and unmounted() for cleanup. The official demo wraps the entire pivot in a single reusable component that uses this.$refs.container for DOM access, working like any other Vue component in your application.

The demo component creates a Pivot instance in mounted(), passing this.$refs.container as the mount point along with configuration for fields, data, headerShape, tableShape, columnShape, and config (rows, columns, values). The unmounted() hook calls this.table.destructor() for proper resource management. Props fields and dataset flow from the parent App.vue, keeping data management in Vue's layer.

This example links to the official DHTMLX Pivot Vue 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 this.$refs container binding, mounted() initialization, and cleanup on component destruction.

Solution overview​

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

  1. Bind the container using a template ref="container" attribute and access it via this.$refs.container in the component - Vue resolves template refs before the mounted() hook runs, so the DOM element is guaranteed to be available.
  2. Initialize in mounted() - call new Pivot(this.$refs.container, config) after Vue renders the template, passing fields, data, and pivot configuration (headerShape, tableShape, columnShape, config with rows, columns, values).
  3. Pass data via props - the parent App.vue provides fields and dataset props, keeping data loading separate from the widget lifecycle.
  4. Clean up in unmounted() by calling this.table.destructor() to remove all event listeners and internal state, preventing memory leaks during route navigation.

Key points​

  • this.$refs.container for DOM binding: The template ref attribute provides a stable reference to the container <div>, accessed in the mounted() hook when the DOM is guaranteed to be ready
  • Initialization in mounted(): Creates the Pivot instance using this.$refs.container as the mount point, with full configuration for fields, data, header/table/column shapes, and row/column/value definitions
  • Mandatory destructor() in unmounted(): Calls this.table.destructor() to prevent memory leaks, especially in single-page applications with Vue Router 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​