Skip to content
Handsontable dev

Formulas integration in Vue 3

Integrate the Formulas plugin with your Vue 3 data grid.

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, 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.

JavaScript
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;
HTML
<div id="example1">
  <hot-table :settings="hotSettings"></hot-table>
</div>
Formula calculation