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
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. |