Handsontable example

by aszymanski

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="hot handsontable htColumnHeaders"></div>

CSS

.myBt {
  width: 75px;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  font: 12px sans-serif;
}

.handsontable .truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Babel + JSX

const container1 = document.getElementById('example1');

function getData() {
  return [{
    id: 11,
    name: 'lorem ipsum',
  }, {
    id: 12,
    name: 'dolor sit amet',
  }, {
    id: 13,
    name: 'consectetur adipiscing elit',
  }, {
    id: 14,
    name: 'Nam sit amet',
  }, {
    id: 15,
    name: 'hendrerit eros quis',
  }];
}

const hot1 = new Handsontable(container1, {
  data: getData(),
  colWidths: [90, 85],
  colHeaders: true,
  cells: function(row, col) {
    const cellPrp = {};
    if (col === 1) {
      cellPrp.renderer = myBtns;
      cellPrp.readOnly = true;
    }
    return cellPrp
  },
    columns: [{
      data: 'name',
      wordWrap: false,
      renderer: function(instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.innerHTML = `<div class="truncated">${value}</div>`
  },
    }, {
    }],
});

function myBtns(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.innerHTML = '<button class="myBt bt-' + row + '" onclick="doIt()">Read more</button>'
}

function doIt() {
  hot1.updateSettings({
  	colWidths: [250, 85]
  });
}