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({
            "fnDrawCallback": function (oSettings) {
            if (oSettings.aiDisplay.length === 0) {
                return;
            }

            var nTrs = $('#example tbody tr');
            var iColspan = nTrs[0].getElementsByTagName('td').length;
            var sLastGroup = "";
            for (var i = 0; i < nTrs.length; i++) {
                var iDisplayIndex = oSettings._iDisplayStart + i;
                var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[0];
                if (sGroup != sLastGroup) {
                    var nGroup = document.createElement('tr');
                    var nCell = document.createElement('td');
                    nCell.colSpan = iColspan;
                    nCell.className = "group";
                    nCell.innerHTML = sGroup;
                    nGroup.appendChild(nCell);
                    nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
                    sLastGroup = sGroup;
                }
            }
        },
            "bJQueryUI": false,
                "bProcessing": true,
                "bPaginate": true,
                "bFilter": true,
                "bInfo": true,
                "aaData": [
                ["1", "2", "3"],
                ["4", "5", "6"],
                ["7", "8", "9"],
                ["1", "8", "9"]
            ],
                "aoColumns": [{
                "bSortable": true,
                    "bVisible": true,
                    "bSearchable": true,
                    "sTitle": "testcol",
                    "sType": "string",
                    "sWidth": null,
                    "sClass": "center",
                    "asSorting": ["asc", "desc"]
            }, {
                "bSortable": true,
                    "bVisible": true,
                    "bSearchable": true,
                   ...