Handsontable example

by Camille Bechayda

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.13.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/1.13.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 584px;" data-originalstyle="height: 320px; overflow: hidden; width: 584px;"></div>

CSS

.handsontable .btClass {
  background: #fff;
  text-align: center;
}

.delBt {
  border: 2px solid green;
  border-radius: 3px;
  padding: 0.3em;
  background: #fff;
}

JavaScript

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

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

  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(10, 5),
    colWidths: 80,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: ['row_above', 'row_below', 'remove_row']
  });

  //here I am adding a single column for buttons
  hot.alter('insert_col', hot.countCols());
  // here I am adding an HTML renderer to be able to show buttons
  hot.updateSettings({
    cells: function(row, col) {
      var cellProp = {};
      if (col === (hot.countCols() - 1)) {
        cellProp.renderer = myRenderer;
        cellProp.className = 'btClass';
        cellProp.readOnly = true;
      }
      return cellProp
    }
  })

  //here I am settings a custom renderer that shows a button
  function myRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.HtmlRenderer.apply(this, arguments);
    td.innerHTML = '<button class="delBt">Delete</button>'
  }

  example.addEventListener('click', function(e) {
    var targetRow = hot.getSelected()[0];
    if (e.target.className === 'delBt') {
      var conf = confirm('Do you want to delete this row?');
      if (conf) {
        hot.alter('remove_row', targetRow)
      }

    }
  });



});