Create Stunning Responsive Tables In WordPress 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):

First Second Third
Jack Jackson 25
Jen Jenson 30

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

wpDataTables Responsive Tables Plugin

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

wpDataTables 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. 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. Take a look at the awesome design features the plugin has to offer:

wpDataTables Custom Styling

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

wpDataTables Sort & Filter Options

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 Allow Front-end Editing

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 Chart Styles

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.

Lifetime Updates

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).

Detailed Documentation

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:

  1. The developer cares about their customers – so that they come back to buy the product
  2. 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”).

Install wpDataTables Plugin

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.

wpDataTables Create or Import 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.

wpDataTables Manage Table

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.

wpDataTables Table Settings

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

wpDataTables Shortcode

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:

wpDataTables Front-end 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.

wpDataTables Create Chart

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.

wpDataTables Assign Data

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). Once you’ve sorted your columns move on to the next step.

wpDataTables Customize Chart

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!

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.

wpDataTables Advanced Filters

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).

wpDataTables Formidable Forms

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.

Try wpDataTables for Yourself

wpDataTables Live Sandbox

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.

View the wpDataTables Demo

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.

Get wpDataTables Lite

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.

Conclusion

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!

  • Updated on:
  • Posted Under: Reviews
Sourav
Post Author: Sourav

Sourav is a WordPress enthusiast, an avid gamer and a sitcom collector. His playlists include heavy metal, electronic, and new-age tracks. When he’s not online, he’s spending quality time with his friends and family. You can follow him on Twitter.

Disclosure
Got something to say? Join the discussion.
  1. 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?
  2. never mind guys. I just bought it, thanks.
  3. 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
    • AJ Clarke says:
      AJ Clarke
      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.
      Admin
  4. Deepak Sudera says:
    dear sir.. Can you please help me.. i want to use images in table .. which one plugin i use to images responsive.. Please reply me ..ASAP.. thanx
  5. 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.
    • Kyla
      I think so, but I would recommend contacting the plugin author just to be 100% certain! :-)
      Admin
  6. Sahil Ahlawat says:
    Gonna try this one now. seems like a better option, lets try and know. Thanks for the sharing !
  7. Sahil Ahlawat says:
    Any way to use and make images responsive in table?
    • Kyla
      Yes - wpDataTable supports image columns so you can include them in your responsive tables :-)
      Admin

Leave a Reply

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