Handsontable example

HTML

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

<h1>Without Nested Headers</h1>
<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>
<h1>With Nested Headers</h1>


<div>
  <div id="example2" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

body {
  font: 0.8em Helvetica;
}

.handsontable thead TR:nth-child(1) {
  font-size: 1.9em;
  }

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    
    /* columns */
    var columnsOnly = [['A', 'B', 'C']];
    
    /* columns with nested headers*/
    var columnsWithNestedHeaders = [['A', 'B', 'C'],
        [['A', {
            label: 'B',
            colspan: 2
        }, 'C'],
        ['N', 'O', 'P']]];

		/* generic function that builts HT's */
    var getHT = function (inElement, inColumns) {
        return new Handsontable(inElement, {
            data: Handsontable.helper.createSpreadsheetData(3, 3),
            colHeaders: true,
            columns: inColumns[0],
            nestedHeaders: inColumns[1],
        });
    };
	
  	/* build HT's */
    getHT(example1, columnsOnly);
    getHT(example2, columnsWithNestedHeaders);
});