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="example" class="hot head-gap handsontable htRowHeaders htColumnHeaders"></div>

CSS

body {
  background: white;
  margin: 0;
  padding: 0;
}
.htBold {
  font-weight: bold;
}

JavaScript

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

  var
    example = document.getElementById('example'),
    hot;

  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(10, 6),
    colWidths: 108,
    width: 620,
    colHeaders: true,
    licenseKey: 'non-commercial-and-evaluation',
    contextMenu: {
      items: {
        "make_bold": {
          name: 'Make it bold',
          callback: function(key, options) {
            var selection = this.getSelectedRange();
            var fromRow = Math.min(selection.from.row, selection.to.row);
            var toRow = Math.max(selection.from.row, selection.to.row);
            var fromCol = Math.min(selection.from.col, selection.to.col);
            var toCol = Math.max(selection.from.col, selection.to.col);
            
            for (var row = fromRow; row <= toRow; row++) {
              for (var col = fromCol; col <= toCol; col++) {
              	var cellMeta = this.getCellMeta(row, col);
                
                if (!cellMeta.className || (cellMeta.className && cellMeta.className.indexOf('htBold') < 0)) {
                	this.setCellMeta(row, col, 'className', 'htBold');
                }
              }
            }
            
            this.render();
          }
        }
      }
    }
  });

});