How to create a sortable table in WordPress?

Last week,  I did a wordpress article that does a Speed comparison of Best ThemeForest WordPress Themes.

Initially I collected and compiled my data in a Google drive spreadsheet. Once data was ready, I wanted to present the data in a wordpress post, in a way that reader should be able to sort the data by any column(ascending or descending). So I was in search of a good plugin that can help me do so.

There are couple of good plugins for fancy table display in wordpress posts. But I chose Easy Table Plugin, based on its features as well as user ratings and reviews in wordpress.org site.

At the end of this article, we’ll also have a quick look at Posts Table Pro. This plugin is an interesting alternative to Easy Tables because instead of entering data to your WordPress tables manually, it automatically creates tables listing content already stored on your website.

Easy Table Plugin

easy-table-screenshot

 

Idea behind this plugin is to generate table data using CSV(Comma Seperated Values) format. With simple additions, you table data is ready for display in your wordpress page or  post or even inside a widget. Good thing is this is very simple to use and you don’t need advanced skills to use it.

Let me illustrate this with a simple table example here. Now, if you mouse over any column, a sort icon appears. You can click this icon to sort that column in ascending or descending order. So simple.

Year Make Model Length
1997 Ford E350 2.34
2000 Mercury Cougar 2.38

 

So let us see how to install this plugin and then how to use it.

Install Easy Table Plugin.

  1. Log into your wordpress admin.
  2. Go to Plugins >> Add New.
  3. In the search box enter ‘Easy Table’ and search.
  4. Select ‘Easy Table’ from search results and click on the link ‘Install Now’.
  5. Go to Plugins >> Installed Plugins. Find Easy Table and activate the plugin.

How to use Easy Table. A full example :

Generate table data using CSV(Comma Separated Values) format.

Table data in CSV format means text that is separated with a comma. You can create a CSV using a text editor such as Notepad, Microsoft Excel and Google Docs. Here we are using Google docs for demo purpose.
Open Google Drive >>Click on Create >> Spreadsheet.

Create CSV
Create CSV

Enter data and and click File, Download as, and then select CSV (current sheet).

easy-table-steps1
Generate table data using CSV(Comma Separated Values)format

Open CSV in Notepad.

Open CSV
Open CSV

Step 2: Embedd CSV data between <table> and </table> tags

Create a new post and embed table data. Actually you can embed csv data in 2 ways.

Method 1: Copy and paste CSV from notepad.

embedded
Embed table data

Look at the table data here. The entire table data is embedded between<table> and </table>.  First row is reserved for table titles(Note: you can also create table with no heading using table parameter.). And you see that next 2 rows in the example are data rows. So simple.

Method 2: Upload CSV file and insert the file path

Easy table
Embed file path

Look at the table data here.  Save and upload the CSV(Comma Separated Values) . Insert the location of your file  between<table> and </table>( See fig above).

The result:

Year Make Model Length
1997 Ford E350 2.34
2000 Mercury Cougar 2.38

Other Features

You can add additional parameter to this <table> tag and use cell attribute to control other features of table.

Table with initial sort order on load

You can control sort order on load in 2 ways. Add sort=”desc” or sort=”asc” to <table> tag.
Method 1: Using table parameter Table with initial sort order using table parameter. See the table example below. First column is sorted descending on load.

Year Make Model Length
1997 Ford E350 2.34
2000 Mercury Cougar 2.38
2010 Nissan Micra 4.38

Table with initial sort order
Table with initial sort order

Method 2: Using cell attribute

Initial sort order
Initial sort order

Table with first column descending, second column ascending
For example, the following table on load sort first column descending and then sort second column ascending.

Year Make Model Length
1997 Ford E350 2.34
1998 Maruthy Zen 3.38
2000 Mercury Cougar 2.38
2000 Nissan Micra 4.38
2000 Maruthy Zen 3.38
2000 BMW Micra 4.38

Table with initial sort
Table with initial sort

Disable sort for any column

Look at the table below. Sort for third column is disabled here.

no Item Kg Price
1 Orange 2 100.00
2 Grapes 1 75.25
3 Pinapple 5 130.00
4 Mango 8 250.00

You can do this 2 ways.
Method 1: Add a table parameter  ‘sort=,,false’.

table parameter
table parameter

Method 2: Add a cell attr  ‘sort=false’.

cell attr
disable sort by adding a cell attr

Set index to table

For example see following table with auto index, start from number 2

No.head1 head2 head3
2row1col1 row1col2 row1col3
3row2col1 row2col2 row2col3
4row3col1 row3col2 row3col3
5row4col1 row4col2 row4col3

 

initial sort order
initial Index

In addition to setting auto index to a table, you can give a title to that column and you can set width of that column.

auto index
auto index

Other features

For example see following code shows how to add table parameter to create a table with specific width, style etc.

 Adding table parameter
Adding table parameter

Following code shows how to use attribute in some cells.

attribute in cells
attribute in cells

Posts Table Pro

Alternative table plugin – Create instant WordPress tables with Posts Table Pro

As you can see, Easy Tables is a neat plugin that lets you display static data in a table on your WordPress site. Before we finish, I’ll tell you about another WordPress table plugin that lets you create instant tables without having to enter data manually.
Posts Table Pro works by generating tables of information already stored on your WordPress website. It’s a great alternative to Easy Tables if you want tables that will automatically update with the latest data. Here are some examples of websites that would benefit from this type of WordPress table plugin:
  • Index of blog posts or articles – It doesn’t take long for a WordPress blog to become so big that it’s hard for visitors to find your older posts. No one wants to scroll through multiple pages of posts! Use Posts Table Pro to create a blog post index or article directory, which will automatically update when you add a new post.
  • Document library or knowledge base – If you want to create a WordPress document library then you can create a ‘Documents’ post type and use Posts Table Pro to list your documents in a table view. Your visitors can either download the document directly from the table, or click through to a single page for each document. You can categorize documents and add filters to help customers find the documents they need. 
  • List of events or e-commerce products – Amazingly, Posts Table Pro can list any WordPress post type in a table. This opens the door to many other possible use cases. For example, if you’re using a WordPress events plugin or e-commerce plugin then you can list your events or products in a table layout too. 
The dynamic table plugin is easy to set up and comes with lots of options. There’s a detailed plugin knowledge base to help you configure your WordPress tables in any way you like. 


So we have seen how to use “Easy Table” plugin to create a nice sortable table. Have you created sortable tables using other plugins? Share your experience below.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*