Handsontable example

by handsoncode

HTML

<script src="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div id="example1"></div>

Babel + JSX

function getCarData() {
  return [{
    car: "Mercedes A 160",
    year: 2017,
    price_usd: 7000,
    code: 'XE67'
  }];
}

const container = document.getElementById('example1');
const hot = new Handsontable(container, {
  data: getCarData(),
  colHeaders: true
});

hot.addHook('afterChange', function(changes, src) {
  [
    [row, col, oldVal, newVal]
  ] = changes;
  if (hot.propToCol(col) === 3 && newVal.slice(0, 1) !== 'Y') {
    console.log(newVal);
    hot.setDataAtCell(row, hot.propToCol(col), 'Y' + newVal.slice(1, newVal.length))
  }
})