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.
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.
So let us see how to install this plugin and then how to use it.
Install Easy Table Plugin.
- Log into your wordpress admin.
- Go to Plugins >> Add New.
- In the search box enter ‘Easy Table’ and search.
- Select ‘Easy Table’ from search results and click on the link ‘Install Now’.
- 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.
Enter data and and click File, Download as, and then select CSV (current sheet).
Open CSV in Notepad.
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.
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
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).
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.
Method 2: Using cell attribute
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.
Disable sort for any column
Look at the table below. Sort for third column is disabled here.
You can do this 2 ways.
Method 1: Add a table parameter ‘sort=,,false’.
Method 2: Add a cell attr ‘sort=false’.
Set index to table
For example see following table with auto index, start from number 2
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.
For example see following code shows how to add table parameter to create a table with specific width, style etc.
Following code shows how to use attribute in some cells.
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.