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 consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit',
  }, {
    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: [120, 85],
  colHeaders: true,
    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>` */
          TD.setAttribute('title', value ? value : '');
        	TD.innerHTML = `${value ? value + '  <a class="customLink" onclick="doIt()">Read more</a>' : ''}`;

  },
    }
    ],
});

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