JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<select id="col">
  <option value="-">Choose a column</option>
  <option value="1">Flexural Strength</option>
  <option value="2">Fracture Toughness</option>
  <option value="3">Thermal Conductivity</option>
  <option value="4">Coefficient of Thermal Expansion</option>
</select>
<select id="dir">
  <option value="0">low to high</option>
  <option value="1">high to low</option>
</select>
<table class="tablesorter">
  <thead>
    <tr>
      <th>Material Family</th>
      <th>Flexural Strength</th>
      <th>Fracture Toughness</th>
      <th>Thermal Conductivity</th>
      <th>Coefficient of Thermal Expansion</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AIN</td>
      <td>260</td>
      <td>2.75</td>
      <td>80</td>
	  <td>3.3</td>
    </tr>
    <tr>
      <td>Alumina</td>
      <td>250</td>
      <td>3.0</td>
      <td>12</td>
	  <td>7.2</td>
    </tr>
    <tr>
      <td>B4C</td>
      <td>250</td>
      <td>3.0</td>
      <td>40</td>
	  <td>4.5</td>
    </tr>
    <tr>
      <td>Si3N4</td>
      <td>600</td>
      <td>4.25</td>
      <td>19</td>
	  <td>2.9</td>
    </tr>  
  </tbody>
</table>

JavaScript

$('table').tablesorter();

$('#col').change(function() {
	var dir = $('#dir').val();
  var column = parseInt($(this).val(), 10),
    direction = dir, //0, // 0 = high to low, 1 = low to high
    sort = [
      [column, direction]
    ];
  if (column >= 0) {
    $('table').trigger("sorton", [sort]);
  }
});
$('#dir').change(function() {
	var dir = $('#dir').val();
  var col = $('#col').val();
  var column = parseInt(col, 10),
    direction = dir, //0, // 0 = high to low, 1 = low to high
    sort = [
      [column, direction]
    ];
  if (column >= 0) {
    $('table').trigger("sorton", [sort]);
  }
});


(function($){$.extend({tablesorter:new
function(){var parsers=[],widgets=[];this.defaults={cssHeader:"header",cssAsc:"headerSortUp",cssDesc:"headerSortDown",cssChildRow:"expand-child",sortInitialOrder:"asc",sortMultiSortKey:"shiftKey",sortForce:null,sortAppend:null,sortLocaleCompare:true,textExtraction:"simple",parsers:{},widgets:[],widgetZebra:{css:["even","odd"]},headers:{},widthFixed:false,cancelSelection:true,sortList:[],headerList:[],dateFormat:"us",decimal:'/\.|\,/g',onRenderHeader:null,selectorHeaders:'thead th',debug:false};function benchmark(s,d){log(s+","+(new Date().getTime()-d.getTime())+"ms");}this.benchmark=benchmark;function log(s){if(typeof console!="undefined"&&typeof console.debug!="undefined"){console.log(s);}else{alert(s);}}function buildParserCache(table,$headers){if(table.config.debug){var parsersDebug="";}if(table.tBodies.length==0)return;var rows=table.tBodies[0].rows;if(rows[0]){var list=[],cells=rows[0].cells,l=cells.length;for(var i=0;i<l;i++){var p=false;if($.metadata&&($($headers[i]).metadata()&&$($headers[i]).metadata().sorter)){p=getParserById($($headers[i]).metadata().sorter);}else if((table.config.headers[i]&&table.config.headers[i].sorter)){p=getParserById(table.config.headers[i].sorter);}if(!p){p=detectParserForColumn(table,rows,-1,i);}if(table.config.debug){parsersDebug+="column:"+i+"...