JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/handsontable/handsontable/master/dist/handsontable.full.css">
<script src="https://rawgit.com/moment/moment/develop/moment.js"></script>
<script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css">
<script src="https://rawgit.com/handsontable/handsontable/master/dist/handsontable.full.js"></script>
<div id="wrap">
    <div id="edit"></div>
</div>

JavaScript

var LoggingEditor = Handsontable.editors.TextEditor.prototype.extend();

LoggingEditor.prototype.getValue = function () {
    console.log('User finished editing the cell, the value will be set to: ' + this.TEXTAREA.value);
    return this.TEXTAREA.value;
};

LoggingEditor.prototype.setValue = function (newValue) {
    console.log('User started editing the cell, value shown to them in cell is: ' + newValue);
    this.TEXTAREA.value = newValue;
};

var options = {
    autoWrapRow: true,
    minSpareRows: false,
    columnSorting: true,
    fillHandle: false,
    stretchH: 'all',
    editor: LoggingEditor,

    currentRowClassName: 'currentRow',
    colHeaders: ["Type", "Transport Id", "Line"],
    columns: [{
        data: 1,
        strict: true,
    }, {
        data: 2,
        strict: true,
    }, {
    data: 3,
    type: 'autocomplete',
    source: function (query, process) {
        var response = ["1","2","3"];
        process(response);
    },
    strict: false,
    allowInvalid: true,
    editor: LoggingEditor
}]
};

$("#edit").handsontable(options);