Handsontable Basic Example (100x10)

HTML

<script src="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.css">
<h2>Handsontable Example (afterCreateRow)</h2>
<div id="example"></div>

CSS

body {   
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

JavaScript

var data = function () {
  return Handsontable.helper.createSpreadsheetData(15, 10);
};
var init = false;	// callback fires while initializing table 
var container = document.getElementById('example');
function render () {hot.render();}
var hot = new Handsontable(container, {
  data: data(),
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  afterInit: function() {
  	init = true;
  },
  afterCreateRow: function (index) {
  	if(init) {
      this.setDataAtCell(index, 0, "Test");
      setTimeout(() => {this.setCellMeta(index, 0, "bold", true); this.render();}, 1000);
    }
  },
  afterRenderer: function (td, row, col) {
  	if(this.getCellMeta(row,col).bold) {
    	td.style.fontWeight = "bold";
    }
  }
});