JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Sort table by it's first column</h2>
<a href="http://stackoverflow.com/questions/22333459/sort-table-by-second-column-jquery">Based on a question on stackoverflow</a>
<table id="caltbl">
 <thead>
    <tr><th>Number</th><th>Letter</th></tr>
 </thead>
 <tbody>
  <tr><td class="sortnr">2</td><td>A</td></tr>
  <tr><td class="sortnr">3</td>  <td>B</td></tr>
  <tr><td class="sortnr">759</td>  <td>D</td></tr>
  <tr><td class="sortnr">1</td>  <td>C</td></tr>
 </tbody>
</table>
<button onclick="sortTable()">sort 0-9</button>
<button onclick="sortTable(0,'d')">sort 9-0</button> <br>
<button onclick="sortTable(1)">sort A-Z</button>
<button onclick="sortTable(1,'d')">sort Z-A</button>

CSS

h2 { font-size: 24px; margin: 2ex 0 1ex 0; }
th { font-weight: 600; padding: 0 1ex 0 1ex;}

JavaScript

function sortTable(column, direction){
    column = column || 0;
    var tbl = document.getElementById("caltbl").tBodies[0];
    var store = [];
    for(var i=0, len=tbl.rows.length; i<len; i++){
        var row = tbl.rows[i];
        var sortnr = row.cells[column].textContent || row.cells[column].innerText;
        if (!isNaN(sortnr)) { sortnr = parseFloat(sortnr); }
        store.push([sortnr, row]);
    }
    store.sort(function(x,y){
        return x[0] > y[0] ? 1 : x[0] < y[0] ? -1 : 0;
    });
    // look for "d" (descending) in the direction to switch sort direction
    if (direction && /d/.test(direction)) { store.reverse(); }
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}