JSFiddle - React, Tailwind, and code Playground

by Alexandre Yembo

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.16.0/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.16.0/handsontable.full.css">

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

JavaScript

//12.4 Handson table version

var mydata = [{ num: 1, num2: 2, num3: 3 }
             ,{ num: 1, num2: 2, num3: 3 }
             ,{ num: 1, num2: 2, num3: 3 }
             ,{ num: 1, num2: 2, num3: 3 }
             ,{ num: 1, num2: 2, num3: 3 }
             ,{ num: 1, num2: 2, num3: 3 }];

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: { 
                dropdownAutoWidth: true,                        
                width: 'resolve',
                ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term, // search term
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter the remote JSON data
			var res = [];
            for (i = 0; i < data.items.length; i++) {
                res.push({id: data.items[i].id,
                         name: data.items[i].name})
            }
            return { results: res };
        },
        cache: true
    }
            }
        },{      
            data: 'num2',
            editor: 'select2',
            renderer: customDropdownRenderer,
            width: '200px',
            select2Options: { 
                data: optionsList,
                dropdownAutoWidth: true,                        
                width: 'resolve'
            }
        },{      
            data: 'num3',
            editor: 'select2',
        ...