Handsontable example

HTML

<div id="example3" class="hot handsontable htColumnHeaders"></div>

CSS

.changeType {
  border: 1px solid #bbb;
  color: #bbb;
  background: #eee;
  border-radius: 2px;
  padding: 2px;
  font-size: 9px;
  float: right;
  line-height: 9px;
  margin: 3px 3px 0 0;
}
.changeType:hover {
  border: 1px solid #777;
  color: #777;
  cursor: pointer;
}
.changeType.pressed {
  background-color: #999;
}
.changeTypeMenu {
  position: absolute;
  border: 1px solid #ccc;
  margin-top: 18px;
  box-shadow: 0 1px 3px -1px #323232;
  background: white;
  padding: 0;
  font-size: 13px;
  display: none;
  z-index: 10;
}
.changeTypeMenu li {
  text-align: left;
  list-style: none;
  padding: 2px 20px;
  cursor: pointer;
  margin-bottom: 0;
}
.changeTypeMenu li.active:before {
  font-size: 12px;
  content: "\2714";
  margin-left: -15px;
  margin-right: 3px;
}
.changeTypeMenu li:hover {
  background: #eee;
}


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

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

JavaScript

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

    var
        data3 = [
            ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
            ['2012', 0, 2941, 4303, 354, 5814],
            ['2013', 3, 2905, 2867, 412, 5284],
            ['2014', 4, 2517, 4822, 552, 6127],
            ['2015', 2, 2422, 5399, 776, 4151]
        ],
        columns = [
            { type: 'numeric' },
            { type: 'numeric' },
            { type: 'numeric' },
            { type: 'numeric' },
            { type: 'numeric' },
            { type: 'numeric' }
        ],
        container = document.getElementById('example3'),
        hot3;

    hot3 = new Handsontable(container, {
        data: data3,
        colHeaders: true,
        nestedHeaders: [
      ['N', 'O', 'P', 'Q', 'R', 'S'],
      ['N', 'O', 'P', 'Q', 'R', 'S']
    ],
        type: 'numeric',
        columns: columns,

        afterGetColHeader: function(col, TH) {
            debugger;
            var instance = this,
                menu = buildMenu(columns[col].type),
                button = buildButton();

            addButtonMenuEvent(button, menu);

            Handsontable.Dom.addEvent(menu, 'click', function(event) {
                if (event.target.nodeName == 'LI') {
                    setColumnType(col, event.target.data['colType'], instance);
                }
            });
            if (TH.firstChild.lastChild.nodeName === 'BUTTON') {
                TH.firstChild.removeChild(TH.firstChild.lastChild);
            }
            TH.firstChild.appendChild(button);
            TH.style['white-space'] = 'normal';
        },
        cells: function(row, col, prop) {
            var cellProperties;

            if (row === 0) {
                cellProperties = {
                    type: 'text' // force text type for first row
                };

                return cellProperties;
            }
        }
    });

    function addButtonMenuEvent(button, menu) {
       ...