This is an example of how we can use JavaScript to sort the rows of a table. We just need to follow these steps:

  1. Set the class attribute of the tables with 'sortable'. You can either define that class in a CSS file or a <style> tag;
  2. Place a script tag referring to jrSortTable_1.3.js just before the closing body tag </body> (take a look at the source of this example):
    <script type="text/javascript" src="path/jrSortTable_1.3.js"></script>.

The code tries to guess the value type (number, date, string) of each column based on its first cell, in order to set a sorting method for the values in that column. However, as it can be tricky to detect the correct date or currency formats, we can specify a certain method for a column by setting its class attribute with the name of one of the sorting methods:

Note: By default, the code expects JavaScript numbers with a period separating the decimal places or formatted as "9,999.99" (UK, USA, etc.). So, if we need to sort numbers formatted as 9.999,99 (comma as the decimal separator and period as the thousands separator), we'll need to set the class attribute of the TH element (column) with the corresponding sorting method (sortNumber_nonJS).

To see the code in action, click on any column header or footer. If you want to understand how the code works, use your browser developer tools to debug it. Please, feel free to email your comments and suggestions.

João Rodrigues (JR)

Number Currency
Currency (Intl)
Date (USA)
Date (UK)
Percent Mixed Text
Number Currency Currency (Intl) Date (USA) Date (UK) Percent Mixed String
-100 £ 31,756.87 GBP 31.756,87 04/29/2018 29/04/2018 23 % SW15 2AG UK
105 $ 947.45 CAD 947,45 10/25/2017 25/10/2017 9% H1J 1C3 Canada
-98 R$ 9,457.27 BRL 9.457,27 02/09/2017 09/02/2017 10% 22031-050 Brazil
98 € 13,921.00 EUR 13.921,00 03/25/2018 25/03/2018 15.6 % 75018 France
208 € 4,345.00 EUR 4.345,00 09/05/2018 05/09/2018 15.5% 08022 Spain
-20 € 3,257.00 EUR 3.257,00 04/09/2016 09/04/2016 11.1% 10719 Germany
20 $ 25,786.00 USD 25.786,00 05/01/2016 01/05/2016 25% 98128 USA

Make Model Vehicle Type Year Fuel Transmission Colour Parked overnight
Peugeot 406 LX Saloon 1997 Petrol Manual Maroon Public car park
Vauxhall Astra Hatchback 2006 Petrol Manual Black On the road
Fiat Stilo Hatchback 2005 Petrol Manual Silver Driveway
Citroen C4 Coupe 2007 Diesel Automatic Grey Private car park
Aston Martin Rapide Coupe 2009 Petrol Automatic Black Garage