JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/master/docs/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" class="table table-stripe"></table>'

JavaScript

$('#example').dataTable({
    "aaData": [
        /* Reduced data set */
        ["Trident", "Internet Explorer 4.0", "Win 95+", 4, "X"],
        ["Trident", "Internet Explorer 5.0", "Win 95+", 5, "C"],
        ["Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A"],
        ["Trident", "Internet Explorer 6.0", "Win 98+", 6, "A"],
        ["Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],
        ["Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],
        ["Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],
        ["Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A"],
        ["Webkit", "Safari 1.2", "OSX.3", 125.5, "A"],
        ["Webkit", "Safari 1.3", "OSX.3", 312.8, "A"],
        ["Webkit", "Safari 2.0", "OSX.4+", 419.3, "A"],
        ["Webkit", "Safari 3.0", "OSX.4+", 522.1, "A"]
        ],
    "aoColumns": [
        {
        "sTitle": "Engine"},
    {
        "sTitle": "Browser"},
    {
        "sTitle": "Platform"},
    {
        "sTitle": "Version",
        "sClass": "center"},
    {
        "sTitle": "Grade",
        "sClass": "center",
        "fnRender": function(obj) {
            var btn = "<div class=\"btn-group\">" + "<button class=\"btn\"><i class= \"icon-search\"></i></button>" + "<button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\">" + "<span class=\"caret\"></span></button>" + " <ul class=\"dropdown-menu\">" + "</ul></div>";
            //obj.aData[ obj.iDataColumn ]
            var sReturn = "<button>" + btn + "</button>";
            return sReturn;
        }}
    ]
});