[Guide Tip] Add sorting to your tables in Guide | Community
Skip to main content

[Guide Tip] Add sorting to your tables in Guide

  • January 10, 2020
  • 12 replies
  • 0 views
A
You can add sorting to your HTML tables in guide using the Jquery TableSorter plug-in. Although this script includes many options and customizations, only basic sorting is described below for simplicity. 
 
I used the download and documentation provided on the following site: Sorting Tables with Tablesorter. There are many other resources as well. Review the documentation and download the tablesorter-master.zip. 
 
Now you can modify your Help Center.
  1. First, edit your theme and add the following plug-in assets:
    • jquery.tablesorter.js
    • theme.blue.css (or whatever theme you choose)

    To learn how to add assets, see Using your own theme assets. 

  2. Next you need to instruct Zendesk to use the tablesorter plug-in for all of your tables.
    1. Edit your theme. 
    2. Open the template document_head.hbs.
    3. Under your stylesheet links, add the following lines, and save.  
      <script src="{{asset 'jquery.tablesorter.js'}}"></script>

      <link rel="stylesheet" href="{{asset 'theme.blue.css'}}">

  3. Now under assets, open your Script.js file, and add the following: 
    //table sort
    $(function(){ $('table').tablesorter();
    theme: 'blue' });

    This will apply sorting to all tables.

  4. At this point, tables will sortable, but there will be no visual indication that the sorting is available. To add these visual cues, you must apply the tablesorter class your table as follows: 
    <table class="tablesorter tablesorter-blue">

    Notice the sorting arrows in the column headers. 

     

 
 

    12 replies

    Jennifer16
    • Jennifer16
    • January 10, 2020

    That is a really great tip, Amy! Thanks for sharing it!

    L

    I'm trying to reproduce table sorting in Guide and can only get the CSS stylings/ highlight-on-hover to render. The sort buttons and actions won't render. I've enabled display unsafe content, uploaded assets, and added the scripts to document_head.hbs. Does this still work today? Any advice? Thanks

    A
    • Amy24
    • Author
    • May 27, 2020

    Hi Lawrence,

    I think the problem is the Table class. Make sure that in your HTML source, you have set 

    <table class="tablesorter tablesorter-blue">

    If you do not, your table will look like this:

     

    After adding the class, it looks like this:

    The HTML of the table above is

    <table class="tablesorter tablesorter-blue">
    <thead>
    <tr>
    <th>Alph</th>
    <th>Numeric</th>
    <th>Date</th>
    <th>&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>b</td>
    <td>2</td>
    <td>5/12/2020</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>d</td>
    <td>1</td>
    <td>1/12/2019</td>
    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>

     

    S
    • Sempro
    • September 2, 2020

    Dear Amy,

    I have a question regarding step 3:

    Don't you mean the already implemented script.js file? I believe it isn't located in the asset folder.

    Thanks.

    S
    • Sempro
    • September 2, 2020

    The reason for the question is the fact that I don't seem to get the sorting function after having implemented all the abovementioned steps, see below image.

    A
    • Amy21
    • September 2, 2020

    @Thom Scholten

    Yes, you are correct. The script.js file is the default one that is not located in the assets folder.

    Alastair12
    • Alastair12
    • February 13, 2023

    As @sempro says above - this doesn't seem to work even when all the instructions are followed. There is a nice hover animation over each table row, however there's no sign of the sorting buttons or any sorting ability at all. Perhaps recent updates have killed this functionality? @amy21?

    A
    • Amy21
    • February 13, 2023

    @alastair12 This is still working in my help center, but I am using a custom theme, not Copenhagen. 

    Alastair12
    • Alastair12
    • February 13, 2023

    @amy21 we're on a custom theme too - I'm just uncertain what would cause the buttons to not appear given there is no other code relating to the tables in the HBS or js files...

    A
    • Amy21
    • February 13, 2023

    Hmmm... If you send me your code, I'll compare it to mine and look for differences. I'm guessing that the problem has to be in the styling somewhere

    Alastair12
    • Alastair12
    • February 14, 2023

    @amy21 I appreciate it - which bits would you like to see? The actual HC HTML or the underlying JS/HBS?

    Sam15
    • Sam15
    • July 18, 2025

    All - there is something additional which needs to be included which is not done by defauly using the Zendesk WYSIWYG editor. The tablesorter plugin requires a <thead>…</thead> structure to indicate which row of your table is the sortable header.  @amy24 's comment showing the source structure is correct.

     

    You can toggle this inside of a table using the WYSIWYG editor by:

    1. Highlight the row in the table WYSIWYG editor
    2. Click on the Row options button
    3. Toggle the button for Header Row
    4. Note: You will still need to apply the table class to the table using the source editor or replace your WYSIWYG CSS to reflect the CSS from tablesorter to do it automatically
    Terms & ConditionsCookie settingsAccessibility statement