Handsontable example

by handsoncode

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.css">
<div id="example3" class="hot handsontable htRowHeaders htColumnHeaders"></div>

CSS

body {
  font: 0.8em 'Helvetica';
  color: #555;
}

.btyellow,
.btblue,
.btpink,
.btwhite,
.btgreen {
  padding: 10px;
  width: 150px;
  border: 2px solid #ccc;
  margin-bottom: 2px;
  background: #fff;
  border-radius: 2px;
}

.handsontable .white {
  background: #fff;
}

.handsontable .yellow {
  background: #f7ecb7;
}

.handsontable .blue {
  background: #b7ebf4;
}

.handsontable .pink {
  background: #fcc9e9;
}

.handsontable .green {
  background: #ccf7a0;
}

.yellow-dot,
.blue-dot,
.pink-dot,
.white-dot,
.green-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  float: right;
  border: 1px solid #aaa;
}

.white-dot {
  background: #fff;
}

.yellow-dot {
  background: #f7ecb7;
}

.blue-dot {
  background: #b7ebf4;
}

.pink-dot {
  background: #fcc9e9;
}

.green-dot {
  background: #ccf7a0;
}

JavaScript

function getData() {
    return [
      ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
      ['2012', 10, 11, 12, 13, 15, 16],
      ['2013', 10, 11, 12, 13, 15, 16],
      ['2014', 10, 11, 12, 13, 15, 16],
      ['2015', 10, 11, 12, 13, 15, 16],
      ['2016', 10, 11, 12, 13, 15, 16]
    ];
  }

  let
    example3 = document.getElementById('example3'),
    settings3,
    hot;

  settings3 = {
    data: getData(),
    rowHeaders: true,
    colHeaders: true,
    licenseKey: 'non-commercial-and-evaluation',
    afterSetCellMeta: function(row, col, key, value){
    	console.log(row, col, key, value)
    },
    beforeUndoStackChange: function(doneActions){
    	console.log(doneActions)
    }
  };
  hot = new Handsontable(example3, settings3);

  hot.updateSettings({
    contextMenu: {
      callback: function(key, options) {
        if (key === 'about') {
          setTimeout(function() {
            alert("This is a context menu with default and custom options mixed");
          }, 100);
        }
      },
      items: {
        "about": {
          name: 'About this menu'
        },
        "row_above": {},
        "row_below": {},
        "hsep2": "---------",
        "testsubmenu2": {
          key: "submenu2",
          name: "Color column",
          "submenu": {
            "items": [{
                key: "submenu2:1",
                name: 'Color <b>column</b> white <div class="white-dot"></div>',
                callback: function(key, options) {
                  for (var i = 0; i < hot.countRows(); i++) {
                    hot.setCellMeta(i, hot.getSelectedLast()[1], 'className', 'white');
                    hot.render();
                  }
                }
              }, {
                key: "submenu2:2",
                name: 'Color <b>column</b> yellow <div class="yellow-dot"></div>',
                callback: function(key, options) {
                  for (var i = 0; i < hot.countRows(); i++) {
                   ...