Handsontable example

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="example3" class="hot handsontable htRowHeaders htColumnHeaders"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/0.16.1/scripts/jquery.min.js"></script>
<script src="http://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.min.css">

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: {
      callback: function (key, options) {
        if (key === 'bold') {
          var sel = this.getSelected(), row = sel[0] + 1, col = sel[1];
$('table tr:eq(' + row + ') td:eq(' + col + ')').css('font-weight', 'bold');
        }
      },
      items: {
        "row_above": {
          disabled: function () {
            // if first row, disable this option
            return hot3.getSelected()[0] === 0;
          }
        },
        "row_below": {},
        "hsep1": "---------",
        "remove_row": {
          name: 'Remove this row, ok?',
          disabled: function () {
            // if first row, disable this option
            return hot3.getSelected()[0] === 0
          }
        },
        "hsep2": "---------",
        "bold": {name: 'Bold'}
      }
    }
  })
  
  function bindDumpButton() {
      if (typeof Handsontable === "undefined") {
        return;
      }
  
      Handsontable.Dom.addEvent(document.body, 'click', function (e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();

});