Skip to main content

DHTMLX Pivot. React demo example

Demo of DHTMLX Pivot integration with React using the official GitHub demo. Shows initialization and cleanup for a React-based DHTMLX Pivot component.

Try it online

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

DHTMLX Pivot integrates with React using standard hooks - useRef for the container element and useEffect for initialization and cleanup. The official demo wraps the entire pivot in a single reusable component that works like any other React component in your application.

The demo component creates a Pivot instance inside useEffect, passing container.current as the mount point along with configuration for fields, data, rows, columns, values, and display shapes. The effect's cleanup function calls table.destructor() for proper resource management. Props like fields and dataset flow from the parent component, keeping data management in React's layer while the Pivot component focuses on widget lifecycle.

This example links to the official DHTMLX Pivot React 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 proper useRef container binding, useEffect initialization, and cleanup on unmount.

Solution overview​

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

  1. Create a container ref using useRef() to get a stable reference to the <div> element where Pivot will mount.
  2. Initialize in useEffect - call new Pivot(container.current, config) after React renders the component, passing fields, data, and pivot configuration (rows, columns, values, shapes).
  3. Pass data via props - the parent component provides fields and dataset, keeping data loading in React's layer while the Pivot component focuses on widget lifecycle.
  4. Clean up in the effect's return function by calling table.destructor() to remove all event listeners and internal state, preventing memory leaks during route navigation.

Key points​

  • useRef for container binding: Provides a stable DOM reference that persists across re-renders, passed as container.current to the Pivot constructor
  • Initialization in useEffect: Creates the Pivot instance after the DOM is ready; in this demo, the effect has no dependency array, so it runs after each render
  • Mandatory destructor() in cleanup: The effect's return function calls table.destructor() to prevent memory leaks, especially in single-page applications with React 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​