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 {
  padding: 0;
  margin: 0;
  background: #ffffff;
}
th,
td {
  font: 12px sans-serif
}
.name {
  color: #3F51B5;
  font-weight: bold;
}

JavaScript

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

  var data = [{
      name: 'Drosera',
      genus: 'Drosera',
      kingdom: 'Plantae',
      order: 'Caryophyllales',
      family: 'Droseraceae'
    }, {
      name: 'Rose',
      genus: 'Rosa',
      kingdom: 'Plantae',
      order: 'Rosales',
      family: 'Rosaceae'
    }, {
      name: 'Penny bun',
      genus: 'Boletus edulis',
      kingdom: 'Fungi',
      order: 'Boletales',
      family: 'Boletaceae'
    }, {
      name: 'Blank Morel',
      genus: 'Morchella',
      kingdom: 'Fungi',
      order: 'Pezizales',
      family: 'Morchellaceae'
    }, {
      name: 'Ananas ',
      genus: 'Ananas',
      kingdom: 'Plantae',
      order: 'Poales',
      family: '	Bromeliaceae'
    }, {
      name: 'Oil Palm',
       genus: 'Elaeis',
      kingdom: 'Plantae',
      order: 'Arecales',
      family: '	Arecaceae'
    }],
    container,
    hot;

  container = document.getElementById('example');
  hot = new Handsontable(container, {
    data: data,
    colWidths: 147,
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['Name', 'Genus', 'Kingom', 'Order', 'Family'],
    columns: [{
      data: 'name',
      renderer: myRenderer
    }, {
      data: 'genus'
    }, {
      data: 'kingdom'
    }, {
      data: 'order'
    }, {
      data: 'family'
    }]
  });

  function myRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.className = 'name'
  };

});