JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<table id="simpleTable">
  <thead>
    <tr>
    <th class="type-int awesome">int</th>
    <th class="type-float">float</th>
    <th class="type-string">string</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15</td>
      <td>-.18</td>
      <td>バナナ</td>
    </tr>
      <tr class="awesome">
      <td>95</td>
      <td>36</td>
      <td>ケーキ</td>
    </tr>
      <tr>
      <td>2</td>
      <td>-152.5</td>
      <td>リンゴ</td>
    </tr>
    <tr>
      <td>-53</td>
      <td>88.5</td>
      <td>ナシ</td>
    </tr>
    <tr>
      <td>195</td>
      <td>-858</td>
      <td>オレンジ</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 5px 10px;
  border-bottom: 1px solid #aaa;
}

dt {
  color: #222;
  font-weight: 700;
}

th {
  color: #222;

JavaScript

// Stupid jQuery table plugin.
//http://joequery.github.com/Stupid-Table-Plugin/
// Call on a table 
// sortFns: Sort functions for your datatypes.
(function($){
  $.fn.stupidtable = function(sortFns){
    var table = this; sortFns = sortFns || {};

    sortFns = $.extend({}, {
      "int":function(a,b){ return parseInt(a, 10) - parseInt(b,10); },
      "float":function(a,b){ return parseFloat(a) - parseFloat(b); },
      "string":function(a,b){ if (a<b) return -1; if (a>b) return +1; return 0;}
    }, sortFns);

 
    var arrays_equal = function(a,b) { return !!a && !!b && !(a<b || b<a);}
    
    var sort_map =  function(arr, sort_function){
      var sorted = arr.slice(0).sort(sort_function); 
      var map = [];
      var index = 0;
      for(var i=0; i<arr.length; i++){
        index = $.inArray(arr[i], sorted);

        while($.inArray(index, map) != -1){
          index++;
        }
        map.push(index);
      }
      return map;
    }

    var apply_sort_map = function(arr, map){
      var clone = arr.slice(0);
      for(var i=0; i<map.length; i++){
        newIndex = map[i];
        clone[newIndex] = arr[i];
      }
      return clone;
    }

    var is_sorted_array = function(arr, sort_function){
      var clone = arr.slice(0);
      var reversed = arr.slice(0).reverse();
      var sorted = arr.slice(0).sort(sort_function);

      return arrays_equal(clone, sorted) || arrays_equal(reversed, sorted);
    }

    table.delegate("th", "click", function(){
      var trs = table.find("tr").slice(1); 
      var i = $(this).index();
      var classes = $(this).attr("class");
      var type = null;
      if (classes){
        classes = classes.split(/\s+/);

        for(var j=0; j<classes.length; j++){
          if(classes[j].search("type-") != -1){
            type = classes[j];
            break;
          }
        }
        if(type){
          type = type.split('-')[1];
        }
        else{
          type = "string";
        }
      }
 
     ...