Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<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

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

  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]
    ];
  }

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

  settings3 = {
    data: getData(),
    rowHeaders: true,
    colHeaders: true
  };
  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": "---------",
        "testsubmenu1": {
          key: "submenu",
          name: "Color table",
          "submenu": {
            "items": [{
                key: "submenu:1",
                "name": 'Color <b>table</b> white<div class="white-dot"></div>',
                callback: function(key, options) {
                  hot.updateSettings({
                    className: 'white'
                  })
                }
              }, {
                key: "submenu:2",
                "name": 'Color <b>table</b> yellow<div class="yellow-dot"></div>',
                callback: function(key, options) {
                  hot.updateSettings({
                    className: 'yellow'
                  })
                }
              }, {
                key: "submenu:3",
                name: 'Color <b>table</b> blue<div class="blue-dot"></div>',
                callback: function(key, options) {
                  hot.updateSettings({
                    className: 'blue'
     ...