HTML table sortable by ROW instead of COLUMN with JavaScript?

Question

I'm using this code from W3Schools for sorting all table rows by clicking on column header. As expected, this orders all rows by that col value.

I'm shure this has already been answered somewere but I't has been difficult for me to filter serarch results to find a similar way (hopefully in pure javascript) of sorting columns by clicking on a first column row.

That should order all columns by that clicked row values.

I'm hoping for some combined method that could order by column AND by row depending on user click, but just a Sort by Row method would be OK.

Thanks in advace!

Expected behavior

Unsorted table:


  
    
      Name
      Col 1
      Col 2
      Col 3
    
    
      Alan Brado
      2
      3
      1
    
    
      Kevin Chuca
      1
      3
      2
    
    
      Pamela Chu
      3
      2
      1

NORMAL: Sorted table by COLUMN (Col 1):


  
    
      Name
      *Col 1*
      Col 2
      Col 3
    
    
      Kevin Chuca
      1
      3
      2
    
    
      Alan Brado
      2
      3
      1
    
    
      Pamela Chu
      3
      2
      1

DESIRED: Sorted table by ROW (Alan Brado):


  
    
      Name
      Col 3
      Col 1
      Col 2
    
    
      *Alan Brado*
      1
      2
      3
    
    
      Kevin Chuca
      2
      1
      3
    
    
      Pamela Chu
      1
      3
      2

And here is my snippet:

function sortTableRows(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc"; 
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;      
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
function sortTableCols(n) {
  alert("This should sort cols by row #"+n+" values");
}

  /* Just for beauty */
  #myTable {
    border: none;
  }
  #myTable th {
    cursor: pointer;
    width: 5%;
    border: none;
    background-color: #e0e0e0;
  }
  #myTable tr td {
    border: none;
    border-bottom: 1px solid #aaa;
    text-align: center;
  }
  #myTable tr td:first-child {
    cursor: pointer;
    background-color: #e0e0e0;
    border-bottom: 1px solid #aaa;
    text-align: center;
  }
  #myTable tr:last-child td {
    border: none;
  }


  
    
      Name
      Col 1
      Col 2
      Col 3
    
    
      Alan Brado
      2
      3
      1
    
    
      Kevin Chuca
      1
      3
      2
    
    
      Pamela Chu
      3
      2
      1

lalengua · Accepted Answer

Update: See @sanxofon's answer. Is an improvement of mine.

No answers for the time being so I ended up solving the issue using this procedure:

Capturing table to matrix
Transpose matrix (flip axis)
Sort matrix by column (as normally)
Transpose matrix back (flip axis again)
Update matrix to table

I post this for any who lands here that may be interested in a solution.

Performance: I haven't tested it for performance, but as all process are done on matrix it depends entirely on the length of it and of its data. Works quite good and can be implemented on any table.

ToDo: Could be improved by adding listeners for row and column headers and removing onClick="sortTable(x,y)" from table.

Here is it:

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;
  else if (fin<0) fin = arr.length+fin;
  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 b[c].toLowerCase()) return 1;
        else if (a[c].toLowerCase() < b[c].toLowerCase()) return -1;
      } else {
        if (a[c].toLowerCase() > b[c].toLowerCase()) return -1;
        else if (a[c].toLowerCase() < b[c].toLowerCase()) return 1;
      }
      return 0;
    });
    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(col, i){
      return matriz.map(function(row){
        return row[i];
      });
    });
    // Sort
    newArray.sort(function(a, b){
      if (dirr<=0) {
        if (a[r].toLowerCase() > b[r].toLowerCase()) return 1;
        else if (a[r].toLowerCase() < b[r].toLowerCase()) return -1;
      } else {
        if (a[r].toLowerCase() > b[r].toLowerCase()) return -1;
        else if (a[r].toLowerCase() < b[r].toLowerCase()) return 1;
      }
      return 0;
    });
    // Transpose back
    matriz = newArray[0].map(function(col, i){
      return newArray.map(function(row){
        return row[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];
    }
  }
}

/* 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;
  }

Cheers!

HTML table sortable by ROW instead of COLUMN with JavaScript?

Answers (2)

Related Questions