Sort an HTML Table by Column Using Javascript
Sort an HTML table by clicking on the column table header using Javascript.
The approach:
Since a HTML table is like a 2d array, use the Sort an HTML Table by Column Using Javascript Javascript code to create a function that sorts by column passed as a parameter. First extract the innerHTML from the table cells and put them in a corresponding 2d Javascript array. Then sort the array. Use the reverse process to put the array values back into the innerHTML of the HTML table in the corresponding locations to the 2d Javascript array.
This is short, lightweight code by comparison to many other methods for sorting an HTML table.
/*
A few requirements for configuring the table:
1. The table must have id="sortable", i.e. <table id="sortable">
2. The table needs to have a table header, and the table header must have
onclick="sortBy(n)", where n is the column number starting with 0
i.e. <th onclick="sortBy(0)">Title of First Column</th>
*/
cPrev = -1; // global var saves the previous c, used to
// determine if the same column is clicked again
function sortBy(c) {
rows = document.getElementById("sortable").rows.length; // num of rows
columns = document.getElementById("sortable").rows[0].cells.length; // num of columns
arrTable = [...Array(rows)].map(e => Array(columns)); // create an empty 2d array
for (ro=0; ro<rows; ro++) { // cycle through rows
for (co=0; co<columns; co++) { // cycle through columns
// assign the value in each row-column to a 2d array by row-column
arrTable[ro][co] = document.getElementById("sortable").rows[ro].cells[co].innerHTML;
}
}
th = arrTable.shift(); // remove the header row from the array, and save it
if (c !== cPrev) { // different column is clicked, so sort by the new column
arrTable.sort(
function (a, b) {
if (a[c] === b[c]) {
return 0;
} else {
return (a[c] < b[c]) ? -1 : 1;
}
}
);
} else { // if the same column is clicked then reverse the array
arrTable.reverse();
}
cPrev = c; // save in previous c
arrTable.unshift(th); // put the header back in to the array
// cycle through rows-columns placing values from the array back into the html table
for (ro=0; ro<rows; ro++) {
for (co=0; co<columns; co++) {
document.getElementById("sortable").rows[ro].cells[co].innerHTML = arrTable[ro][co];
}
}
}
Example:
CSS
This CSS just gives the header a cursor pointer and sets some cell spacing and text alignment for the HTML table that is to be sorted.
table{text-align:left;}
th,td{padding:4px 8px;}
th{cursor:pointer;}
HTML
Given this HTML sample table, click on the column title to sort it.
<table id="sortable">
<tr>
<th onclick="sortBy(0)">Name</th>
<th onclick="sortBy(1)">Position</th>
<th onclick="sortBy(2)">Office</th>
<th onclick="sortBy(3)">Age</th>
<th onclick="sortBy(4)">Start date</th>
</tr>
.
.
.
etc...
Click headers to try it out.
Name | Position | Office | Age | Start date |
---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |