JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<script src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
<table id="table1">
    <tr>
        <th id="postcodes">Postal Code</th>
        <th id="cities">City</th>
    </tr>
    <tr>
        <td>00022111</td>
        <td>Santiago de cuba</td>
    </tr>
    <tr>
        <td>55544444</td>
        <td>santiago de Compostela</td>
    </tr>
    <tr>
        <td>33332222</td>
        <td>Paris</td>
    </tr>
    <tr>
        <td>1333.2222</td>
        <td>Torrelodones</td>
    </tr>
    <tr>
        <td>015705</td>
        <td>Santiago</td>
    </tr>
    <tr>
        <td>33312222</td>
        <td>Barcelona</td>
    </tr>
</table>
<hr>
<table id="my_table">
    <tr>
        <th id="facilities">Facility name</th>
        <th id="phones">Phone #</th>
        <th id="cities">City</th>
        <th id="specialities">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

function max(a,b) {
    if(a>b) return a;
    else return b;
}
function maxnat(a,b) {
    var sep=' ';
    a = new Array(max(0,1+b.length-a.length)).join(sep) + a;  
    b = new Array(max(0,1+a.length-b.length)).join(sep) + b;
}
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function ordertable(idtable,cols) {
    var nat = 1;
    var table=$(idtable)
    //$(cols)
    $(idtable).find(cols)
        .wrapInner('<span title="sort this column"/>')
        .each(function(){
            // looks only for each col inside table idtable
            // (so tables can use same col header names)
            var th = $(this),
                thIndex = th.index(),
                inverse = false;
            th.click(function(){
                table.find('td').filter(function(){
                    return $(this).index() === thIndex;
                }).sortElements(function(a, b){
                    // +/\d+/.exec(a)[0] - +/\d+/.exec(b)[0];
                    var va=$.text([a]);
                    var vb=$.text([b]);

                    //if (nat==1) {
                        /*
                        // va = +/\d+/.exec(va) ;
                        // vb = +/\d+/.exec(vb) ;
                        var sep='0';
                        va = new Array(max(0,1+vb.length-va.length)).join(sep) + va;
                        vb = new Array(max(0,1+va.length-vb.length)).join(sep) + vb;
                        */
                    if(isNumber(va) && isNumber(vb)) {
                        va = parseFloat(va);
                        vb = parseFloat(vb);
                    } else {
                        va = va.toUpperCase();
                        vb = vb.toUpperCase();
                    }
                    return va > vb ?
                        inverse ? -1 : 1
                        : inverse ? 1 : -1;
                }, function(){
                    // parentNode is the element we want to move
                    return...