Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

body {
  background: white;
  margin: 0;
  padding: 0;
  font-size: 0.9em
}

JavaScript

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

 var myTable = [];
 
 	for(var i = 0; i < 10; i++){
  	myTable[i] = [];
    for(var j = 0; j < 6; j++){
    	if(i % 5 === 0 && j % 2 === 0){
      	myTable[i][j] = 'readOnly'
      } else {
      	myTable[i][j] = 'editable'
      }
    }
  };
  
  var
    container = document.getElementById('example1'),
    hot;
  
  hot = new Handsontable(container, {
    data: myTable,
    colHeaders: true,
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: 123
  });
  
  hot.updateSettings({
  	 cells: function(row, col, prop){
    	var cellProperties = {};
      	if(hot.getDataAtCell(row, col) === 'readOnly'){
        	cellProperties.readOnly = 'true'
        }
      return cellProperties
    }
  })

});