Handsontable example

by aszymanski

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 

<div id="example1"></div>

JavaScript

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

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

  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    rowHeaders: true,
    colHeaders: true,
    renderer: 'html',
    colWidths: 100,
    columns: [{
        renderer: myRenderer
      },
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      },
    ]
  });

  function myRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.innerHTML = '<input type="text" size="11">'
  }


});