JSFiddle - React, Tailwind, and code Playground

by janzitniak

HTML

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

    <div id="example"></div>

CSS

.handsontable .border {
  border: 1px solid black;
}

.handsontable .colorbkg {
  background-color: lightblue;
}

JavaScript

var data = [
  ['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
  ['2017', 10, 11, 12, "=SUM(B2:D2)"],
  ['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'
});

hot.setCellMetaObject(1, 1, { type: 'numeric',
      numericFormat: {
        pattern: '0,0.00 $',
        culture: 'de-DE' // use this for EUR (German),
      }});
hot.render();