Demonstration and documentation

For user-interactive and programatic table sorting, we integrate Tablesorter.

To use the plugin you will need to:

  1. Include /libraries/tablesorter/jquery.tablesorter.min.js. The file is not part of the default EBI Framework JS config.
  2. Add the .tablesorter class to your table.
  3. Ensure your table has a thead and tbody.
  4. Give your table a CSS ID.
  5. Invoke the plugin with JS, ala: $("#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.