JSFiddle - React, Tailwind, and code Playground

by janzitniak

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
    
<div id="example"></div>
<button id="btnBkgColor">Add background color</button>
<button id="btnBorder">Add border</button>

CSS

.handsontable .border {
  border: 1px solid black;
}
.handsontable .colorbkg {
  background-color: lightblue;
}

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('btnBkgColor');
    setButton.addEventListener('click', function(event) {  
    		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.setCellMeta(startRow, startCol, 'className', 'colorbkg');
        hot.render();
    })
        var setButton = document.getElementById('btnBorder');
    setButton.addEventListener('click', function(event) {  
    		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.setCellMeta(startRow, startCol, 'className', 'border');
        hot.render();
    })