JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="http://rawgithub.com/joequery/Stupid-Table-Plugin/master/stupidtable.min.js"></script>
<table id="simpleTable"> 
  <thead> 
    <tr> 
    <th data-sort="int">int</th> 
    <th data-sort="float">float</th> 
    <th data-sort="string">string</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td>15</td> 
      <td>-.18</td> 
      <td>banana</td> 
    </tr> 
      <tr> 
      <td>95</td> 
      <td>36</td> 
      <td>coke</td> 
    </tr> 
      <tr> 
      <td>2</td> 
      <td>-152.5</td> 
      <td>apple</td> 
    </tr> 
    <tr> 
      <td>-53</td> 
      <td>88.5</td> 
      <td>zebra</td> 
    </tr> 
    <tr> 
      <td>195</td> 
      <td>-858</td> 
      <td>orange</td> 
    </tr> 
  </tbody> 
</table>

JavaScript

$(function(){
      $("#simpleTable").stupidtable();
 
      // Helper function to convert a string of the form "Mar 15, 1987" into
      // a Date object. 
      var date_from_string = function(str){
          var months = ["jan","feb","mar","apr","may","jun","jul",
          "aug","sep","oct","nov","dec"];
          var pattern = "^([a-zA-Z]{3})\\s*(\\d{2}),\\s*(\\d{4})$";
          var re = new RegExp(pattern);
          var DateParts = re.exec(str).slice(1);
 
          var Year = DateParts[2];
          var Month = $.inArray(DateParts[0].toLowerCase(), months);
          var Day = DateParts[1];
          return new Date(Year, Month, Day);
      }
 
      var table = $("#complexTable").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;
          }
      });
 
        table.bind('aftertablesort', function (event, data) {
          // data.column - the index of the column sorted after a click
          // data.direction - the sorting direction (either asc or desc)
 
          var th = $(this).find("th");
          th.find(".arrow").remove();
          var arrow = data.direction === "asc" ? "&uarr;" : "&darr;";
          th.eq(data.column).append('<span class="arrow">' + arrow +'</span>');
        });
 
    });