Handsontable example

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.4.1/bower_components/handsontable-pro/dist/handsontable.full.min.css"> <script src="https://docs.handsontable.com/pro/1.4.1/bower_components/numeraljs/languages/de.js"></script>

JavaScript

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

  function getCarData() {
    return [
      ['James', ''],
      ['Jenny', ''],
      ['Mitch', ''],
      ['John', ''],
    ]
  }

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: getCarData(),
    columnSorting: true,
    minSpareRows: 2,
    colHeaders: ['Name', 'Age']
  });

hot.updateSettings({
	cells: function(row, col, prop) {
      var cellProperties = {};

      if (row === hot.countRows() - 1 || row === hot.countRows() - 2) {
        cellProperties.readOnly = true;
      }

      return cellProperties;
    }
})

});