Skip to main content

DHTMLX Spreadsheet. Svelte integration example

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

DHTMLX Spreadsheet integrates with Svelte using standard lifecycle functions: onMount for initialization and onDestroy for cleanup. The component binds a container element with bind:this, creates the Spreadsheet instance on mount, loads data via parse(), and destroys the instance when the component is removed from the DOM.

The demo component imports the Spreadsheet class and CSS, receives data as a prop from the parent App.svelte, and initializes the widget inside onMount. The parent 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 a prop. The onDestroy callback calls spreadsheet.destructor() to release all resources and prevent memory leaks.

The linked GitHub repository provides a complete Svelte project with data generation, container styling, and Codespaces support. One click on "Open in Codespaces" launches a fully functional development environment.

Solution overview​

  1. Bind a container element with bind:this={container}
  2. Initialize the Spreadsheet in onMount with new Spreadsheet(container, config)
  3. Load data via spreadsheet.parse(data) from the component prop
  4. Call spreadsheet.destructor() in onDestroy

Key points​

  • Lifecycle alignment: onMount and onDestroy map directly to the Spreadsheet's create/destroy cycle
  • Container binding: Svelte's bind:this provides the DOM reference needed by the Spreadsheet constructor
  • Package options: Import from @dhx/trial-spreadsheet for evaluation or the PRO package for production

Additional resources​