JSFiddle - React, Tailwind, and code Playground

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_themeroller.css">
<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);
        };
        console.log(x);
        return getMins(x) - getMins(y);
    };
    
    jQuery.fn.dataTableExt.oSort["duration-asc"] = function (x, y) {
        return jQuery.fn.dataTableExt.oSort["duration-desc"](y, x);
    }
    
    var oTable = $("#products").dataTable({
        "aaData": [
            [1, "Dinner", "0:40"],
            [2, "Study", "11:25"],
            [3, "Sleep", "7:30"]
        ],
        "aoColumns": [{
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
        }, {
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
        }, {
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": true,
            "sType": "duration"
        }]
    
    });