JSFiddle - React, Tailwind, and code Playground

HTML

<div id="example1" class="handsontable"></div>

CSS

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

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://corecms:8081/include/js/select2.js"></script>
<link href="http://corecms:8081/include/css/select2.css" rel="stylesheet" />

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<script src="http://corecms:8081/include/js/select2-editor.js"></script>

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

JavaScript

$(document).ready(function () {
    var data1=[{name:"Name 1", text: 'jsmith'},{name:"Name 2",text:'wjones'}];
  
  var container = document.getElementById('example1'),
    hot;
  var optionsList = [{id: 1, text: 'dropdown-1'}, {id: 2, text: 'dropdown-2'},{id: 3, text: 'dropdown-3'},{id: 4, text: 'dropdown-4'}];
  hot = new Handsontable(container, {    
      data: data1,
    startRows: 7,
    startCols: 2,
    colHeaders: ['Name', 'Title'],
    columns: [
        { data: "name", width: 100},      
      {
          editor: 'select2',
          width: 200,
          select2Options: { 
                        data: optionsList,
                          placeholder: {id:-1, text:'Select a Title'},
                        dropdownAutoWidth: true,
                          allowclear:true,
                        width: 'resolve'
                    }
                }
    ]
  });
  

});