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.
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"]
Main Social Nav