For user-interactive and programatic table sorting, we integrate Tablesorter.
To use the plugin you will need to:
/libraries/tablesorter/jquery.tablesorter.min.js
. The file is not part of the default EBI Framework JS config..tablesorter
class to your table.thead
and tbody
.$("#table-sort-demo").tablesorter();
Here's a quick demo. Note that is supports the responsive table techniques.
Compact | Shown for large | Counting | Sandwich |
---|---|---|---|
Alpha | Alpha long description. | 30,000,000 | Cheese |
Beta | Beta long description. | 20,000,000 | Good quality mustard |
Gamma | Gamma long description. | 10,000,000 | Bread |
<!-- Include for table sorting -->
<!-- Note that we've loaded this with "defer", this technique may not be appropriate for your uses.
If not, load this JS after jQuery. -->
<script defer src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/tablesorter/js/jquery.tablesorter.js"></script>
Tip: if the plugin isn't detecting your data type correctly, try telling the plugin of your data type and include Tablesorter's optional jquery.metadata.js
.