Skip to main content

DHTMLX Spreadsheet. React integration example

Demo of DHTMLX Spreadsheet integration with React using the official GitHub demo. Shows initialization and cleanup for a React-based DHTMLX Spreadsheet 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 Spreadsheet in seconds. No local setup required.

DHTMLX Spreadsheet integrates with React using standard hooks: useRef for the container element, useEffect for the component lifecycle, and the Spreadsheet constructor for initialization. The official demo component wraps the widget in a functional React component that handles mounting, data loading, and cleanup in a single effect.

The demo component imports the Spreadsheet class and CSS, creates a ref for the container <div>, and initializes the widget inside useEffect. The parent App component calls getData(), which returns an object with sheets (sheet configurations with cell values and formulas), styles (custom CSS class definitions), and formats (number, date, and currency format masks), and passes it as the data prop. The data is loaded via spreadsheet.parse(props.data). The cleanup function calls spreadsheet.destructor() to release resources when the component unmounts.

The linked GitHub repository provides a complete React project with container styling, data generation, and Codespaces configuration. Clicking "Open in Codespaces" launches a fully functional development environment with the Spreadsheet component running in the browser.

Solution overview​

  1. Create a container ref with useRef()
  2. Initialize the Spreadsheet in useEffect with new Spreadsheet(container.current, config)
  3. Load data via spreadsheet.parse(props.data) from the parent component
  4. Return spreadsheet.destructor() from the effect cleanup function

Key points​

  • Single effect: Initialization, data loading, and cleanup happen in one useEffect
  • Container styling: The container <div> must have explicit height (e.g., height: 100%) for the Spreadsheet to render correctly
  • Package options: Import from @dhx/trial-spreadsheet for evaluation or the PRO package for production

Additional resources​