Handsontable example

by handsoncode

HTML

<div id="example"></div>
<button class="protect">Protect the sheet</button>
<button class="allow">Allow edition</button>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

CSS

button {
  padding: 5px; width: 150px; background: #FCB515
}

Babel + JSX

const example = document.getElementById('example');
  const hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(1000, 1000),
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true
  });


  document.querySelector('.protect').addEventListener('click', function() {
    hot.updateSettings({
      readOnly: true,
      beforeKeyDown: function(){
      	alert('You cannot modify this cell')
      }
    })
  })

  document.querySelector('.allow').addEventListener('click', function() {
    hot.updateSettings({
      readOnly: false,
      beforeKeyDown: function() {/*noop*/},
    })
  })