[Guide Tip] Add sorting to your tables in Guide

11 Comments

  • Jennifer Rowe
    Zendesk Documentation Team

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

    0
  • Lawrence Lane

    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

    0
  • Amy Gracer

    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>

     

    0
  • Sempro Technologies

    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.

    0
  • Sempro Technologies

    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.

    0
  • Amy Gracer
    Community Moderator

    @...

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

    0
  • Alastair Adams (CS)

    As Sempro Technologies 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? Amy Gracer?

    0
  • Amy Gracer
    Community Moderator

    Alastair Adams (CS) This is still working in my help center, but I am using a custom theme, not Copenhagen. 

    0
  • Alastair Adams (CS)

    Amy Gracer 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...

    0
  • Amy Gracer
    Community Moderator

    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

    0
  • Alastair Adams (CS)

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

    0

Please sign in to leave a comment.

Powered by Zendesk