Handsontable example

by handsoncode

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 100%;" data-originalstyle="height: 320px; overflow: hidden; width: 100%;"></div>

CSS

</style>
<script src="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.css">

JavaScript

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.innerHTML = '<img src="https://www.gstatic.com/myactivity/all-activity-header-61904aced9d53b6223bb2824c0d0a015.png" width="100">'
  }
  
var example = document.getElementById('example1');
  var hot1 = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(1000, 1000),
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true,
    cells: function(row, col){
    	var cp = {}
      if(col === 2){
      	cp.renderer = firstRowRenderer
      }
      return cp
    }
  });