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 class="intext-btn" id="getButton">Get value of selected cell</button>
    <button class="intext-btn" id="setButton">Set value of selected cell</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 getButton = document.getElementById('getButton');
    getButton.addEventListener('click', function(event) {
        var selected = hot.getSelected();
        //alert("Get selected >" + selected[0]);
        console.log(hot);
        var data = [];

        for (var i = 0; i < selected.length; i += 1) {
            var item = selected[i];
            data.push(hot.getData.apply(hot, item));
        }

        var value = JSON.stringify(data);
        alert("Get value of selected cell is > " + value);
    })

    var setButton = document.getElementById('setButton');
    setButton.addEventListener('click', function(event) {        
        hot.getActiveEditor().beginEditing();
        hot.render();
    })