Interactive Table Tools

If you have long or complex data tables on your site, you can add interactive tools that help people view and manipulate the data. These tools are only available in the Meerkat theme.

Sorting

Adding table sorting makes the column headers of your table clickable (see arrow outlined in green below). Clicking the column header once will sort the table data by the values in that column from from A-Z, and clicking again will reverse the sort order, from Z-A.

Pager

For very long tables, you can add a pager (outlined in red below). Viewers can choose the number of rows to view at one time, and click the page buttons to navigate through the pages.

Filter

Adding a filter (outlined in orange below) lets a viewer type in a search term, and see only rows in your table that contain the term.

table-tools

Demo

The table below has all 3 tools (sorting, filter, pager) added to it- try them out!

Animal Genus Species
Wolf Canis lupus
Fennec Fox Vulpes zerda
Golden Jackal Canis aureus
Coyote Canis latrans
Maned Wolf Chrysocyon brachyurus
Cerberus Canis polycephalus

Create the table

Create a table that contains a <thead> section for the header cells (<th>), and a <tbody> section which contains the data cells (<td>).

Give the table element a CSS class of ‘tablesorter’. You may also use the ‘data’ CSS class for styling purposes.

Sample HTML for a correctly set up table is shown below.

<table class="data tablesorter">
<thead>
<tr>
<th>Animal</th>
<th>Genus</th>
<th>Species</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wolf</td>
<td>Canis</td>
<td>lupus</td>
</tr>
<tr>
<td>Fennec Fox</td>
<td>Vulpes</td>
<td>zerda</td>
</tr>
<tr>
<td>Golden Jackal</td>
<td>Canis</td>
<td>aureus</td>
</tr>
<tr>
<td>Coyote</td>
<td>Canis</td>
<td>latrans</td>
</tr>
<tr>
<td>Maned Wolf</td>
<td>Chrysocyon</td>
<td>brachyurus</td>
</tr>
<tr>
<td>Cerberus</td>
<td>Canis</td>
<td>polycephalus</td>
</tr>
</tbody>
</table>

Add the tools

You’ll need to use the [wms_javascript] shortcode to add the tools to your table. Insert one of the shortcodes below anywhere in your page/post.

Sorting only:

[wms_javascript script="tablesorter"]

Filter & sorting:

[wms_javascript script="tablesorter-filter"]

Pager & sorting:

[wms_javascript script="tablesorter-pager"]