[Guide Tip] Add sorting to your tables in Guide

6 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
    Community Moderator

    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
  • Thom Scholten

    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
  • Thom Scholten

    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

    Thom Scholten

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

    0

Please sign in to leave a comment.

Powered by Zendesk