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
.tablesorter
class to your table. - Ensure your table has a
thead
andtbody
. - 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.