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.

Sorting

Adding table sorting makes the column headers of your table clickable (outlined 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.

Filter

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

Example table with sorting and filter tools highlighted

Demo

The table below has the sorting and filtering tools.

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>

 

Note: You no longer need to add a shortcode to your page content to enable the table tools. Adding the ‘tablesorter’ class to the table element will enable the tools.