JSFiddle - React, Tailwind, and code Playground

by homer2

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
<table class="dataTable" id="example">
</table>

JavaScript

var data = new Array();

data.push([ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ]);
data.push([ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ]);
data.push([ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ]);
data.push([ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ]);
data.push([ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ]);
data.push([ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ]);
data.push([ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ]);
data.push([ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ]);
data.push([ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ]);
data.push([ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ]);
data.push([ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ]);
data.push([ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]);

$('#example').dataTable( {
    "aaData": data,
    "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version", "sClass": "center" },
        {
            "sTitle": "Grade",
            "sClass": "center",
            "fnRender": function(obj) {
                var sReturn = obj.aData[ obj.iDataColumn ];
                if ( sReturn == "A" ) {
                    sReturn = "<b>A</b>";
                }
                return sReturn;
            }
        }
    ]
} );