var dirc = 0, dirr = 0, cc = 0, rr = 0;
function colSlice(arr,ini=0,fin=0) {
if (ini<0) ini = arr.length+ini;
if (fin==0) fin = (arr.length+1)-ini;
else fin = ini+fin
var sliced = [];
for (var i = 0; i < arr.length; i++) {
sliced.push([]);
for (var j = 0; j < arr[i].length; j++) {
if (j>=ini && j<fin)
if (parseFloat(arr[i][j])>0 || arr[i][j]=="0")
sliced[i].push(parseFloat(arr[i][j]));
else
sliced[i].push(arr[i][j]);
}
}
return sliced;
}
function colJoin(a,b) {
var joined = [];
for (var i = 0; i < a.length; i++) {
joined.push([]);
for (var j = 0; j < a[i].length; j++) {
joined[i].push(a[i][j]);
}
for (var j = 0; j < b[i].length; j++) {
joined[i].push(b[i][j]);
}
}
return joined;
}
function sortMatrix(a,b,x,d) {
if (d<=0) var ret = [1,-1];
else var ret = [-1,1];
if (isNaN(a[x]) && isNaN(b[x])) {
var ax = a[x].toLowerCase();
var bx = b[x].toLowerCase();
} else if (isNaN(a[x])) {
return ret[0];
} else if (isNaN(b[x])) {
return ret[1];
} else {
var ax = parseFloat(a[x]);
var bx = parseFloat(b[x]);
}
if (ax > bx) return ret[0];
else if (ax < bx) return ret[1];
else return 0;
}
function sortTable(r,c) {
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("TR");
var matriz = [];
var m = null;
// Get matrix from table
for (i = 0; i < rows.length; i++) {
if (i==0) cols = rows[i].getElementsByTagName("TH");
else cols = rows[i].getElementsByTagName("TD");
m = [];
for (j = 0; j < cols.length; j++) {
m.push(cols[j].innerHTML);
}
matriz.push(m);
}
if (r==0) { // sort rows by col
if (c==cc) dirc = Math.abs(1-dirc);
else dirc = 0;
m = matriz[0];
matriz = matriz.slice(1);
matriz.sort(function(a, b){
return sortMatrix(a,b,c,dirc);
});
matriz.unshift(m);
cc = c;
}
if (c==0) { // sort cols by row
if (r==rr) dirr = Math.abs(1-dirr);
else dirr = 0;
m = colSlice(matriz,0,1);
matriz = colSlice(matriz,1);
// Transpose matriz
var newArray = matriz[0].map(function(co, i){
return matriz.map(function(ro){
return ro[i];
});
});
// Sort
newArray.sort(function(a, b){
return sortMatrix(a,b,r,dirr);
});
// Transpose back
matriz = newArray[0].map(function(co, i){
return newArray.map(function(ro){
return ro[i];
});
});
matriz = colJoin(m,matriz);
rr = r;
}
// Update values
for (i = 0; i < rows.length; i++) {
if (i==0) cols = rows[i].getElementsByTagName("TH");
else cols = rows[i].getElementsByTagName("TD");
for (j = 0; j < cols.length; j++) {
cols[j].innerHTML = matriz[i][j];
}
}
}
function clicRow(e) {
sortTable(0,parseInt(e.target.attributes.col.value));
}
var tds=document.querySelectorAll("#myTable tr td:first-child,#myTable tr th:first-child");
var len = tds.length;
for(var i=0; i< len; i++){
tds[i].addEventListener('click', clicRow);
}
function clicCol(e) {
sortTable(parseInt(e.target.attributes.row.value),0);
}
var tds=document.querySelectorAll("#myTable tr:first-child th");
var len = tds.length;
for(var i=1; i< len; i++){
tds[i].addEventListener('click', clicCol);
}
/* Just for beauty */
#myTable {
border: none;
}
#myTable th {
cursor: n-resize;
border: none;
background-color: #e0e0e0;
}
#myTable th:first-child {
cursor: move;
}
th, td {
width: 5%;
}
#myTable tr td {
border: none;
border-bottom: 1px solid #aaa;
text-align: center;
}
#myTable tr td:first-child {
cursor: e-resize;
background-color: #e0e0e0;
border-bottom: 1px solid #aaa;
text-align: center;
}
#myTable tr:last-child td {
border: none;
}
<table id="myTable">
<tbody>
<tr>
<th row="0" col="0">Both</th>
<th row="1">Col A</th>
<th row="2">Col B</th>
<th row="3">Col C</th>
<th row="4">Col 4</th>
</tr>
<tr>
<td col="1">Row A</td>
<td>221</td>
<td>2</td>
<td>22</td>
<td>22.2</td>
</tr>
<tr>
<td col="2">Row B</td>
<td>123</td>
<td>1234</td>
<td>ABA</td>
<td>aba</td>
</tr>
<tr>
<td col="3">Row C</td>
<td>1</td>
<td>12.04</td>
<td>12.4</td>
<td>ab</td>
</tr>
<tr>
<td col="4">Row 4</td>
<td>123.2</td>
<td>123.1</td>
<td>acar</td>
<td>acar</td>
</tr>
</tbody>
</table>