JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<table name="mytable" id="mytable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Points</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td class="points">20</td>
      <td class="time">10</td>
    </tr>
    <tr>
      <td>b</td>
      <td class="points">40</td>
      <td class="time">10</td>
    </tr>
    <tr>
      <td>c</td>
      <td class="points">20</td>
      <td class="time">20</td>
    </tr>
    <tr>
      <td>d</td>
      <td class="points">20</td>
      <td class="time">10</td>
    </tr>
  </tbody>
</table>

JavaScript

var sorted = $('#mytable tbody tr').sort(function(a, b) {
  var points1 = $(a).find('.points').text(),
  	points2 = $(b).find('.points').text(),
    time1 = $(a).find('.time').text(),
    time2 = $(b).find('.time').text();
    
  return time2.localeCompare(time1, false, {numeric: true}) || points2.localeCompare(points1, false, {numeric: true});
})

$('#mytable tbody').html(sorted)