JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://52.74.198.193/flatlab/assets/handsontable/dist/handsontable.full.min.css">
<link rel="stylesheet" href="http://52.74.198.193/flatlab/assets/Select2_3.5/select2.css">
<script src="http://52.74.198.193/flatlab/js/jquery.js"></script>
<script src="http://52.74.198.193/flatlab/assets/handsontable/dist/handsontable.full.min.js"></script>
<script src="http://52.74.198.193/flatlab/assets/Select2_3.5/select2.js"></script>
<script src="http://52.74.198.193/flatlab/assets/handsontable/plugins/select2-editor.js"></script>
<div class="row">
  <div class="col-lg-12">
    <section class="panel panel-primary">
      <div class="panel-body">
        <div id="example1" style="width:100%; height: 400px; overflow: hidden"></div>
      </div>
    </section>
  </div>
</div>

JavaScript

var hot;
var data = [];

function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {

  if (instance.getCell(row, col)) {
      $(instance.getCell(row,col)).addClass('select2dropdown');
  }

    var selectedId;

    var colOptions = cellProperties.select2Options.data;
    
    if (colOptions != undefined) {
        
        for (var index = 0; index < colOptions.length; index++) {
            if (parseInt(value) === colOptions[index].id) {
                selectedId = colOptions[index].id;
                value = colOptions[index].text;            
            }
        }
    
        Handsontable.TextCell.renderer.apply(this, arguments);
    }
}

var  requiredText = /([^\s])/;


    var source = [{id:'fixed',text:'Fixed'},{id:'variable',text:'Variable'}];
    
    var
      $container = $("#example1"),
      $parent = $container.parent(),
      autosaveNotification;


    hot = new Handsontable($container[0], {
        columnSorting: true,
        stretchH: 'all',
        startRows: 8,
        startCols: 5,
        rowHeaders: true,
        colHeaders: ['Description', 'Cost', 'Remarks'],
        columns: [
            { data: 'description' },
            { 
                data: 'cost',
                editor: 'select2',
                renderer: customDropdownRenderer,
                select2Options: { data: source, dropdownAutoWidth: true }
            },
            { data: 'remarks' },
       ],
       minSpareCols: 0,
       minSpareRows: 1,
       contextMenu: true,
       data: []
    });
    
function getData() {
    return data;
}