The basic table sorting functionality can be added simply by including sort-table.js anywhere in your document and adding CSS class 'js-sort-table' to all tables you want sortable. It works like this:
sort-table.js uses CSS classes to track its state. This allows for advanced styling by applying styles to the classes below.
Also demonstrated in the table below is the handling of
thead-less tables. If no
thead is found in
the table, one will be created and the first row will be added to it.
|1||js-sort-table||Apply this to the table to indicate sortability|
|2||js-sort-asc||This is applied to the table when sorting ascending|
|3||js-sort-desc||Likewise, this indicates descending sort|
|4||js-sort-0||The zero-based number of the sorted column|
|5||js-sort-string||By default, string sorting is used, making this optional|
|6||js-sort-date||When applied to a cell in the header, column will be interpreted as dates|
|7||js-sort-number||This tells sort-table to treat the column as numbers|
|8||js-sort-last||Set this class to a TH to sort by the last word in each cell|
|9||js-sort-input||If your table has form inputs, this allows sorting by their value|
There are a few supported data types, and adding new ones is very simple. To indicate the data type a column should be sorted as, add its CSS class to the column's header (TH) tag. String sorting is the default type. Below are demonstrated the included types.