6.8. Sortable Table

Provides client-side sorting functionality. If browser supports language argument to the String.prototype.localeCompare() function, the ordering will be locale aware. If the argument is not supported or if the supplied argument is not a valid locale the ordering will not be locale aware.

To ensure keyboard accessibility, remember to add tabindex="0" to all sortable column headers.

If a given cell has the attribute data-sort-value="someValue" specified, the value of this element is used as opposed to the value of the cell.

To initialize the component taking into account that the data is already sorted when the page is loaded, a .sorting-asc and .sorting-desc can be added to the relevant <th> to indicate the column and direction of the default sorting.

JavaScript Required

Script sortable-table.js must be included.

Component Dependency

Usage

Data-API

To use sortable-table via data-API, data-toggle="sort" has to be defined on the <th> that should trigger sorting on click.

In order to utilize the navigation feature, data-sort-navigation has to be defined on the <table> element and it must contain a string that, when evaluated as a jQuery selector, will return a jQuery object referencing the navigation container DOM element.

Forcing sorting of a given table on page load (and potentially generating group headers and navigation) can be achieved by specifying the attribute data-sort-onload on the appropriate <th>. This attribute takes the value of either asc or desc to indicate the sorting order.

JavaScript

Options
Name Type Default Description
sorted-th string Mandatory. A jQuery object with reference to the <th> DOM element in the column by which we are to sort the table.
sort-direction string If the column is already sorted it defaults to the reverse order. If it is not sorted, it defaults to asc. Optional. Defines the direction by which to sort. Accepts values asc or desc.
sort-navigation jQuery object Optional. A jQuery object with reference to the DOM element where the group quick links are to appear. The elements are grouped according to the value of th data-sort-group="someValue" attribute of each cell. For this to work correctly, all cells in a given column either must or must not posses the data-sort-group attribute.
Methods
$().sortableTable(options)

Initiates a sortable table if needed and performs the sorting according to the options object.

Events
Event Type Description
sort.bui.sortableTable Fired as soon as the sort method is called.
sorted.bui.sortableTable Fired as soon as the sort method is finished executing.