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,
    licenseKey: 'non-commercial-and-evaluation',
    rowHeaders: true,
    colHeaders: true
  });

  hot.updateSettings({
    contextMenu: {
      items: {
        "make_text": {
          name: 'Text',
          callback: function(key, options) {
            var x = hot.getSelected()[0],
              y = hot.getSelected()[1];
            hot.setCellMetaObject(x, y, {
              renderer: 'text',
              editor: 'text'
            });
            hot.validateCells();
          },
        },
        "make_password": {
          name: 'Password',
          callback: function(key, options) {
            var x = hot.getSelected()[0],
              y = hot.getSelected()[1];
            hot.setCellMetaObject(x, y, {
              renderer: 'password',
              editor: 'password'
            });
            hot.validateCells();
          },
        },
      }
    }
  })

  window.hot = hot;

});