рони,
вот примерно так. Правда и некогда, и лень писать, поэтому по проще и работать будет только в браузере поддерживающем Object.entries().
<html>
<head>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td, th {
border: 1px solid #ddd;
padding: 5px;
}
th {
cursor: default;
padding: 6px;
background: #eee;
}
</style>
</head>
<body>
<table>
<tr>
<th id="0">Col 1</th>
<th id="1">Col 2</th>
<th id="2">Col 3</th>
<th id="3">Col 4</th>
</tr>
<tr><td>7.5</td><td>abcd</td><td>120</td><td>230</td></tr>
<tr><td>.5</td><td>txt</td><td>200</td><td>500</td></tr>
<tr><td>.18</td><td>jnr</td><td>150</td><td>180</td></tr>
</table>
<script>
var obj = [],
dir = 0,
tbl = document.querySelector('table'),
c = tbl.rows[0].cells.length,
m = c*tbl.rows.length;
sortTable();
tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
e = e.target || e.srcElement;
"TH" == e.tagName && (e = Object.entries(obj[e.id]).sort(function(a, b) {
return a[1]-b[1]
}).map(function(a) {
return a[0]
}),
sortTable(e))
});
function sortTable(e){
for(var d=c; d<m; d++) {
var a = d%c, b;
a || (b = d/c);
e ? tbl.rows[b].cells[a].textContent = obj[a][e[b-1]]
: (obj[a] || (obj[a] = {}), obj[a][b] = tbl.rows[b].cells[a].textContent)
}
}
</script>
</body>
</html>
Проще и в случае просто сделать реверс сортировки, если выбирается обратный порядок у активной колонки (последняя сортировка). Можно хранить ключи сортировки и просто реверсировать их.