JSFiddle - React, Tailwind, and code Playground

by thesystemrestart

HTML

<table id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Michael</td>
            <td>Jordan</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td>Jackson</td>
        </tr>
        <tr>
            <td>Bruno</td>
            <td>Mars</td>
        </tr>
    </tbody>
</table>

JavaScript

var alreadyOrdered = false;
$('#example tr th').on('click', function() {
    var index = $(this).index(),
        rows = [];
    $('#example tbody tr').each(function() {
        rows.push(this)
    });
    if (alreadyOrdered == false) {
        rows.sort(function(a, b) {
            return $('td:eq(' + index + ')', a).text() > $('td:eq(' + index + ')', b).text();
        });
        alreadyOrdered = true;;
    } else {
        rows.sort(function(a, b) {
            return $('td:eq(' + index + ')', a).text() < $('td:eq(' + index + ')', b).text();
        });
        alreadyOrdered = false;
    }
    $('#example tbody').empty().append(rows);
});