Basics

EasyTable Pro allows users to click on a column heading and have the table sorted by the values in that column. Please note EasyTable also lets you sort the entire table prior to display as well as records on the current page.

How do you turn it on?

The EasyTable components support Joomla's standard preference model, ie. you can set a preference at the global component level, the menu level or the table level.

Global preferences are set via the Parameters button is the EasyTable Pro Manager, these Global component preferences can be over-ridden when you link to the component through the Joomla menu system. The preferences set at the menu level can in turn be over-ridden at the individual table level.

To make a table sortable in the front end you must set the "Make Table Sortable" preference to "Yes" at the level you want. So if you want all tables to be sortable you can set it at the component level via the Parameters button, all menus linking to tables and all tables at that point will by default inherit that setting.

How does it work?

When the preference is set to "Yes" the EasyTable Pro component adds a javascript file to the page the table is displayed on, the file is added via a script reference similar to the one below.

The Javascript only sorts records that are on the current page, when a column heading is clicked the column will be sorted into Ascending order first, the next click on the same column will change it to a Descending order.

This Javascript file contains a function SortableTable() which the EasyTable component adds to the page after the table. It is this function that performs the sorting.

The sorting works best on text, numbers and date columns. Advanced date, number and currency formatting for column data can result in values being sorted alphabetically rather than in the order expected. Post the 1.0 release the sorting functions will be revisited to try and address the sorting of formatted data.

In addition to sorting the records into an ascending or descending order the function adds a CSS class to the table heading that allows you to style the header appropriately (read the FAQ for more information).