JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
  <tr>
    <th>Id</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Sex</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>Alex</td>
    <td>Kane</td>
    <td>m</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Lucy</td>
    <td>Smith</td>
    <td>f</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Jane</td>
    <td>Doe</td>
    <td>f</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Lois</td>
    <td>Chang</td>
    <td>f</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Zack</td>
    <td>Robbs</td>
    <td>m</td>
  </tr>
</tbody>
</table>

CSS

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
    background-color: lightgray;
}

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.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }