JSFiddle - React, Tailwind, and code Playground

HTML

<div id="example_handsontable" class="handsontable"></div>
Selected Id: <span id="selectedId"></span>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.4/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.4/handsontable.full.css">


<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

//12.4 Handson table version

var mydata = [[1],[2],[3],[4],[5]];

var optionsList = [{id: 1, text: 'first'}, {id: 2, text: 'second'},{id: 3, text: 'Third'}, {id: 4, text: 'Forth'},{id: 5, text: 'Fith'}];
$(document).ready(function () {

    
    var columnsList = [{            
                   editor: 'select2',
                   renderer: customDropdownRenderer,
                   width: '200px',
                   select2Options: { 
                        data: optionsList,
                        dropdownAutoWidth: true,                        
                        width: 'resolve'
                    }
                }
            ],

    $container = $('#example_handsontable');
  
    $container.handsontable({
        data: mydata,
    minSpareRows: 0,
    colHeaders: true,
    contextMenu: true,
    columns: columnsList
  });    
});

function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties)
{
    var selectedId;
    for (var index = 0; index < optionsList.length; index++)
    {
        if (parseInt(value) === optionsList[index].id)
        {
            selectedId = optionsList[index].id;
            value = optionsList[index].text;            
        }
    }
    Handsontable.TextCell.renderer.apply(this, arguments);
    // you can use the selectedId for posting to the DB or server
    $('#selectedId').text(selectedId);
}


/// select2 plugin
(function (Handsontable) {
    "use strict";
 
    var Select2Editor = Handsontable.editors.TextEditor.prototype.extend();
 
    Select2Editor.prototype.prepare = function (row, col, prop, td, originalValue, cellProperties) {
 
        Handsontable.editors.TextEditor.prototype.prepare.apply(this, arguments);
 
        this.options = {};
 
        if (this.cellProperties.select2Options) {
            this.options = $.extend(this.options, cellProperties.select2Options);
        }
    };
 
    Select2Editor.prototype.createElements = function () {
        this.$body =...