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
Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use