Handsontable example

by Gabriel Vazquez

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> 

<link rel="stylesheet" href="https://handsontable.com/dist/handsontable.full.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://handsontable.com/bower_components/handsontable/plugins/bootstrap/handsontable.bootstrap.css">

<script src="https://docs.handsontable.com/scripts/jquery.min.js"></script> 
<script type="text/javascript" src="https://docs.handsontable.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

<script src="https://handsontable.com/dist/handsontable.full.js"></script>

JavaScript

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

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2011, price_usd: 7000, price_eur: 7000},
      {car: "Citroen C4 Coupe", year: 2012, price_usd: 8330, price_eur: 8330}
    ];
  }
  
  var
    container = document.getElementById('example1'),
    hot;
  
  hot = new Handsontable(container, {
    data: getCarData(),
    manualColumnMove: true,
    colHeaders: function(col) {
    	if(col === 1) {
      	return '<button class="btn">This is an action</button>'
      } else {
      	return 'title'
      }
    },
    columnSorting : true
  });
  hot.addHook('afterRender', function() {
  	console.log('render');
  });

  
  Handsontable.Dom.addEvent(container, 'mousedown', function (event) {
    if (event.target.nodeName == 'BUTTON' && event.target.className == 'btn')    		 {
      event.stopPropagation();
    }
  });
  


});