Handsontable example

by handsoncode

HTML

<script src="https://docs.handsontable.com/pro/bower_components/numbro/dist/languages.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example" class="hot handsontable htColumnHeaders"></div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #ffffff
}

th,
td {
  font: 12px sans-serif;
}

.handsontable th {
  background: #E91E63;
  color: #ffffff
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  function myData() {
    return [
      [0.590, 0.590, 0.590],
      [100.590, 100.590, 100.590],
      [1000000.590, 1000000.590, 1000000.590]
    ];
  }

  var
    example = document.getElementById('example'),
    hot;

  hot = new Handsontable(example, {
    data: myData(),
    colWidths: 247,
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['France', 'United States of America', 'Spain'],
    type: 'numeric',
    cells: function(row, col) {
      var cellProp = {};
      if (col === 0) {
        cellProp.format = '0[.]00',
          cellProp.language = 'fr-CH'
      }
      if (col === 1) {
        cellProp.format = ',0.00',
          cellProp.language = 'en-US'
      }
      if (col === 2) {
        cellProp.format = ',0.00',
          cellProp.language = 'es-ES'
      }

      return cellProp;
    }
  });




});