Make sorting tables

Sometimes you might need a table in your documentation that should be easily sortabale by one column or the other. Here's how you can achieve this in ClickHelp.

Preview

You can click on the column headings (first row cells) to sort columns in ascending or descending order.

How to implement

You will need sort-table.js - a script that makes sorting possible. You can get the latest version either from the original author's GitHub page (along with the demo file) or by downloading it directly from our server: 

download sort-table.zip 

1. Upload the script to your ClickHelp portal (via Scripts tab of the File Manager).
2. Add the script to the necessary projects by adding the file in the "Project scripts" section of the Basic Settings.
3. Add a table. You must have the <thead> section with <th> elements present, otherwise, the script won't work
4. Add the js-sort-table class to your table for the script to work.
5. Add the js-sort-Xclass to the <th> tags to correctly process cell values. Here is a list of supported classes and, therefore, sorting methods:
   • js-sort-string — used for sorting pretty much any text in the alphabetical order
   • js-sort-number — sort by number.
   • js-sort-0 — zero-based number of the sorted column 
     
   • js-sort-date — sort by date 
     
   • js-sort-last  — sort by the last word 
     
   • js-sort-asc — ascending sort
   • js-sort-desc — descending sort

HTML Code

Here's how the table you saw in the "preview" section looks like "from the inside"

<table class="js-sort-table CHTable" style="width: 400px;">
  <thead>
    <tr>
      <th class="js-sort-string" style="width:50%;">Strings</th>
      <th class="js-sort-number" style="width:50%;">Numbers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>82156</td>
    </tr>
    <tr>
      <td>Coconut</td>
      <td>57</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>532</td>
    </tr>
    <tr>
      <td>Zimbabwe</td>
      <td>1124</td>
    </tr>
  </tbody>
</table>