Sortable tables

Summary

Sortable Tables adds on to the core Tables component, allowing the table to be sorted by the header row. Some custom sorting options are available.

Status

Examples

Code

Setup

To make a table sortable, you must add the aui and aui-table-sortable CSS classes to the table and also define the <thead> of the table.

Sortable Tables are determined at page load, so if a table is added to the DOM after page load then it must be declared as sortable in your own code.

Default sorting behaviour

Sortable tables attempt to automatically detect the best sorting method for a given column. The sorting method can be explicitly set by adding a CSS class to a column's th element. Most of the sorting methods are provided by the jQuery tablesorter plugin. Some custom sorting methods provided by AUI include:

• aui-table-column-issue-key: Sorts JIRA issue keys so that they are in the correct ordering by project and then by issue id.
• aui-table-column-unsortable: Disallows any sorting of this column.

Custom sorting behaviour

Through the jQuery tablesorter plugin API, it is possible to define your own sorting behaviour. The following is an example of how you might order a "Priority" column using a non-alphabetical sort order.

JavaScript API

Set table as sortable

To set a table as sortable, you must pass a jQuery object for the table into the AJS.tablessortable.setTableSortable function.

Assigning a table as sortable multiple times can result in undefined behavior. For example, if a sortable table is present on page load and then you assign it as sortable via the AJS.tablessortable.setTableSortable function, it is unlikely to work as expected.

Refresh sorting capability after data update

To refresh sorting cache after updating the table data you must trigger update event on given table.