JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

<table class="table table-hover" style="width:96%;margin:2%;margin-top:0%" id="patientTable">
            <thead id="theader" >
            <tr style="background-color: #5bc0de/*rgb(255, 106, 106)*/;color: #F6F4F4;font-size:12.999999px">
            	<th>Name</th>
            	<th>Pati</th>
            	<th>Device Status</th>
            	<th>Monitoring Status</th>
            	<th>Monitoring Mode</th>
                <th>Service Start</th>
                <th>Service End</th>
             </tr>          
             </thead>
             <tbody>
                	<tr>
                    <td>agesh1</td><td>4535324</td><td>With Patient, Inactive</td><td>Service Ended</td><td>HOLTER</td><td>24 Dec , 2014</td><td>26 Dec , 2014</td><td style="text-align:center"><i class="fa fa-1x fa-edit"></i></td><td style="text-align:center"><input type="checkbox"/></td>
                    </tr>
                	<tr>
                     <td>ragesh</td><td>2345457</td><td>With Patient, Inactive</td><td>Service Ended</td><td>HOLTER</td><td>24 Dec , 2014</td><td>26 Dec , 2014</td><td style="text-align:center"><i class="fa fa-1x fa-edit"></i></td><td style="text-align:center"><input type="checkbox"/></td>
                    </tr>
                	<tr>
                     <td>abcde name</td><td>123423</td><td>With Patient, Inactive</td><td>Service Ended</td><td>HOLTER</td><td>24 Dec , 2014</td><td>26 Dec , 2014</td><td style="text-align:center"><i class="fa fa-1x fa-edit"></i></td><td style="text-align:center"><input type="checkbox"/></td>
                    </tr>
                	<tr>
                     <td>bcde</td><td>89876</td><td>With Patient, Inactive</td><td>Service Ended</td><td>HOLTER</td><td>24 Dec , 2014</td><td>26 Dec , 2014</td><td style="text-align:center"><i class="fa fa-1x fa-edit"></i></td><td style="text-align:center"><input type="checkbox"/></td>
                    </tr>
                	<tr>
                     <td>cshggsdhdsh</td><td>347967856</td><td>With...

JavaScript

$(document).ready(function() {
	$('#patientTable thead th').click(function(){
        $(this).attr('data-order', ($(this).attr('data-order') === 'desc' ? 'asc':'desc'));
        alert($('#patientTable thead th').index(this));
 	   sorttable(this, $('#patientTable thead th').index(this));
  	});
});
function sorttable(header, index){
 var $tbody = $('table tbody');
 var order = $(header).attr('data-order');
 $tbody.find('tr').sort(function (a, b) {
 var tda = $(a).find('td:eq(' + index + ')').text();
 var tdb = $(b).find('td:eq(' + index + ')').text();
     
     return (order === 'asc' ? (tda > tdb ? 1 : tda < tdb ? -1 : 0) : (tda < tdb ? 1 : tda > tdb ? -1 : 0));
}).appendTo($tbody);
}