How to Make Sortable Tables

<table class=”sortable”>

Adding the “sortable” class to a <table> element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column’s value. Tables must use <thead> and <th> tags for sortable functionality to work. The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells:

  • Header cells – contains header information (created with the <th> element)
  • Standard cells – contains data (created with the <td> element)

You will need to build or edit the table with the heading codes in the  WordPress Admin Text/HTML View rather than the Visual view in order to add the class to the table element and add table heading elements.  For instance, to make the example table of the 2012 Gold Medal Divers below, the beginning of the HTML table code is:

<table class="sortable">
 <thead>
   <tr>
     <th>Athlete</th>
     <th>Age</th>
     <th>Country</th>
     <th>Gold Medals</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>David Boudia</td>...

Example sortable table–click on any of the header cells of this table to sort by that column:

2012 Gold Medal Olympic Divers

Athlete Age Country Gold Medals
David Boudia 23 United States 1
Chen Ruolin 19 China 2
He Zi 21 China 1
Qin Kai 26 China 1
Wu Minxia 26 China 2
Ilya Zakharov 21 Russia 1
Cao Yuan 17 China 1
Luo Yutong 26 China 1
Wang Hao 19 China 1
Zhang Yanquan 18 China 1

How to Make Searchable and Sortable Tables

<table class=”searchable sortable”>

Adding the “searchable sortable” class to a table tag also adds a search box to the table header. As the user types in the search box, table rows that do not have values matching the search input will be hidden. The rest of the code would be similar to the sortable table. Tables must use <thead> and <th> tags for sortable and searchable functionality to work. The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells:

  • Header cells – contains header information (created with the <th> element)
  • Standard cells – contains data (created with the <td> element)

For instance, to make the example table of the 2012 Gold Medal Swimmers below, the beginning of the HTML table code is:

<table class="searchable sortable">
 <thead>
   <tr>
     <th>Athlete</th>
     <th>Age</th>
     <th>Country</th>
     <th>Gold Medals</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>Michael Phelps</td>...

Example searchable and sortable table–enter “China” in the search box to search:

2012 Gold Medal Olympic Swimmers

Athlete Age Country Gold Medals
Michael Phelps 27 United States 4
Alicia Coutts 24 Australia 1
Missy Franklin 17 United States 4
Ryan Lochte 27 United States 2
Allison Schmitt 22 United States 3
Sun Yang 20 China 2
Nathan Adrian 23 United States 2
Yannick Agnel 20 France 2
Brittany Elmslie 18 Australia 1
Matt Grevers 27 United States 2
Cullen Jones 28 United States 1
Ranomi Kromowidjojo 21 Netherlands 2
Camille Muffat 22 France 1
Mel Schlanger 25 Australia 1
Emily Seebohm 20 Australia 1
Rebecca Soni 25 United States 2
Dana Vollmer 24 United States 3
Ricky Berens 24 United States 1
Brendan Hansen 30 United States 1
Jessica Hardy 25 United States 1
Chad le Clos 20 South Africa 1
Clément Lefert 24 France 1
Amaury Leveaux 26 France 1
Oussama Mellouli 28 Tunisia 1
Jeremy Stravius 24 France 1
Nick Thoman 26 United States 1
Ye Shiwen 16 China 2
Alyssa Anderson 21 United States 1
Alain Bernard 29 France 1
Rachel Bootsma 18 United States 1
Cate Campbell 20 Australia 1
Tyler Clary 23 United States 1
Claire Donahue 23 United States 1
Conor Dwyer 23 United States 1
Fabien Gilot 28 France 1
Dániel Gyurta 23 Hungary 1
Charlie Houchin 24 United States 1
Jiao Liuyang 22 China 1
Yolane Kukla 16 Australia 1
Breeja Larson 20 United States 1
Katie Ledecky 15 United States 1
Libby Lenton-Trickett 27 Australia 1
Florent Manaudou 21 France 1
Tyler McGill 24 United States 1
Matt McLean 24 United States 1
Ruta Meilutyte 15 Lithuania 1
Lauren Perdue 21 United States 1
Éva Risztov 26 Hungary 1
Eric Shanteau 28 United States 1
Davis Tarwater 28 United States 1
Cameron van
der Burgh
24 South Africa 1
Shannon Vreeland 20 United States 1