JSFiddle - React, Tailwind, and code Playground

by mpusarla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<div id="example" class="handsontable"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <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

var dropdownLists = {};

var dropdownSource_1 = {
    "parentId": null,
        "dropdownItems": [{
        "id": -1,
            "values": [{
            "id": 1,
                "text": "One"
        }, {
            "id": 2,
                "text": "Two"
        }, {
            "id": 3,
                "text": "Three"
        }, {
            "id": 4,
                "text": "Four"
        }]
    }]
};

var dropdownSource_2 = {
    "parentId": "firstDropdown",
        "dropdownItems": [{
        "id": 1,
            "values": [{
            "id": 11,
                "text": "One One"
        }, {
            "id": 12,
                "text": "One Two"
        }]
    }, {
        "id": 2,
            "values": [{
            "id": 21,
                "text": "Two One"
        }, {
            "id": 22,
                "text": "Two Two"
        }]
    }]
};

// Binding data to source mapping for all dropdowns
dropdownLists["firstDropdown"] = dropdownSource_1;
dropdownLists["secondDropdown"] = dropdownSource_2;

$(document).ready(function () {

    function getSource(data) {
        
        var source = [];
        if (dropdownLists[data].parentId === null) {
            source = _.map(dropdownLists[data].dropdownItems[0]["values"], function (obj, key) {
                return obj.text;
            });
        }
        return source;

    }
    
    function getColumn(bindingName) {
       return  _.find(columnsList, function(item) {
            return item.data === bindingName;
        });        
    }
    
    function getDescendant(column) {
        return _.find(dropdownLists, function(item) {
            return item.parentId === column.data;
        });
    }

    var columnsList = [{
        data: "first",
        type: "dropdown",
        title: "First",
        width: "125px",
        data: "firstDropdown",
        source: getSource("firstDropdown")
    }, {
        data: "second",
        type: "dropdown",
        title: "Second",
        width:...