Skip to main content

DHTMLX Spreadsheet. Vue integration example

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

DHTMLX Spreadsheet integrates with Vue using template refs and Options API lifecycle hooks. The component defines a ref on the container element, initializes the Spreadsheet in the mounted hook, loads data via props, and destroys the instance in unmounted.

The parent App.vue 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 demo component calls spreadsheet.parse(this.data) inside mounted to load this data. The unmounted hook calls spreadsheet.destructor() to release resources. The container <div> uses a template ref (ref="container") accessed as this.$refs.container.

The linked GitHub repository provides a complete Vue project with data generation, global styles, and Codespaces configuration for one-click launch.

Solution overview​

  1. Add ref="container" to the template <div>
  2. Initialize the Spreadsheet in mounted with new Spreadsheet(this.$refs.container, config)
  3. Load data via spreadsheet.parse(this.data) from props
  4. Call spreadsheet.destructor() in unmounted

Key points​

  • Options API lifecycle: The demo uses mounted for initialization and unmounted for cleanup, following the standard Options API pattern
  • Container sizing: The container element and its parents must have explicit height for the Spreadsheet to render correctly
  • Package options: Import from @dhx/trial-spreadsheet for evaluation or the PRO package for production

Additional resources​