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 class="min">Flexural Strength Min</th>
      <th>Flexural Strength</th>
      <th class="max">Flexural Strength Max</th>
      <th class="min">Fracture Toughness</th>
      <th>Fracture Toughness</th>
      <th class="max">Fracture Toughness</th>
      <th class="min">Thermal Conductivity Min</th>
      <th>Thermal Conductivity</th>
      <th class="max">Thermal Conductivity Max</th>
      <th class="min">Coefficient of Thermal Expansion Min</th>
      <th>Coefficient of Thermal Expansion</th>
      <th class="max">Coefficient of Thermal Expansion Max</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AIN</td>
      <td class="min">260</td>
      <td>260 - 410</td>
      <td class="max">410</td>
      <td class="min">2.75</td>
      <td>2.75 - 6.0</td>
      <td class="max">6.00</td>
      <td class="min">80</td>
      <td>80 - 205</td>
      <td class="max">205</td>
      <td class="min">3.3</td>
      <td>3.3 - 5.6</td>
      <td class="max">5.6</td>
    </tr>
    <tr>
      <td>Alumina</td>
      <td class="min">250</td>
      <td>250 - 1250</td>
      <td class="max">1250</td>
      <td class="min">3.0</td>
      <td>3.0 - 7.3</td>
      <td class="max">7.3</td>
      <td class="min">12</td>
      <td>12 - 37.1</td>
      <td class="max">37.1</td>
      <td class="min">7.2</td>
      <td>7.2 - 9.1</td>
      <td class="max">9.1</td>
    </tr>
    <tr>
      <td>B4C</td>
      <td class="min">250</td>
 ...

CSS

.min,
.max {
  display: none;
}

JavaScript

$('table').tablesorter();

$('#col').change(function() {
  var dir = $('#dir').val();
  var col = parseInt($(this).val(), 10);
  if (dir == '1') {
    col = col + 2
  };
  var column = col,
    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();
  if (dir == '1') {
    col = col + 2
  };
  var column = col,
    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 =...