JSFiddle - React, Tailwind, and code Playground

HTML

<table>
 <tr><td>Sort Direction:</td><td> <select class="dir"><option value="asc">Ascending</option><option value="desc">Descending</option></select></td></tr>
 <tr><td>Sort Order:</td><td><ul class="order"><li>Album <span>-&gt;</span></li><li>Artist <span>-&gt;</span></li><li>Genre <span>-&gt;</span></li><li>Track <span style="display:none">-&gt;</span></li></ul></td></tr>
 <tr><td colspan=2><button>Sort</button></td></tr>
</table>
<br>
<table id="mainList">
 <thead>
  <tr><th>Album</th><th>Artist</th><th>Genre</th><th>Track</th></tr>
 </thead>
 <tbody>
  <tr><td>Aardvark</td><td>Jack Jones</td><td>Rock</td><td>9</td></tr>
  <tr><td>Bison</td><td>Aaron Adams</td><td>Paper</td><td>8</td></tr>
  <tr><td>Coyote</td><td>Sharon Smith</td><td>Scissors</td><td>12</td></tr>
  <tr><td>Deer</td><td>Langston Lee</td><td>Dragon</td><td>10</td></tr>
  <tr><td>Elephant</td><td>Carl Connor</td><td>Spock</td><td>1</td></tr>
  <tr><td>Fawn</td><td>David Delaware</td><td>Lizard</td><td>2</td></tr>
  <tr><td>Giraffe</td><td>Lisa Langston</td><td>Gun</td><td>3</td></tr>
  <tr><td>Hippo</td><td>Valorie Vampire</td><td>Snake</td><td>5</td></tr>
  <tr><td>Iguana</td><td>Fred Funny</td><td>Wolf</td><td>7</td></tr>
  <tr><td>Jaguar</td><td>Nancy Nelly</td><td>Tree</td><td>11</td></tr>
  <tr><td>Kuala</td><td>Maurice Macaroon</td><td>Lightning</td><td>14</td></tr>
  <tr><td>Bison</td><td>Fred Funny</td><td>Lizard</td><td>12</td></tr>
  <tr><td>Deer</td><td>Jack Jones</td><td>Gun</td><td>8</td></tr>
  </tbody>
</table>

CSS

.order { margin: 0; padding: 0; }
.order li { float: left; width: 70px; display: block; margin: 0; padding: 0; }
table td { padding: 1px 10px; }

JavaScript

$(document).ready(function(){
 $('.order').sortable({
  update: function(e,ui){
   $('.order span').show().filter(':last').hide(); // hide last arrow
  }
 });

 $(':button').click(function(){
  var table = ['Album', 'Artist', 'Genre', 'Track'],
   order = [];
  $('.order li').each(function(){
   order.push( $.inArray( $(this).text().replace(' ->',''), table ) );
  });
  tableSort(order, $('.dir').val());
 })
})

 function tableSort(by,dir){
  var mylist = $('#mainList'),
   listitems = mylist.find('tbody tr').get();

  listitems.sort(function(a, b) {
   var $a = $(a),
    $b = $(b),
    i = by,
    compA = [],
    compB = [],
    c;

   for(c=0; c<3; c++){
    compA.push($a.find('td').eq(c).html()); // Alphabetical
    compB.push($b.find('td').eq(c).html());
   }
    compA.push(('0' + $a.find('td:last').html()).slice(-2)); // Numerical (2 digit numbers)
    compB.push(('0' + $b.find('td:last').html()).slice(-2)); // use '00' + ....slice(-3) for 3 digit numbers, etc...

   for(c=0; c<i.length; c++){
    return (dir == 'asc') ?
     ((compA[i[c]] < compB[i[c]]) ? -1 : (compA[i[c]] > compB[i[c]]) ? 1 : 0) : // ascending sort
     ((compA[i[c]] > compB[i[c]]) ? -1 : (compA[i[c]] < compB[i[c]]) ? 1 : 0)   // descending sort
   }
  });

  $.each(listitems, function(i, v) {
   mylist.append(v);
  });
 }