JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<table id="mytable"><thead>
      <tr>
         <th id="sl">S.L.</th>
         <th id="nm">name</th>
      </tr>
     </thead>
    <tbody>
      <tr>
         <td>1</td>
         <td>Ronaldo</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Messi</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Ribery</td>
      </tr>
      <tr>
         <td>20</td>
         <td>Bale</td>
      </tr>
    </tbody>
     </table>

CSS

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table,th,td
{
border:1px solid black;
}
th:hover{
     cursor:pointer;
    background:#AAA;
    
}

JavaScript

function sortTable(f,n){
	var rows = $('#mytable tbody  tr').get();

	rows.sort(function(a, b) {

		var A = getVal(a);
		var B = getVal(b);

		if(A < B) {
			return -1*f;
		}
		if(A > B) {
			return 1*f;
		}
		return 0;
	});

	function getVal(elm){
		var v = $(elm).children('td').eq(n).text().toUpperCase();
		if($.isNumeric(v)){
			v = parseInt(v,10);
		}
		return v;
	}

	$.each(rows, function(index, row) {
		$('#mytable').children('tbody').append(row);
	});
}
var f_sl = 1;
var f_nm = 1;
$("#sl").click(function(){
    f_sl *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_sl,n);
});
$("#nm").click(function(){
    f_nm *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_nm,n);
});