JSFiddle - React, Tailwind, and code Playground

by friek2k

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<table border="0" class="display" id="example"></table>

JavaScript

/*
        Creates the grid after page is ready
    */
    $(document).ready(function () {
        $oTable = $('#example').dataTable({
            "bJQueryUI": false,
                "bProcessing": true,
                "bPaginate": true,
                "bFilter": true,
                "bInfo": true,
                "aaData": [
                ["1", "2", "3"],
                ["4", "5", "6"],
                ["7", "8", "9"]
            ],
                "aoColumns": [{
                "bSortable": true,
                "bVisible": true,
                "bSearchable": true,
                "sTitle": "testcol",
                "sType": "string",
                "sWidth": null,
                "sClass": "center",
                "asSorting": "asc"
            }, {
                "bSortable": true,
                "bVisible": true,
                "bSearchable": true,
                "sTitle": "testcol2",
                "sType": "string",
                "sWidth": null,
                "sClass": "center",
                "asSorting": "asc"
            }, {
                "bSortable": true,
                "bVisible": true,
                "bSearchable": true,
                "sTitle": "testcol3",
                "sType": "string",
                "sWidth": null,
                "sClass": "center",
                "asSorting": "asc"
            }]
        });
    });



/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';
     
    return sOut;
}
 
$(document).ready(function() {
    /*
     * Insert a 'details'...