Create Stunning Responsive Tables with wpDataTables
Creating tables in WordPress is easy. There are traditional ways to add tables to WordPress with code, but by far the most convenient way to build a table (or chart) is with the wpDataTables WordPress plugin. It makes it extremely easy to import your table from various external sources, style it to your liking and add it to your website.
Basic HTML Tables
You can add tables to WordPress using standard HTML table tags. They’re fairly straight forward and use the following basic structure (just remember to enter them in the “text” tab when creating your post):
<table style="width: 100%;"> <tbody> <tr> <th style="width: 33%;">First</th> <th style="width: 34%;">Second</th> <th style="width: 33%;">Third</th> </tr> <tr> <td>Jack</td> <td>Jackson</td> <td>25</td> </tr> <tr> <td>Jane</td> <td>Jenson</td> <td>30</td> </tr> </tbody> </table>
Which will result in the a table that looks similar to this (note – any styling for th header cells will depend on your theme):
Using HTML to create your tables will work and is fine if you only want to add one or two tables to your site. But if you are going to be creating tables often there are a few problems you’ll likely run into.
- You’ll need to learn HTML coding for advanced options
- Adding HTML is time consuming and will hinder your productivity in the long run if creating many tables
- This method is severely limited in layout and design (unless you are an advanced developer)
If you’re using WordPress, we can safely assume that 1) you’re using the latest version of WordPress, and 2) your theme is responsive. When you use the HTML table tag to insert tables in your WordPress site, you’ll spend a lot of time adjusting layout.
Your site might be responsive, but your tables aren’t.
This would naturally break the responsive property of your site. Inserting data to your site can also be a problem. Spreadsheet processing software like Google Spreadsheets or Microsoft Excel has a lot of import tools to grab data from a database. But when you’re typing each and every character – it’s not very productive.
Earlier we identified three major issues inserting tables with HTML in WordPress. Don’t worry – there is a much better way to create tables. So let me introduce a plugin that will do away with all the aforementioned problems, and bring a host of useful features.
Create Better Tables with wpDataTables
To create tables with WordPress we highly recommend wpDataTables. This fully responsive premium plugin makes it easy to create, customize and manage tables and charts in WordPress – no coding required. Just install and start building tables and charts! Trusted by over 14,300+ people (and previously named it one of our WordPress plugins of the month) it’s simply one of the best ways to add tables to your WordPress powered website in our humble opinion.
More About wpDataTables View Live Demo
You can learn more about wpDataTables on Themeforest by clicking on the buttons above, or keep reading to find out why we think it’s so awesome.
Multiple Data Sources
Depending where you prefer to store your data, wpDataTables allows you to import from many different sources. Choose from Excel, CSV, Google Doc, XML, JSON, Serialized PHP Array or a MySQL query to import data. There are also options to create a new table manually, link to a live data source (which till dynamically update your table when you load it on a page) or generate a custom query using a GUI (graphical user interface) tool.
The MySQL query is my personal favourite as it lets me to view and modify data from a proper database. wpDataTables supports separate database connections for MS SQL and PostgreSQL databases, and an option to add more than one separate database connection. Tables can pull data from multiple databases and servers. If you have a team of developers working on a table project this would make collaboration super simple (more on this later)!
Enhanced Customization and Responsive Layout
Designing your table has never been easier. With a few checkboxes and a couple of color selections, you can design the plugin to complement your site’s theme. There are also new modern table skins to choose from, including purple, dark and aqua. Take a look at the awesome design features the plugin has to offer:
There are also built-in options for interface language, time/date formatting, alignments, custom JS/CSS and more. Oh and did I mention that the plugin is mobile responsive too? You can set just how much space the table will consume, no matter the size of the screen!
Filters for Efficient Searching
When creating a new table (or editing an exiting one) you do have the option to enable filters. With filters, you can reduce your result set with only the items you want. This incredibly useful for querying a large database. For example, if you have a library database, then filtering results based on the subject would help you find your book much faster.
However, since each time you edit a filters, it increases the number of computations to be done by the database – thereby increasing server pressure. Therefore, you have the sweet option of disabling the filters altogether.
Edit MySQL Database from Frontend
wpDataTables also allows you to directly edit your databases from the frontend – i.e. from the live WordPress site. Simply enable the option under the “Editing” tab when configuring your table. You can even set which users are able to edit the values in the database – leaving it open for all users to submit or base access on their user role.
Visualize Data using Charts
Visualization is a far effective attention grabber than usual text. After all, seeing is believing. It increases our rate of data intake, compared to traditional reading. For example, when you’re viewing a pie chart of an annual income report, you will almost always interpret the data faster when compared to reading the data for all twelve months.
wpDataTables helps you create dynamic charts (via Google Charts, HighCharts or Chart.js) to visualize your table’s data. This is specially useful for tables with a lot of numeric data, for example bloggers sharing their monthly income reports.
Most plugin developers will give you one year of updates and support. However, this developer has included lifetime updates and six months of support for a one-time fee (note – for continued support you will need to renew your license).
The developer leaves no stone unturned when it comes to explaining how to use wpDataTables. There is extensive online documentation plus video tutorials to help you grasp the full capability of the plugin!
This tells us 2 things:
- The developer cares about their customers – so that they come back to buy the product
- A knowledgeable customer = less hiccups = lower support tickets = happy customers
Also, with lesser support tickets, the developer can devote more time towards improving the plugin and introducing newer features!
How to Build a Responsive Table with wpDataTables
Now that you know why we think wpDataTables is a great plugin, let’s show you how to use it! There are exactly three steps for creating a new table using the wpDataTables plugin.
1. Install wpDataTables
I know this should be an obvious one, but you will first need to install wpDataTables. Because this is a premium plugin it must be purchased and downloaded from CodeCanyon (just go to your purchases and download the “Installable WordPress file only”).
Then just follow the onscreen instructions to finish installation and activation.
2. Create Your Data Table
With the plugin active you should have a brand new “wpDataTables” menu item. Click on it, then click the big blue Add New button to get started creating a new table.
Your first option will be how you want to create your table. There should be five options presented. We selected the option to import from a CVS since we had a simple spreadsheet we wanted to use. Then after clicking Next you’ll be prompted to select and upload your file.
Once you upload your data source you’ll be able to enter a custom table name as well as use options to edit, add or delete columns and rows. Then click the green button to finish creating your table.
You’re in the home stretch now! From this page you can tweak additional settings for your tables (optional). Use the “Display” options to enable responsive collapsing on smaller devices, add a horizontal scrollbar, limit table width, etc. Go to the “Editing” tab to enable front-end editing, or enable the tables tools (print, copy or export quick links). Best of all you can preview your edits live as you make tweaks. Just remember to click on the Save (or apply) checkmark if you do make any changes.
Once you’re done copy your table shortcode from the top of the screen because you’ll need it for the third and final step.
3. Insert Your Table Into a Post or Page
To use your table all you have to do is paste the shortcode into the content on a post or page (like in the image above). This shortcode will render on the front-end of your website depending on how you’ve styled your table:
In ours you can see that we’ve enabled the table tools (to print, export, etc), filtering and front-end submissions. But that’s it – your table is ready to go!
Want to build a Chart?
You can also build charts using wpDataTables. After creating your table click on the “Create a Chart” to start.
From here give your chart a name, select a style (there are tons to choose from) and continue to the next screen where you’ll select the data table you want to use to create your chart.
After selecting the table to use as a data source assign your table columns to the parts of the chart. Depending on the chart you choose there may be a minimum number of values required. In our example we chose a bar chart, which required at least two columns for the chart (to be the bars). You can also use the number range slider for filtering float and integers columns. Once you’ve sorted your columns move on to the next step.
Now for the fun part. Use the options to style and add features to your chart. There are tons of options for responsive width, height, backgrounds, borders, fonts, labels, colors, show/hide title, tooltips on hover and more.
Once you’ve finished editing, click next and copy your chart shortcode. Just paste it into your post or page content, save and head to the front-end of your website to see your chart!
As an added bonus wpDataTables includes a unique option to choose whether you want to keep your tables even if you delete the plugin (by default the tables will be saved in database after deleting the plugin).
Add More WordPress Table Features
Want more? There are a number of extensions and add-ons for wpDataTables to add even more table and chart options for your WordPress site.
Powerful Filters: Set cascading (left-to-right compounded) filters, faceted filtering (apply multiple filters to narrow results), disable table view until the user has selected filters, add a live search features and more. Just enable and configure the option when setting up your table.
Report Builder: Generate your own custom Word or Excel reports based on data tables. This is especially helpful when allowing front-end editing by users (so as you collect data you can re-run and print reports) or if you need to regenerate reports regularly (like monthly invoices or timecards).
Formidable Forms: Add support for the popular Formidable Forms Pro form builder. Use Formidable Forms to create a data collection form (like a survey) then auto generate a table based on user submissions, with each field converted to a column.
Gravity Forms: Integrate Gravity Forms submissions with wpDataTables to automatically create WordPress tables based on user data. The extension adds a new data source when creating your table so it’s easy to link to your specific Gravity Form and visualize data. And there is even easy front-end editing for Gravity Forms-based tables (with the Gravity Forms integration add-on).
Try wpDataTables for Yourself
Most developers give you a live demo to give you a feel of what the plugin can do. But they only show you the output, i.e. the “frontend” view – which is based on pre-determined inputs This is where most plugin live demos fall short – they don’t give you access to the plugin’s settings and tools – i.e. the backend.
wpDataTables however offers you a full sandbox on their demo where you can try-before-you-buy. All car dealers do this – the infamous test drive. Via the sandbox you can test the plugin’s features to your heart’s content, and view the output in realtime.
Want to download a copy to test out on your own installation? wpDataTables does offer a lite version you can grab from the WordPress.org repository. It doesn’t have all the awesome, premium features we covered above but it’s a great way to see if the plugin might be the right solution for your needs.
And If you like it, you can go ahead and buy it with complete peace of mind. Why? Because you’ve already tested and used the product.
wpDataTables is one of those indispensable plugins for WordPress sites dealing with enormous amounts of data. Whether you’re creating a school project or the company’s annual report, tables and their visualization play a vital role in data representation.
Get wpDataTables for WordPress
Have you tried wpDataTables? Or do you have any questions about what this plugin can do? Leave a comment below – we’d love to hear from you!
I tried to buy this plugin but it didn’t go beyond the sign-in window. i populated all fields and pressed “submit”” but it did go anywhere. Please hep me. can we get in in chat room to make sure this works?
If you need some extra help Jose, please contact the actual plugin developer from CodeCanyon.
never mind guys. I just bought it, thanks.
This Jose again. I downloaded the zip file and uploaded it as plugin and i got this: “The uploaded file exceeds the upload_max_filesize directive in php.ini.”
Please help, send me a email
If you Google that error you will find tons of guides out there on how to fix it, this isn’t an issue with the plugin, but rather with your current setup.
Can you please help me.. i want to use images in table .. which one plugin i use to images responsive.. Please reply me ..ASAP..
Do you think that it will work with this table? The cells contain HTML, images and some plugin shortcodes – which are currently working using Websimon wordpress plugin.
I think so, but I would recommend contacting the plugin author just to be 100% certain! 🙂
Gonna try this one now. seems like a better option, lets try and know.
Thanks for the sharing !
Any way to use and make images responsive in table?
Yes – wpDataTable supports image columns so you can include them in your responsive tables 🙂
Aww thanks, I think it’s the easiest way to insert a table.