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">
<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 = [
{
    col0: 0,
    col1: 1,
    col2: 'A',
    desc: 'Letter A',
    error: true
  },
  {
    col0: 0,
    col1: 1,
    col2: 'B',
    desc: 'Letter B',
    error: false
  },
  {
    col0: 0,
    col1: 1,
    col2: 'C',
    desc: 'Letter C',
    error: true
  },
  {
    col0: 0,
    col1: 1,
    col2: 'D',
    desc: 'Letter D',
    error: false
  },
]

function myCustomRender(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.title = cellProperties.title
}

var columns = [
{
    title: "Col 0",
    data: 'col0',
    readOnly: true,
  },
  {
    title: "Col 1",
    data: 'col1',
    readOnly: true,
  },
  {
    title: "Col 2",
    data: 'col2',
    readOnly: true,
    renderer: myCustomRender,
  },
]
var container = document.getElementById('example');
var hot = new Handsontable(container, {
  licenseKey: 'non-commercial-and-evaluation',
  data: data,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});


hot.batch(() => {
	for(let i = 0; i < hot.countRows(); i++){
  	hot.setCellMeta(i, 2, 'title', data[i].desc)
  }
  hot.render();
  hot.updateSettings({
    columns
  })
})