Sorting tables

A prescriped solution to sort your tables

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

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.

Sorting tables HTML

<p>For user-interactive and programatic table sorting, we integrate <a href="http://mottie.github.io/tablesorter/">Tablesorter</a>.</p>
<p>To use the plugin you will need to:</p>
<ol>
  <li>Include <code>/libraries/tablesorter/jquery.tablesorter.min.js</code>. The file is not part of the default EBI Framework JS config.</li>
  <li>Add the <code>.tablesorter</code> class to your table.</li>
  <li>Ensure your table has a <code>thead</code> and <code>tbody</code>.</li>
  <li>Give your table a CSS ID.</li>
  <li>Invoke the plugin with JS, ala: <code>$(&#x22;#table-sort-demo&#x22;).tablesorter(); </code>
</ol>

<p>Here's a quick demo. Note that is supports the responsive table techniques.</p>

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

<p>Tip: if the plugin isn't detecting your data type correctly, try telling the plugin of your data type and include Tablesorter's optional <code>jquery.metadata.js</code>.</p>

<!-- 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>
<script type="text/javascript">
  window.addEventListener('load',function() {
    $(document).ready(function() {
        $("#table-sort-demo").tablesorter();
    });
  });
</script>

Sorting tables Style

You can find the original source of the CSS as .scss

Sorting tables

Have a use case that's not covered?

Please open an issue in the tracker. We'll update this living pattern library with your feedback.