Sortable Table

This javascript function makes tables sortable as a progressive enhancement.

How to use

After including the javascript function, sortable tables need to be initialized with a reference to the table element using code similiar to the following:

(If you have more than one table, you will need to initialize each separately.)

All configuration is done in the HTML.

To make a column sortable, add an aria-sort attribute to the <th> cell within the <thead> which describes that column. Use one of the following three values:

• none - if column isn’t sorted by default (on page load), but should be sortable.
• ascending - column sorted in ascending order (smallest number first or A-A).
• descending - column sorted in descending order (biggest number first or Z-A).

When a sortable column header is clicked, by default the code will look at the text content of each of the cells within that column, and will attempt to convert it to a floating point number using parseFloat(), or otherwise will treat it a string.

If you have data which doesn’t parse to a float, but which shouldn’t simply by sorted as a string, then use a data-sort-value="" attribute to specify an alternate value to use for sorting, either as a number or a string.

For example:

• <td data-sort-value="2018-01-12">12 Jan 2018</td> – Dates
• <td data-sort-value="123456">12,3456</td> – Formatted numbers
• <td data-sort-value="9.2">£9.20</td> – Currency amounts

If your table has row-groups, using multiple <tbody> elements, then within each row-group, add the attribute scope="rowgroup" to the cell which represents the header for that group.

Examples