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:
- Include
/libraries/tablesorter/jquery.tablesorter.min.js. The file is not part of the default EBI Framework JS config. - Add the
.tablesorterclass to your table. - Ensure your table has a
theadandtbody. - Give your table a CSS ID.
- 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>$("#table-sort-demo").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.