Handsontable example

by Camille Bechayda

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.17.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/1.17.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<div id="example1"></div>

CSS

/* last column*/
.handsontable .remove-col {
  background: #efefef
}

/* button appearance*/
.handsontable .remove {
  width: 20px;
  height: 20px;
  color: #fff;
  border: 1px solid #fff;
  background: #777;
  border-radius: 50%;
  box-sizing: border-box;
}

JavaScript

var
  example = document.getElementById('example1'),
  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    rowHeaders: true,
    colHeaders: true,
    rowHeights: 27
  });


//adding a new column to hold 'remove' buttons
hot.alter('insert_col', hot.countCols());

//optional: changing style for the column
hot.updateSettings({
	cells: function(row, col){
  	var cellPrp = {};
    
    if(col === hot.countCols()-1){
    	cellPrp.className = 'remove-col';
      cellPrp.readOnly = true;
      cellPrp.renderer = 'html'
    }
    return cellPrp
  }
})

//adding delete buttons
var btn = '<button class="remove btn btn-primary ">x</button>'
function addRemoveButtons(){
	for(var i = 0; i < hot.countRows(); i++){
  hot.setDataAtCell(i, hot.countCols()-1, btn)
  }
}
addRemoveButtons()

//adding logic for removing rows
var btns = document.querySelectorAll('.remove');
example.addEventListener('click', function(e){
  if(e.taget !== example){
  	hot.alter('remove_row', hot.getSelectedLast()[0])
  }
})