JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<ul>
    <li><a href="#">Sort first coloumn</a>
    </li>
    <li><a href="#">Sort second coloumn</a>
    </li>
</ul>
<table id="mytable">
    <thead>
        <tr>
            <th id="sl">S.L.</th>
            <th id="nm">name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Apple</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Cat</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Ball</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Dagger</td>
        </tr>
    </tbody>
</table>

CSS

thead {
    color:black;
}
tbody {
    color:red;
}
tfoot {
    color:red;
}
table, th, td {
    border:1px solid black;
}
th:hover {
    cursor:pointer;
    background:#AAA;
}

JavaScript

function sortColumn(c, n) {
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function (a, b) {

        var A = $(a).children('td').eq(n).text().toUpperCase();
        var B = $(b).children('td').eq(n).text().toUpperCase();

        if (A < B) {
            return -1 * c;
        }
        if (A > B) {
            return 1 * c;
        }
        return 0;
    });

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


var sln = 1;
$("ul li").click(function () {
    sln *= -1;
    var n = $("ul li").index(this);
    sortColumn(sln, n);
});