Handsontable example

by handsoncode

HTML

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

CSS

body {
  background: #FFF;
  padding: 0;
  margin: 0;
  font-size: 0.8em
}

JavaScript

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

  var
    container = document.getElementById('example1'),
    hot;
  
  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(8, 5),
    colWidths: 139,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    licenseKey: 'non-commercial-and-evaluation',
    mergeCells: [
      {row: 0, col: 0, rowspan: 2, colspan: 2},
    ],
    cells: function(row, col){
    	var cellProperties = {};
      if(row === 0 && col === 0){
      	cellProperties.type = 'dropdown',
        cellProperties.source = ['A1', 'A2', 'B1', 'B2']
      }
      return cellProperties;
    }
  });
  
   

});