Make HTML Tables Sort-Able with Sorttable Javascript

Last Updated on November 5, 2021

Even though the web-design community has slowly been gravitating away from html tables the last decade since CSS3 really took off along with HTML4 and ultimately HTML5, html tables still have some very good uses – their true original use; displaying tabular data, you know.. tables.

Here’s an example of some tabular data in the form of imaginary Employees, wages, and start/end dates.

Nice table right? Would be even nicer if columns could be sorted! For a long time the only way to achieve that would have been with url parameters and page refreshes. Who has time for that antiquated mess? Not Me.

Surely there is a better option for sortable HTML Tables?

If you haven’t already noticed, the table above has columns that can be sorted by clicking the column header. You should also notice that rather than sorting alphanumerically, the date and numeric columns all sort properly too.

So, How Does One Accomplish Such Wizardry with Sortable HTML Tables? With “Sorttable”!?

1. Download sorttable.js
2. Include sorttable.js, by putting a link to it in the HEAD of your page, like so:

3. Mark your table as a sortable one by giving it a class of “sortable”:

   
   Note that the library’s JavaScript file is called sorttable (two Ts), but the class you add to the table is sortable (one T).
   That’s it! Tables with the ‘sortable’ class will have sortable columns via column header clicks. For aesthetic reasoning you may want to add the following styles to your stylesheet, or something similar and to your liking:
    /* Sortable tables */ 
   table.sortable thead { 
   background-color:#eee; 
   color:#666666; 
   font-weight: bold; 
   cursor: default; 
   } 
   For advanced usage of Sorttable, check out the creator’s guide over at Kryogenix.org where you can also give the creator a tip for his valuable time and javascript!
   For WordPress users not wanting the hassle of using Kryogenix’ Sorttable Javascript tables, check out the free plugin TablePress at WordPress.org. TablePress allows you to make unlimited tables that are fully customizable and user-sortable, plus you can add even more WordPress html table wizardry with some of the available extensions. I use the free extension “Single Cell Content Shortcode” to show cells from one table in other tables using shortcodes. I also use the premium extension “Responsive Tables” to make my TablePress tables beautifully responsive! (Check out a TablePress example here.)
   John Snow
   John started JSnowCreations as a place to post random tech guides and product reviews. However, while shopping for his daughter’s first “big girl” bed in 2019 he learned about the hidden dangers of fiberglass in mattresses. Since then, John has made it his mission to expose as much hidden fiberglass in mattresses as possible. His ultimate goal is federal regulations that ban fiberglass from being used in mattresses, or at least a law that require it to be listed in the material tags.
   www.JSnowCreations.com
   Leave a Comment Cancel reply
   Comment
   Name
   Email
   Website
    Save my name, email, and website in this browser for the next time I comment.
    Notify me of follow-up comments by email.
    Notify me of new posts by email.