JSFiddle - React, Tailwind, and code Playground

by mpusarla

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="https://code.jquery.com/jquery-2.0.3.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/select2/3.5.2/select2.js"></script>


<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

$(document).ready(function () {

    var optionsList = [{id: 1, text: 'jsmith'}, {id: 2, text: 'wjones'}];
    var columnsList = [{            
                    editor: 'select2',
                  width: '200px',
                    select2Options: { 
                        data: optionsList,
                        dropdownAutoWidth: true,
                        allowClear: true,
                        width: 'resolve'
                    }
                }
            ],

    container = document.getElementById('example'),
    hot;
  
  hot = new Handsontable(container, {    
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true,
    columns: columnsList
  });    

});

//select2-editor with patches from https://github.com/motin/Handsontable-select2-editor/blob/handsontable-0.12-support/select2-editor.js

/// 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 = $(document.body);

        this.TEXTAREA = document.createElement('input');
        this.TEXTAREA.setAttribute('type', 'text');
        this.$textarea = $(this.TEXTAREA);

        Handsontable.Dom.addClass(this.TEXTAREA, 'handsontableInput');

        this.textareaStyle = this.TEXTAREA.style;
        this.textareaStyle.width = 0;
        this.textareaStyle.height = 0;

        this.TEXTAREA_PARENT = document.createElement('DIV');
        Handsontable.Dom.addClass(this.TEXTAREA_PARENT, 'handsontableInputHolder');

        this.textareaParentStyle =...