JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
<table>
<tr>
<th id="facility_header">Facility name</th>
<th>Phone #</th>
<th id="city_header">City</th>
<th>Speciality</th>
</tr>
<tr>
<td>CCC</td>
<td>00001111</td>
<td>Amsterdam</td>
<td>GGG</td>
</tr>
<tr>
<td>JJJ</td>
<td>55544444</td>
<td>London</td>
<td>MMM</td>
</tr>
<tr>
<td>AAA</td>
<td>33332222</td>
<td>Paris</td>
<td>RRR</td>
</tr>
</table>
CSS
td, th { border: 1px solid #111; padding: 6px; }
th { font-weight: 700; }
JavaScript
/*
$('#facility_header, #city_header')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
*/
$('th').live('click', function(){
var th = $(this), thIndex = th.index()
switch($(this).attr('inverse')){
case 'false': inverse = true; break;
case 'true:': inverse = false; break;
default: inverse = false; break;
}
th.attr('inverse',inverse)
var table = $(this).parent().parent();
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
// });