JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/joequery/Stupid-Table-Plugin/master/stupidtable.js"></script>
<h1>Stupid jQuery table sort! (complex example)</h1>

  <div id="msg">&nbsp;</div>

  <table>
    <thead>
      <tr>
        <th data-sort="int" class="awesome">int</th>
        <th data-sort="float">float</th>        
        <th>Can't sort me!</th>
        <th data-sort="date">date</th>
        <th data-sort="int">Letter frequency</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>        
        <td>arbitrary</td>
        <td>15-Sep-2002</td>
        <td data-sort-value="0">E</td>
      </tr>
      <tr class="awesome">
        <td>95</td>
        <td>36</td>        
        <td>pointless</td>
        <td>07-Aug-2004</td>
        <td data-sort-value="1">T</td>
      </tr>
      <tr>
        <td></td>
        <td>-152.5</td>
        <td>silly</td>
        <td>15-Mar-1986</td>
        <td data-sort-value="2">A</td>
      </tr>
      <tr>
        <td>-53</td>
        <td>88.5</td>
        <td>eccentric</td>
        <td>27-Feb-2086</td>
        <td data-sort-value="3">O</td>
      </tr>
      <tr>
        <td>195</td>
        <td>-858</td>
        <td>garbage</td>
        <td>15-Mar-1986</td>
        <td data-sort-value="4">I</td>
      </tr>
    </tbody>
  </table>

CSS

table {
      border-collapse: collapse;
    }
    th, td {
      padding: 5px 10px;
      border: 1px solid #999;
    }
    th {
      background-color: #eee;
    }
    th[data-sort]{
      cursor:pointer;
    }
    tr.awesome{
      color: red;
    }

JavaScript

$(function(){
      // Helper function to convert a string of the form "Mar 15, 1987" into
      // a Date object.
        alert('herer');
      var date_from_string = function(str){
         var months = ["jan","feb","mar","apr","may","jun","jul",
                      "aug","sep","oct","nov","dec"];     
          alert(''+str);
 var re=(str+'').match(/(\d{1,2}-\w{3}-\d{4})/g);
          alert('re= '+re);
        var DateParts = (re+'').split("-");
           //alert('re= '+DateParts);
        var Year = DateParts[2];
        var Month = $.inArray(DateParts[1].toLowerCase(), months);
        var Day = DateParts[0];
          alert('Day '+Day);
        return new Date(Year, Month, Day);*/
      }

      var table = $("table").stupidtable({
        "date":function(a,b){
          // Get these into date objects for comparison.

          aDate = date_from_string(a);
          bDate = date_from_string(b);

          return aDate - bDate;
        },
          "int":function(a,b){
             if(a === "")
                 return 1;
             else if (b === "")
                 return -1;
             else
               return parseInt(a, 10) - parseInt(b,10);
          },
          "float":function(a,b){
             if(a === "")
                 return 1;
             else if (b === "")
                 return -1;
             else
               return parseFloat(a) - parseFloat(b);
          },
          "string":function(a,b){
              if (a<b) return -1; if (a>b) return +1; return 0;
          }
      });

      table.bind('beforetablesort', function (event, data) {
        // data.column - the index of the column sorted after a click
        // data.direction - the sorting direction (either asc or desc)
        $("#msg").text("Sorting index " + data.column)
      });

      table.bind('aftertablesort', function (event, data) {
        var th = $(this).find("th");
        th.find(".arrow").remove();
        var arrow = data.direction === "asc" ?...