Sorting tables

By Ken Hawkins

tables interactive Requires EBI Visual Framework 1.1.0, 1.2.0

A prescriped solution to sort your tables.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<table id="table-sort-demo" class="responsive-table tablesorter">
  <thead>
    <tr>
      <th class="show-for-small-only">Compact</th>
      <th class="show-for-large">Shown for large</th>
      <th>Counting</th>
      <th>Sandwich</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>Alpha long description.</td>
      <td>30,000,000</td>
      <td>Cheese</td>
    </tr>
    <tr>
      <td>Beta</td>
      <td>Beta long description.</td>
      <td>20,000,000</td>
      <td>Good quality mustard</td>
    </tr>
    <tr>
      <td>Gamma</td>
      <td>Gamma long description.</td>
      <td>10,000,000</td>
      <td>Bread</td>
    </tr>
  </tbody>
</table>

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



JS
window.addEventListener('load',function() {
  $(document).ready(function() {
      $("#table-sort-demo").tablesorter();
  });
});