Handsontable example

by handsoncode

HTML

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

CSS

.new {
  width: 99%;
  height: 100%;
  background: #345ee0;
  box-sizing: border-box;
  text-align: center;
  font: 16px sans-serif;
  color: #fff;
}

JavaScript

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

  var
    data = [{}, {},
      {
        title: createNew()
      }
    ],
    container1,
    hot1;
  
  container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    colWidths: 220,
    colHeaders: true,
    columns: [
      {data: "title", renderer: "html"}
    ]
  });

  
 function createNew(){
 	return "<div class='new'>button</div>"
 };

var button = document.querySelector('.new');
button.addEventListener('click', function(){
	alert('button')
})

});