JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<h1>Using &quot;progressive enhancement&quot; to enable features as they are available</h1>
<p>Click the arrows to sort by ascending or descending values.</p>
<table border="1" cellpadding="3" cellspacing="0" id="theList">
    <thead>
    <tr>
      <th> Item
      <a id="ItemDescend" href="http://quoraquora.com/TableSorting.html/sort.aspx?Item=Descend">
        <img class="clickable" src="images/down.gif" alt="Sort Items Descending"/></a>
        <a id="ItemAscend" href="http://quoraquora.com/TableSorting.html/sort.aspx?Item=Ascend">
        <img class="clickable" src="images/up.gif" alt="Sort Items Ascending"/></a></th>
      <th> Price
      <a id="PriceDescend" href="http://quoraquora.com/TableSorting.html/sort.aspx?Price=Descend">
      <img class="clickable" src="images/down.gif" alt="Sort Price Descending" /></a>
        <a id="PriceAscend" href="http://quoraquora.com/TableSorting.html/sort.aspx?Price=Ascend">
        <img class="clickable" src="images/up.gif" alt="Sort Price Ascending"/></a></th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>Milk</td>
      <td>1.99</td>
  </tr>
  <tr>
      <td>Eggs</td>
      <td>2.29</td>
  </tr>
  <tr>
      <td>Butter</td>
      <td>3.49</td>
  </tr>
  <tr>
      <td>Bread</td>
      <td>0.99</td>
  </tr>
  <tr>
      <td>Pasta</td>
      <td>1.19</td>
  </tr>
  <tr>
      <td>Honey</td>
      <td>4.39</td>
  </tr>
  <tr>
      <td>Cookies</td>
      <td>2.99</td>
  </tr>
  <tr>
      <td>Apples</td>
      <td>0.59</td>
  </tr>
  <tr>
      <td>Sugar</td>
      <td>1.78</td>
  </tr>
  <tr>
      <td>Pepper</td>
      <td>1.56</td>
  </tr>
  </tbody>
</table>
<p>&nbsp;</p>

CSS

img {
    border:0;
}
th,td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #000000;
}
tr {
    border: 1px solid gray;
}
td {
    width:200px;
}
th {
    background-color:#D2E0E8;
    color:#003366
}
.clickable {
    cursor:pointer;
}

JavaScript

var gbAscending = true;
var gbCol = 0;

function addEventHandler(oNode, sEvt, fFunc, bCapture) {
    if (window.attachEvent)
        oNode.attachEvent("on" + sEvt, fFunc);
    else
        oNode.addEventListener(sEvt, fFunc, bCapture);
}

function insertSortControls() {
    var oLink;
    oLink = document.getElementById('ItemDescend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 0, true) }, false);
    oLink = document.getElementById('ItemAscend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 0, false) }, false);
    oLink = document.getElementById('PriceDescend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 1, true) }, false);
    oLink = document.getElementById('PriceAscend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 1, false) }, false);
}

function sortCallBack(a, b) {
    // each of the arguments passed to this function is a TR node
    // with one or more child TD nodes.
    // get the child node of each TR element that corresponds
    // to the column to be sorted.
    var col1 = a.getElementsByTagName("TD")[gbCol];
    var col2 = b.getElementsByTagName("TD")[gbCol];

    // now get the text node for each col
    var text1 = col1.firstChild.data;
    var text2 = col2.firstChild.data;

    // now that we have the text nodes, do the sorting
    if (text1 < text2)
        return gbAscending ? -1 : 1;
    else if (text1 > text2)
        return gbAscending ? 1 : -1;
    else return 0;
}

function sortTable(whichTable, whichCol, sortDir) {
    // get the table object that has the ID we were given as an argument
    var oTable = document.getElementById(whichTable);

    // begin by getting the node for the TBODY, since that
    // node contains all the rows to be sorted
    var oTBody =...