Handsontable example

by handsoncode

HTML

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

Babel + JSX

function toolRenderer(instance, td, row, col, prop, value, cellProperties) {
	const modifiedValue = '<button>Hide row</button>';

  Handsontable.renderers.HtmlRenderer.apply(this, [
  	instance,
    td,
    row,
    col,
    prop,
    modifiedValue,
    cellProperties
  ]);
}

const example1 = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(12,5),
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: true,
  rowHeaders: true,
  dropdownMenu: true,
  filters: true,
  columnSorting: true,
  contextMenu: true,
  rowHeights: 30,
  hiddenRows: {
    rows: [],
    indicators: true
  },
  columns: [
    { renderer: toolRenderer },
    {},
    {},
    {},
    {},
  ],
  afterOnCellMouseDown(event, coords) {
  	if (coords.col !== 0) {
    	return;
    }
    if (event.target.nodeName.toLowerCase() !== 'button') {
    	return;
    }
    
    this.getPlugin('hiddenRows').hideRow(coords.row);
    this.render();
  }
});