A Sorted Table

Looking at plugins for jQuery used to make sorted tables left me a little disappointed - they were too big or complicated and in some cases their developers gave really bad implementation advice. Since I hadn't written a plugin for a while, I decided to make this my new little project, because it's fairly simple.

To make sure I kept to the best practice, and to encourage other developers to keep best practices as well, I began by setting constraints that meant the amount of JavaScript should be minimal, the page shouldn't suffer serious re-flow issues, the plugin should work using Progressive Enhancement principles, and it should be both accessible and promote accessibility rules.

To make certain the plugin follows Progressive Enhancement principles, I made certain the internal parsing function accommodates table that are marked up using a THEAD tag as well as those that have the header row as part of the table body (in a bare TR containing TH tags), and even (improperly) marked up tables that are missing a table header.

As part of the parsing process, event handlers are assigned to both click and keypress events and any with an event handler is given the role "button" and an ARIA label. These 'sort buttons' are also given a tabindex to ensure keyboard access.

The only content contained in the library is the ARIA label - sort by {column header or column index} - so making this support multiple languages shouldn't be too difficult if that is needed. To improve accessibility further, there is a visual sort indicator attached to each column header. This 'indicator' is a CSS triangle (pointing down or up) with the color governed by the color set for the column header text. Since there is a CSS rule set by the library, if you wish to override the color for the indicator, that also is relatively simple to do.

Now to the user interface (as the last part of this brief overview). Once the table is shown and the sortedtable is instantiated, the user may click (or press the spacebar or ENTER while focused) on any column header (or column if the header is not present) to set the sort order to a column. Depressing the SHIFT key while selecting a column adds the column to the existing sort order. This allows the user to do things like sort a table of individuals by a surname and a given name. Selecting a column that is already in the sort order toggles between an ascending order and a descending order.

On to the code...

First, write good markup. This is really important, because this is one of the things that differentiates good engineers from mediocre engineers. Your table should be semantic and accessible before any JavaScript is added to the page. If you want to specify a sort order for the table outside the script you'll be adding, you can use an attribute called data-sort. This attribute will be read when the table is parsed and will enable the library to sort the data without user interaction.

Second, add the JavaScript. This part of using the plugin is simple. You'll add the jquery base to your document with something like...<script src="http://www.cathmhaol.com/js/jquery-2.2.3.min.js"></script>...and then you'll add the jquery plugin with something like...<script src="http://js.cathmhaol.com/cjl-sortedtable.js"></script>.

Be sure this is not done in the HEAD section of your document. You shouldn't have any SCRIPT tags in the HEAD section of your document, but then you knew that already.

Next, instantiate the sorted table with something like $('.cjl-sortable').sortedtable(); or $('#mydata').sortedtable([{name:'Last Name'}, {name:'First Name'}]) inside a SCRIPT tag using all the normal jquery selector syntax.

That's all there is to it.

You can see a working prototype at http://prototypes.cathmhaol.com/sortedtable-jquery/ and you can get the plugin in my github jquery-plugins repo, where there is more complete documentation about how the plugin works.

Happy coding.