Handsontable example

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

.handsontable .red {
  background: RGBA(200, 0, 0, 0.5);
}

.handsontable .orange {
  background: RGBA(200, 100, 0, 0.5);
}

.handsontable .yellow {
  background: RGBA(200, 200, 0, 0.5);
}

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,
    hot3;

  settings3 = {
    data: getData(),
    rowHeaders: true,
    colHeaders: true
  };
  hot3 = new Handsontable(example3, settings3);

  hot3.updateSettings({
    contextMenu: {
      items: {
        "menu-color-header": {
          key: "header-color",
          name: "Pick a header color <input type='color'>",
          callback: function(key, options) {
            var chosenColumnIndex = options.start.col;
            console.log('chosenColumnIndex is ' + chosenColumnIndex);
          }
        }
      }
    }
  })


});