JSFiddle - React, Tailwind, and code Playground

by Ganesh

HTML

<table>
<thead>
<tr><th>string</th><th>number</th><th>boolean</th></tr>
</thead>
<tbody>
<tr><td>111</td><td>1.1</td><td>false</td></tr>
<tr><td>test4</td><td>1.2</td><td>true</td></tr>
<tr><td>333</td><td>500</td><td>false</td></tr>
<tr><td>test3</td><td>-500</td><td>true</td></tr>
</tbody>
</table>
<br/>

<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

table,td,th{border:1px solid black;border-collapse:collapse;padding:2px 10px;}
th{cursor:n-resize;background-color:lightgrey;}

JavaScript

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }