Handsontable example

HTML

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

CSS

.arrow-up-green {
  right: 0;
  width: 0;
  height: 0;
  float: right;
  position: relative;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #090
}

JavaScript

var data = [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
    ['2017', -5, '', 12, 13],
    ['2018', '', -11, 14, 13],
    ['2019', '', 15, -12, 'readOnly']
  ];
  var container = document.getElementById('example1');

  function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.innerHTML = `${td.innerHTML} <div class="arrow-up-green"></div>`
  }

  var hot = new Handsontable(container, {
    data: data,
    colWidths: 100,
    colHeaders: true,
    cells: function(row, col) {
      var cellProperties = {};
      var data = this.instance.getData();

      if (col === 0) {
        cellProperties.renderer = firstRowRenderer;
      }

      return cellProperties;
    }
  });