JSFiddle - React, Tailwind, and code Playground

by Yashpreet Singh

HTML

<table id="results">
    <thead>
        <tr>
            <th>Merchant</th>
            <th>Pg</th>
            <th>Success Count</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td >211</td>
            <td>12</td>
        </tr>  
        <tr>
            <td>2</td>
            <td>12</td>
            <td>144</td>
        </tr>  
        <tr>  
            <td >3</td>
            <td >13</td>
            <td>21 </td>
        
        </tr>
        <tr>
            <td>4</td> 
            <td>14</td>
            <td>42</td>
        </tr>
        <tr> 
            <td>5</td> 
            <td>15</td>
            <td>1</td>
        </tr>
        <br />
    </tbody>
</table>
<div id="he" ></div>

JavaScript

var toggleSort = new Array(1,1,1);
$(function(){ 
    var flag =0;
    $("#results tr th").css('text-decoration', 'underline');
    $("#results tr th").click(function(){
        var idx= $(this).index();
        toggleSort[idx] = -1*toggleSort[idx] ;
        sortTable(toggleSort[idx] ,idx);
    });
});
function sortExec(){
    var rows = $("#results tbody tr").get();
    alert(rows);
    
}
function sortTable(f,colNum){
        sortExec();
      var rows = $('#results tbody  tr').get();
      rows.sort(function(a, b) {
      var A = $(a).children('td').eq(colNum).text().toUpperCase();
      var B = $(b).children('td').eq(colNum).text().toUpperCase();
      if(A < B) {
        return -1*f;
      }
      if(A > B) {
        return 1*f;
      }
      return 0;
      });
      $.each(rows, function(index, row) {
        $('#results').children('tbody').append(row);
      });
}