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.

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.