Sorting HTML table with JavaScript
Just revisiting an old solution, I thought I'd give it a facelift for it's ~5 year anniversary!
- Plain Javascript (ES6)
- Does alpha and numeric sorting - ascending and descending
- Works in Chrome, Firefox, Safari (and IE11, see below)
Quick explanation
- add a
clickevent to all header (th) cells...- for the current
table, find all rows (except the first)... - sort the rows, based on the value of the clicked column...
- insert the rows back into the table, in the new order.
- for the current
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;const comparer = (idx, asc) => (a, b) => ((v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2) )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));// do the work...document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => { const table = th.closest('table'); Array.from(table.querySelectorAll('tr:nth-child(n+2)')) .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc)) .forEach(tr => table.appendChild(tr) );})));table, th, td { border: 1px solid black;}th { cursor: pointer;}<table> <tr><th>Country</th><th>Date</th><th>Size</th></tr> <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr> <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr> <tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr> <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr> <tr><td>USA</td><td></td><td>-6</td></tr></table>IE11 Support (non-ES6)
If you want to support IE11, you'll need to ditch the ES6 syntax and use alternatives to Array.from and Element.closest.
i.e.
var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) { return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2); }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));}};// do the work...Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() { var table = th.parentNode while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode; Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)')) .sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc)) .forEach(function(tr) { table.appendChild(tr) }); })});Comparer function breakdown
For the sake of brevity, I compacted the comparer() function. It's a little complex/hard to read, so here it is again exploded/formatted/commented.
// Returns a function responsible for sorting a specific column index // (idx = columnIndex, asc = ascending order?).var comparer = function(idx, asc) { // This is used by the array.sort() function... return function(a, b) { // This is a transient function, that is called straight away. // It allows passing in different order of args, based on // the ascending/descending order. return function(v1, v2) { // sort based on a numeric or localeCompare, based on type... return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)) ? v1 - v2 : v1.toString().localeCompare(v2); }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx)); }};
I wrote up some code that will sort a table by a row, assuming only one <tbody> and cells don't have a colspan.
function sortTable(table, col, reverse) { var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array i; reverse = -((+reverse) || -1); tr = tr.sort(function (a, b) { // sort rows return reverse // `-1 *` if want opposite order * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test .localeCompare(b.cells[col].textContent.trim()) ); }); for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order}// sortTable(tableNode, columId, false);If you don't want to make the assumptions above, you'd need to consider how you want to behave in each circumstance. (e.g. put everything into one <tbody> or add up all the preceeding colspan values, etc.)
You could then attach this to each of your tables, e.g. assuming titles are in <thead>
function makeSortable(table) { var th = table.tHead, i; th && (th = th.rows[0]) && (th = th.cells); if (th) i = th.length; else return; // if no `<thead>` then do nothing while (--i >= 0) (function (i) { var dir = 1; th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))}); }(i));}function makeAllSortable(parent) { parent = parent || document.body; var t = parent.getElementsByTagName('table'), i = t.length; while (--i >= 0) makeSortable(t[i]);}and then invoking makeAllSortable onload.
Example fiddle of it working on a table.
Nick Grealy's accepted answer is great but acts a bit quirky if your rows are inside a <tbody> tag (the first row isn't ever sorted and after sorting rows end up outside of the tbody tag, possibly losing formatting).
This is a simple fix, however:
Just change:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => { const table = th.closest('table'); Array.from(table.querySelectorAll('tr:nth-child(n+2)')) .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc)) .forEach(tr => table.appendChild(tr) );to:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => { const table = th.closest('table'); const tbody = table.querySelector('tbody'); Array.from(tbody.querySelectorAll('tr')) .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc)) .forEach(tr => tbody.appendChild(tr) );