JSFiddle - React, Tailwind, and code Playground

by kplcode

HTML

<p>
Click column heading to sort asc/desc. Col a desc by default/onload
</p>
<table name="mytable" id="mytable">
  <thead>
    <tr>
      <th class="sort date">Date</th>
      <th class="sort">column2</th>
      <th class="sort">column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">02-02-2016</a></td>
      <td>Alpha</td>
      <td>Beta</td>
    </tr>
    <tr>
      <td><a href="#">01-04-2016</a></td>
      <td>Alpha</td>
      <td>Beta</td>
    </tr>
    <tr>
      <td><a href="#">01-05-2016</a></td>
      <td>Beta</td>
      <td>Gamma</td>
    </tr>
    
    <tr>
      <td><a href="#">06-03-2016</a></td>
      <td>Beta</td>
      <td>Gamma</td>
    </tr>

    <tr>
      <td><a href="#">07-01-2016</a></td>
      <td>Gamma</td>
      <td>Alpha</td>
    </tr>
  </tbody>
</table>

CSS

th {cursor: pointer;}

JavaScript

$(".sort").click(function() {
  var col = $(this).parent().children().index($(this));
  var desc = $(this).hasClass('desc');
  var date = $(this).hasClass('date');
  sortTable(desc, col, date);
  $(this).toggleClass("desc asc");
});

function sortTable(order, col, date) {
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {
  
  	var A = $(a).children('td').eq(col).text().toUpperCase();
    var B = $(b).children('td').eq(col).text().toUpperCase();
  
  	if(date) {
      var A = A.split("-").reverse().join('-');
    	var B = B.split("-").reverse().join('-');
    }

    if (order) {
      if (B < A) return -1;
      if (B > A) return 1;
    } else {
      if (A < B) return -1;
      if (A > B) return 1;
    }

    return 0;
  });

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}

sortTable(1, 0, 1);