Sortable table

Ask a question Design guidelines

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

API status: general
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-table-sortable
AMD Module key: N/A
Experimental API: 5.1
General API: 5.8

Examples

Issue key
Name
Age
Description
TEST-12 Cannot sort tables 2 Table sorting should be allowed
WIN-87 Issue Page doesn't load in IE 7 When loading issue page on IE it doesn't show
DRINK-7 Vending Machine is empty 1 Blocker

Code

After including the web resource for sortable tables you can very easily assign a table as being sortable. You must define the classes "aui" and "aui-table-sortable" to the table and also define the <thead> of the table. The sorting method is detected automatically if no class is defined in the header, however some custom sorting methods 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.
AخA
 
<table class="aui aui-table-sortable">
    <thead>
        <tr>
            <th class="aui-table-column-issue-key">Issue key</th>
            <th>Name</th>
            <th>Age</th>
            <th class="aui-table-column-unsortable">Description</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>TEST-12</td>
            <td>Cannot sort tables</td>
            <td>2</td>
            <td>Table sorting should be allowed</td>
        </tr>
        <tr>
            <td>WIN-87</td>
            <td>Issue Page doesn't load in IE</td>
            <td>7</td>
            <td>When loading issue page on IE it doesn't show</td>
        </tr>
        <tr>
            <td>DRINK-7</td>
            <td>Vending Machine is empty</td>
            <td>1</td>
            <td>Blocker</td>
        </tr>
    </tbody>
</table>

Sortable Tables are determined at page load so if a table is included in the DOM after page load then it must be declared as sortable via your own javascript.

To set a table as sortable you must pass a jQuery object for the table into the AJS.tablessortable.setTableSortable function. This table must have the "aui aui-table-sortable" classes.

 
AJS.tablessortable.setTableSortable(AJS.$("#delayedSortedTable"));

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.