Making your tables sortable

« Return to page index

In this tutorial, Helge Tesdal from Plone Solutions will show you how to make your tables sortable with Javascript - just by using a simple declaration.

Making tables sortable using Javascript

Plone includes a handy javascript to make tables sortable in the browser. The javascript is included in the standard plone headers, so you don't have to touch javascript at all. To make your tables sortable, all you have to do is follow these easy steps.

Get the table class and id right

To be sortable, a table needs to have its class set to listing, and to have an unique id. Ids should be unique anyway: 

  <table class="listing" id="uniqueid">

Get the table structure right

You have to use thead and tbody to contain headers and cells.

A complete sortable table is shown below: 

  <table class="listing"
         id="sortable">
    <thead>
      <tr>
        <th>Table header</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>

What if I don't want to sort the table?

If you don't want to sort your table, but still want to use the listing class for layout, the simplest thing to do is not giving the table an id: 

  <table class="listing">

or you could add nosort to the table class: 

  <table class="listing nosort" id="uniqueid">

or adding nosort class and removing the unique id: 

  <table class="listing nosort">

What if I don't want certain columns to be sortable?

Set the table header class to nosort in the table header of the column you don't want to sort: 

  <th class="nosort">

Can I have more than one sortable table on a page?

Sure you can. That is why the id of each table has to be uniqe. All tables of class listing with unique ids will be sortable.

Make tables sortable in Plone 2.1

Plone has a "Safe HTML" transform that filters the thead element in tables, making it impossible to create sortable tables when editing your content. Fortunately this is easy to fix.

  • Go to the 'site setup' and click the Zope Management Interface.


  • Find the portal_transforms in the list of content and tools.

portal_transforms

  • Once in the 'portal_transforms', go to the 'safe_html'
  • In there, add 'thead' and '1' to the table of valid HTML. 

thead

  • After you save it, restart your zope.  You should have sortable tables!