JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row d-flex justify-content-center">
  <div class="col-md-offset-2 col-md-8">
    <table class="table table-boredered report sortable">
      <thead>
        <tr>
          <th></th>
          <th>Hello 1</th>
          <th>Hello 2</th>
          <th>Hello 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Something 1</th>
          <td>123</td>
          <td>3</td>
          <td>34</td>
        </tr>
        <tr>
          <th>Something 2</th>
          <td>65</td>
          <td>12</td>
          <td>4</td>
        </tr>
        <tr>
          <th>Something 3</th>
          <td>43</td>
          <td>54</td>
          <td>65</td>
        </tr>
        <tr>
          <th>Something 4</th>
          <td>4</td>
          <td>3</td>
          <td>54</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

JavaScript

$(function() {
  function sortDesc(a, b) {
    return a - b;
  }

  function sortAsc(a, b) {
    return b - a;
  }

  function sortRow(rObj, desc) {
    var curArr = [];
    $("td", rObj).each(function(i, el) {
      curArr.push(parseInt($(el).text().trim()));
    });
    if (desc == undefined || desc == true) {
      curArr.sort(sortDesc);
    } else {
      curArr.sort(sortAsc);
    }
    $("td", rObj).each(function(i, el) {
      $(el).html(curArr[i]);
    });
  }

  $(".sortable tbody th").on("click", function(e) {
    var r = $(this).parent();
    if ($(this).data("sort") == undefined) {
      $(this).data("sort", true);
    }
    sortRow(r, $(this).data("sort"));
    $(this).data("sort", $(this).data("sort") ? false : true);
  });
});