JSFiddle - React, Tailwind, and code Playground

by janzitniak

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.js"></script>

<div id="example"></div>
<button id="btnSUM">Click for insert SUM function</button>

JavaScript

var data = [
    ['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
    ['2017', 10, 11, 12, 13],
    ['2018', 20, 11, 14, 13],
    ['2019', 30, 15, 12, 13]
    ];

    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
    data: data,
    rowHeaders: true,
    colHeaders: true,
    filters: true,
    dropdownMenu: true,
    outsideClickDeselects: false,
    selectionMode: 'multiple',
    formulas: true,
    licenseKey: 'non-commercial-and-evaluation'
    });

    var setButton = document.getElementById('btnSUM');
    setButton.addEventListener('click', function(event) {  
    		var value="=SUM()";
    		var selected = hot.getSelected();
        var item = selected[0];
        var startRow = Math.min(item[0], item[2]);
        var startCol = Math.min(item[1], item[3]);
        hot.setDataAtCell(startRow, startCol, value);
        hot.getActiveEditor().beginEditing();
        hot.render();
    })