Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>

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
    example1 = document.getElementById('example1'),
    settings1,
    hot1;
  
  settings1 = {
    data: getData(),
    rowHeaders: true,
		filters: true,
		dropdownMenu: true,
    colHeaders: true,
    contextMenu: true
  };
  hot1 = new Handsontable(example1, settings1);
  
  Handsontable.hooks.add('modifyColWidth', function(width) {
  	if (this === hot1.getPlugin('dropdownMenu').menu.hotMenu) {
	  	return 300;
    }
    
    return width;
  })

});