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">

CSS

.handsontable .searchRow {
  background: RGBA(39, 194, 255, 0.1);
}

Babel + JSX

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(80, 4),
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: 100,
  fixedRowsTop: 1,
  rowHeaders: true,
  colHeaders: true,
  hiddenRows: true,
  search: true,
  cells: function(row, col) {
    let cp = {}
    if (row === 0) {
      cp.className = 'searchRow'
    } else {
      cp.className = ''
    }
    return cp
  },
  afterChange(changes, src) {
  	if (src === 'loadData') {
    	return;
    }

    const [row, column, _, newValue] = changes[0];
    const rowsToHide = [];
	
    if (row === 0) {
      for (let i = 1; i < this.countRows(); i++) {
        if (!this.getDataAtCell(i, column).includes(newValue)) {
          rowsToHide.push(i);
        }
      }
    }
    
    const plugin = this.getPlugin('hiddenRows');
    const hiddenRows = plugin.getHiddenRows();

		plugin.showRows(hiddenRows);

    //hide rows
    if (rowsToHide.length > 0) {
      plugin.hideRows(rowsToHide);
    }
    
    this.render();
  }
});

hot.alter('insert_row', 0);