JSFiddle - React, Tailwind, and code Playground

HTML

<table id="caltbl" border="1">
 <thead>
    <tr><th>Number</th><th>Letter</th></tr>
 </thead>
 <tbody>
  <tr><td class="column1">759</td><td class="column2">A</td></tr>
  <tr><td class="column1">3</td>  <td class="column2">C</td></tr>
  <tr><td class="column1">2</td>  <td class="column2">B</td></tr>
  <tr><td class="column1">1</td>  <td class="column2">D</td></tr>
 </tbody>
</table>

<a onclick="sortTable();return false;" href="#">Sort col1</a>
<a onclick="sortTable2();return false;" href="#">Sort col2</a>

CSS

body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
h2 { font-size: 24px; margin: 2ex 0 1ex 0; }
th { font-weight: 600; padding: 0 1ex 0 1ex;}

JavaScript

function sortTable(){
    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 column1 = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        if(!isNaN(column1)) store.push([column1, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
};

function sortTable2(){
    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]; //count the number of rows
        var column2 = parseFloat(row.cells[1].textContent || row.cells[1].innerText);
        if(!isNaN(column2)) store.push([column2, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
};