Handsontable example

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.12.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/1.12.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<div id="example1"></div>

JavaScript

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

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

  hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(50000, 35),
    width: 584,
    height: 320,
    rowHeaders: true,
    colHeaders: true,
    renderer: firstRowRenderer
  });

  function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (col === 0) {
      td.style.fontWeight = 'bold';
      td.style.color = 'white';
      td.style.background = '#D81B60';
      td.innerHTML = "â–‘ " + td.innerHTML
    }
  }

});