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

CSS

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

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

.handsontable th {
  background: #03A9F4;
}

.handsontable td.above-fifty {
  color: #33691E;
  background: #DCEDC8;
}

.handsontable td.below-fifty {
  color: #777777;
  background: #fefefe;
}

JavaScript

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

  function myData() {
    return [
      ['Amy', 56, 'Winners', 'New York', 55],
      ['James', 80, 'Black Window', 'Texas', 49],
      ['Tom', 79, 'Got the Challenge', 'Huston', 65],
      ['Lucia', 101, 'Black Widow', 'Texas', 47],
      ['Adam', 67, 'Come Back', 'Miami', 53],
      ['Anthony', 78, 'Need for Score', 'Anchorage', 56]
    ];
  }

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

  hot = new Handsontable(example, {
    data: myData(),
    colWidths: [170, 100, 200, 165, 100],
    colHeaders: ['Name', 'Points', 'Team Name', 'City', 'Age'],
    licenseKey: 'non-commercial-and-evaluation',
    columns: [{}, {
      type: 'autocomplete',
      source: availablePoints(),
      strict: true
    }, {
      type: 'numeric'
    }, {}, {
      type: 'autocomplete',
      source: ageOfCompetitor(),
      strict: true
    }]
  });

  function availablePoints() {
    var tab = [];
    for (var i = 30; i < 111; i++) {
      tab.push(i);
    }
    return tab;
  }

  function ageOfCompetitor() {
    var tab = [];
    for (var i = 40; i < 130; i++) {
      tab.push(i);
    }
    return tab;
  }

  hot.updateSettings({
    cells: function(row, col) {
      var cellProp = {};
      if (col === 4 && hot.getDataAtCell(row, col) > 49) {
        cellProp.className = ' above-fifty'
      } else if (col === 4) {
        cellProp.className = ' below-fifty'
      }
      return cellProp;
    }
  })
});