JavaScript Data Grid Formulas integration in Vue 3

Vue 3 Data GridFormulas integration in Vue 3

Integrate the Formulas plugin with your Vue 3 data grid.

Overview
Example - Using the Formulas plugin
Related articles
- Related guides
- Related API reference

Overview

You can use the Formulas plugin to perform Excel-like calculations in your business applications. It does it by an integration with our other product, HyperFormula (opens new window), which is a powerful calculation engine with an extensive number of features.

Find out more about the Formulas plugin

Example - Using the Formulas plugin

When using HyperFormula with Vue 3, never let Vue make the HyperFormula instance reactive. Vue's proxying interferes with the internal state of the engine and leads to subtle bugs and performance issues.

Wrap the instance with markRaw():

import { markRaw } from 'vue';
import { HyperFormula } from 'hyperformula';

const hfInstance = markRaw(HyperFormula.buildEmpty());

This keeps the engine untouched and ensures it behaves exactly as intended.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js",
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "3.2.45",
    "hyperformula": "^3.0.0",
    "handsontable": "17.0",
    "@handsontable/vue3": "17.0"
  },
  "devDependencies": {
    "@vue/cli-service": "5.0.8"
  }
}

module.exports = {
    runtimeCompiler: true
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <div id="example1">
  <hot-table :settings="hotSettings"></hot-table>
</div>
  </body>
</html>

import { createApp } from "vue";
import "./styles.css";
import ExampleComponent from "./ExampleComponent.js";

createApp(ExampleComponent).mount("#example1");

import { defineComponent, markRaw } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import { HyperFormula } from 'hyperformula';

// register Handsontable's modules
registerAllModules();

// mark the HyperFormula instance as raw to avoid Vue from proxying it
const hfRaw = markRaw(
  HyperFormula.buildEmpty({
    licenseKey: 'internal-use-in-handsontable',
  })
);

const ExampleComponent = defineComponent({
  data() {
    return {
      hotSettings: {
        data: [
          ['4', '=IF(A1>4, "TRUE", "FALSE")', 'C1'],
          ['2', 'B2', '=A1+A2'],
          ['3', 'B3', 'C3'],
          ['4', 'B4', 'C4'],
          ['5', 'B5', 'C5'],
          ['6', 'B6', 'C6'],
        ],
        colHeaders: true,
        height: 'auto',
        autoWrapRow: true,
        autoWrapCol: true,
        licenseKey: 'non-commercial-and-evaluation',
        formulas: {
          engine: hfRaw,
        },
      },
    };
  },
  components: {
    HotTable,
  },
});

export default ExampleComponent;

import { createApp } from 'vue';
import { defineComponent, markRaw } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import { HyperFormula } from 'hyperformula';

// register Handsontable's modules
registerAllModules();

// mark the HyperFormula instance as raw to avoid Vue from proxying it
const hfRaw = markRaw(
  HyperFormula.buildEmpty({
    licenseKey: 'internal-use-in-handsontable',
  })
);

const ExampleComponent = defineComponent({
  data() {
    return {
      hotSettings: {
        data: [
          ['4', '=IF(A1>4, "TRUE", "FALSE")', 'C1'],
          ['2', 'B2', '=A1+A2'],
          ['3', 'B3', 'C3'],
          ['4', 'B4', 'C4'],
          ['5', 'B5', 'C5'],
          ['6', 'B6', 'C6'],
        ],
        colHeaders: true,
        height: 'auto',
        autoWrapRow: true,
        autoWrapCol: true,
        licenseKey: 'non-commercial-and-evaluation',
        formulas: {
          engine: hfRaw,
        },
      },
    };
  },
  components: {
    HotTable,
  },
});



const app = createApp(ExampleComponent);
app.mount('#example1');

<script src="https://cdn.jsdelivr.net/npm/handsontable@17.0/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue3@17.0/dist/vue-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1">
  <hot-table :settings="hotSettings"></hot-table>
</div>

Formula calculation

Vue 3 Data GridFormulas integration in Vue 3

Overview

Example - Using the Formulas plugin

Related articles

Related guides

Related API reference