Handsontable example

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

.handsontable .box {
  width: 100px;
  overflow: hidden
}

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

JavaScript

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.innerHTML = '<div class="box">' + value + '</box>';
  }

  var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(20, 20),
    rowHeaders: true,
    colHeaders: true,
    cells: function(row, col) {
      var cp = {}
      if(col === 1){
      	cp.renderer = firstRowRenderer
      }
      return cp
    }
  });

var a = "A very long text here that does not fit into 100px"
hot.setDataAtCell(0,0, a);
hot.setDataAtCell(2,1, a);