Handsontable example

by aszymanski

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

<button class="btn">Add Calculation</button>

Babel + JSX

import Handsontable from 'handsontable';
import HyperFormula from 'hyperformula';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example1');


const hyperformulaInstance = HyperFormula.buildEmpty({
  // to use an external HyperFormula instance,
  // initialize it with the `'internal-use-in-handsontable'` license key
  licenseKey: 'internal-use-in-handsontable',
});

const hot = new Handsontable(container, {
  data: [
      [5, 2, 7, 8, 5],
      [7, 4, 1, 0, 5],
      [8, 5, 5, 4, 6],
      [4, 2, 3, 0, 7],
      [3, 0, 2, 2, 0]
    ],
  colHeaders: true,
  rowHeaders: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation',
  formulas: {
    engine: hyperformulaInstance,
    sheetName: 'Sheet1'
  },
});

  function addCalc() {
    //adding row and pushing new data
    hot.setDataAtCell(hot.countRows(), 0, '');
    //changing header to AVE for the last row  
    hot.updateSettings({
      afterGetRowHeader: function(row, TH) {
        if (row === hot.countRows() - 1) {
          TH.textContent = 'SUM'
        } else {
          TH.textContent = row + 1
        }
      }
    })
    hot.setDataAtCell(hot.countRows() - 1, 0, '=SUM(A1:A4)');
  }
  
  
  document.querySelector('.btn').addEventListener('click', function() {
    addCalc()
  })