The last time I tried adding a table to my WordPress blog, I ended up scrapping the whole thing and using a bullet-point list instead.
So many stunning WordPress themes come with the ability to create great looking tables. And sure, they may look good initially but you can’t do much with them.
Want filterable data? Nope.
Want the table to be mobile responsive? Nope.
Want to import data from a CSV? Not a chance.
Here’s the good news:
With the right plugin, you can create highly functional interactive tables. The sort of thing that allows you to display data that’s filterable.
Along with graphs and all sorts.
Sound good? Let’s take a look at how it can be done with wpDataTables.
What you will learn in this tutorial
- The process of adding an interactive and responsive table in WordPress, using data from Microsoft Excel (or any other spreadsheet tool).
This plugin lets you create beautiful tables without any HTML knowledge
wpDataTables is a premium WordPress plugin that makes the process of creating and publishing tables to your website a breeze. It’s lightweight, intuitive and gets the job done in a matter of minutes, leaving you with less code to wade through and more time to blog.
One of the key points about this plugin is that you don’t need any prior HTML knowledge to get it up and running. Everything is done within an easy to use settings page. To publish it’s simply a case of copying and pasting a shortcode and you’re good to go.
For bloggers and businesses, this is great news because it allows you to display lots of data in a succinct and easy to digest way.
You could even use it for:
- A product catalogue
- Comparison charts for products
- Price lists
- Data collection from users
- Sports results
- Tracking your progress for anything involving numbers (e.g. a blog income report)
The possibilities are endless.
Creating a table from start to finish: a step-by-step guide
Using the wpDataTables plugin to create beautiful, clear and fully functional tables on your WordPress website is simple.
Here’s how to get started:
Step 1 – Have your file ready
Below, I have created an Excel document example for a number of random expenses. This includes several columns such as date, payment method and cost.
Make sure you have your data displayed in a similar way, otherwise the plugin will struggle to define the columns in your table.
Step 2 – Create a new table
Navigate to the wpDataTables on the left-hand side of your WordPress Dashboard.
Clicking this link will bring you to the screen above. This is where you will create and add your new table:
After clicking the “Add New” button, you’ll see this screen. This where you’ll begin setting the parameters of your table, so that it functions and looks the way you want it to:
Step 3 – Define your table features
In the first three sections of the table setup page, you can do the following things:
- Create a title
- Select whether you want to show your table title on the page
- Select a type of input source for your table
These are your most basic table settings.
Click on “Upload File” and search for your document. The tables you can create can be as complicated as you need them to be.
As you can see, I’ve given my table a relevant title, selected the Excel file type from the drop-down box, and uploaded my file to WordPress.
Further down the page, you’ll come across further settings to customize your table:
- Responsive – Allows your table to display differently on desktops, tablets and mobiles
- Scrollable – Able you to scroll your table horizontally
- Hide table until page is completely loaded – Useful for slowly loading pages
- Advanced filtering – For displaying a filter below each column
- Filter in form – For a filter within the form itself
- Table tools – For options such as copy, save to Excel and save to CSV embedded within your form
- Enable sorting – This enables you to sort your tables
- Limit table layout – Limit the table’s width to 100% of the parent container
- Display length – Define how many entries are displayed on a page
By clicking “Preview” you can view your table and change any settings you feel necessary to get it looking how you require.
Once you’ve selected the options that best suit the type of table you wish to display it’s time to click the “save” button.
If you want to customize your columns further, once you have clicked “save”, you will be able to scroll down the page further for more options. The default settings are automatically generated, however with this you can change each column color, column and filter type (such as date, time and text).
Below, I added some colors and edited the column types to text, number, and string.
Step 4 – Save and copy shortcode
Once you’ve saved your table click “Close” and it will direct you back to the plugin’s homepage. You should now see your table you’ve created, the title and type of your table, the shortcode for inputting into your post or page and the option to duplicate it.
I want to display this table in a page, therefore I’d need to copy the shortcode and then navigate to the page I wish to edit.
Step 5 – Add shortcode to post or page
To add your table to a page, it’s really as simple as pasting your shortcode into the page editor. Select where on the page you’d like to display your table, paste your code and carry on crafting your content:
Step 6 – Publish
Once you’ve hit the publish button on your Page, your table should look something like this. As you can see, it’s clear, consistent, perfectly aligned and holds all of my data in an easy to navigate way:
The options across the top of the table will allow users to export the table contents in a variety of formats. You can also filter results easily on the front end of your site.
What other tables can you create?
You’re not just limited to simple CSV based tables however. WP Data Tables can display a wide range of data in multiple formats.
Here’s an example of a fully functioning, responsive and editable table with multiple columns and options. You can play around with it for yourself here.
This table is MySQL based with filters to sort the content dependent on the user’s needs:
This PHP array based table is serialized and includes images – this adds a whole different dynamic and functionality that many ecommerce stores would find particularly useful:
You’re not limited to just CSV files either. WP Data Tables also allows the use of Excel-based files, enabling you to make use of the many specific features that comes with it:
Other wpDataTable features worth mentioning
- wpDataChart wizard – Allows you to transform your data into a graph or chart in a few easy steps. It currently supports 3 render engines – Google Charts, Highcharts and Chart.js. Find more documentation here.
- Conditional formatting – Allows you to highlight cells, rows, and columns based on its content. It is useful especially if the table completely numerical. Find more documentation here.
- Formula columns – Enables you to add a column which can be used to calculate a figure based on the numbers set out in other cells. Find more documentation here.
- Datetime columns – Used for cells which contain both dates and times. They will automatically appear in the format you set on the settings page. Find more documentation here.
- Sum/Totals row – Used for numeric columns, it allows you to calculate the sum of all the values. Find more documentation here.
- Report Builder – Is an add-on for wpDataTables. Report Builder instantly creates documents and spreadsheets filling your templates with actual data from your WordPress site. Find more documentation here.
Tables are a great way to display data. And when you add interactive features such as filtering, you make things a whole lot better for your website’s visitors.
I’ve walked you through how to create an interactive table in WordPress by uploading data from Microsoft Excel (or using any other spreadsheet tool). But, there’s so much more that’s possible.
You can even turn any of your tables into charts or graphs, and more.
Now, it’s time to get started on your own table – enjoy!
(Disclosure: this is a sponsored post but we only say good stuff when we REALLY mean it. Read more.)