Handsontable example

by handsoncode

HTML

<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="hot1 hot handsontable"></div>

CSS

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

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

.handsontable td.red,
.handsontable td.green {
  text-align: center
}

.handsontable td.red {
  background: #F44336
}

.handsontable td.green {
  background: #8BC34A
}

JavaScript

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

  var data = [{
      name: 'Chocolate cake',
      check: true,
      pieces: '1',
      number: 4
    }, {
      name: 'Stawberry muffin',
      check: true,
      pieces: '4',
      number: 0.99
    }, {
      name: 'Capcake',
      check: false,
      pieces: '6',
      number: 0.6
    }, {
      name: 'Ginger bread',
      check: true,
      pieces: '10',
      number: 2
    }, {
      name: 'Vanilla muffin',
      check: false,
      pieces: '4',
      number: 0.99
    }, {
      name: 'Cherry cream',
      check: true,
      pieces: '1',
      number: 1.5
    }],
    container,
    hot;

  container = document.getElementById('example');
  hot = new Handsontable(container, {
    data: data,
    colWidths: [300, 140, 150, 150],
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['Name of Product', 'On Stock', 'Pieces in a Package', 'Price'],
    columns: [{
      data: 'name'
    }, {
      data: 'check',
      type: 'checkbox',
      renderer: checkRenderer,
      className: 'htCenter'
    }, {
      type: 'text',
      data: 'pieces',
      className: 'htCenter'
    }, {
      data: 'number',
      type: 'numeric',
      format: '$0.00'
    }]
  });

  function checkRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
    if (value) {
      td.className = 'green';
    } else {
      td.className = 'red'
    }
  }

});