JSFiddle - React, Tailwind, and code Playground

by User888

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<div id="table_container">
    <table id="products">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>duration</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

CSS

tr.row_selected td{background-color:red !important;}

JavaScript

jQuery.fn.dataTableExt.oSort["duration-desc"] = function (x, y) {
        function getMins(str){
            var arr = str.split(':');
            return 60 * parseInt(arr[1], 10)+ parseInt(arr[0], 10);
        };
        return getMins(x) - getMins(y);
    };
    
    function val (str) {
    	if (str == "High") { return 0;}if (str == "Medium") { return 1;}if (str == "Low") { return 2;}
    }
    
    jQuery.fn.dataTableExt.oSort["duration-asc"] = function (x, y) {
        return jQuery.fn.dataTableExt.oSort["duration-desc"](y, x);
    }
    
   jQuery.fn.dataTableExt.oSort["name-desc"] = function (x, y) {   	 		
        console.log("x = " + x + ", y = " + y + ", res = " + x.localeCompare(y));
        var x1 = val(x); var y1 = val(y);        
        console.log("x1 = " + x1 + ", y1 = " + y1 + ", res1 = " + (x1-y1));
        return x1 - y1;
   			//return x.localeCompare(y);
    };

	jQuery.fn.dataTableExt.oSort["name-asc"] = function (x, y) {
        return jQuery.fn.dataTableExt.oSort["name-desc"](y, x);
    }
    
    var oTable = $("#products").dataTable({
        "aaData": [
            [1, "Medium", "0:40"],
            [2, "Low", "11:25"],
            [3, "High", "7:30"]
        ],
        "aoColumns": [{
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
        }, {
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": true,
            "sType": "name"
        }, {
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": true,
            "sType": "duration"
        }]
    
    });