wpDataTables – a Plugin that Makes Tables in WordPress Easy

Tables are a convenient way of displaying data to your website users: information is well-organized, structured, and people always know how to find what they need within table columns and rows. But preparing a table in a WordPress post can be a nightmare for a beginner – all the HTML markup and formatting rules is not an easy thing to handle if you never worked with this before. If only it could be as easy as in spreadsheet applications!

Another table-related problem for WordPress users is displaying data from MySQL. It should be relatively easy when the table data is already there, but there is no native way to display MySQL results, and this requires custom development, changing page templates, and so on.

wpDataTables plugin introduces a way to solve these problems, and allows you to prepare the data in an Excel, CSV, XML or JSON, or in MySQL, prepare the output in several clicks, and then insert it to the post with a shortcode. Even more: the table can be interactive – you can sort it by values of some column, or filter by some column, search within the table, divide the data to pages; table can be responsive – it will be adjusted to the device that you use; and even editable – you can allow some user roles to edit the table. Also this plugin can even render charts based on the table data!

Let’s go through the process of table creation with wpDataTables. After you install wpDataTables plugin you will get a new section in your WordPress admin panel:

Click the “Add new” button to open the editor:

Provide a name for the table, then pick a data source for your table. Following data sources are supported:

• Excel file – An XLS or XLSX file with the table data.
• CSV file – A comma-separated-values format file.
• MySQL query – A query which will return the data for the table.
• JSON – An URL of JSON (JavaScript Object Notation) formatted input.
• XML – An URL of XML-formatted input.

Generally, wpDataTables does not care which data source you will use: it will read the table data each time the table is open, which allows to display all the backend changes in frontend in realtime. I would recommend using MySQL since it’s most “natural” for web, and also it works the fastest. Also editable tables are supported only for MySQL data source.

After you provided the data source you need to define the table settings. Among others following settings can be defined:

• Editable – for MySQL data source you can define the table as editable. You can also pick the user roles which will be allowed to edit the table; they will get a “New”, “Delete” and “Edit” buttons in the front-end, and a responsive editor popup.
• Server-side processing – for large MySQL tables which have several thousands of rows you can set it to on to only fetch several rows at a time, and access the rest via AJAX requests on-demand.
• Responsive – whether to enable responsiveness for this table. If you set it to on you can define for each column which will be visible or hidden for tablets or mobiles, data from hidden columns can also be visible in an expandable area.
• Advanced filtering – this feature allows you to have a separate filter below each column.
• Filter in form – if this is checked along with the advanced filer, it will put the filtering inputs in a form or a widget outside of the table. It is convenient for tables with many columns.
• Table tools – this allows you to enable a toolbar with extra features: export table to CSV, to Excel, to PDF, or trigger the print view for the table.
• Enable sorting – this feature allows you to define whether you want to have the sorting feature enabled for this table.

There is a number of other settings, but mentioning all of them here would make the article too long. Please check the official plugin’s website and the documentation for complete details.

When you finish configuring the table you can save it, and the plugin will read the columns data and prepare a setting block for each column. You can then define the settings per each column separately:

Among others you can define the following settings for each column:

• Displayed header – if you want the column to have a header different from the one you have in data source.
• Possible values – here you can define the values for the advanced filter on this column, or for the editor input, if the table is editable.
• Default values – you can predefine the filter value or the editor value in this setting.
• Column type – This setting defines formatting and sorting rules.
• Filter type – This setting defines filter input type and the filtering logic.

There are a log of other settings: sort order, width, visibility on different devices – please refer to the official plugin’s website and the documentation for complete info.

When you are done with configuring the columns you would need to save the changes. Then you will get a shortcode in the upper part of the editor page:

Just copy and paste this shortcode in your WordPress post or page. then you will see the result of your work, for example something like this:

If you configured the table as responsive, it will adjust to the browser width, and hide and show the columns as you defined:

This is how the editor for editable tables would look like:

As a summary – wpDataTables plugin covers a lot of functions and is suitable for many needs: price lists, catalogs, business locations list, order history, and so on. It’s not free, but it’s extremely easy to use, fully documented (documentation has more then 160 pages), extensible for developers (more then 60 WordPress filters and actions defined), has lifetime support included, new features are added constantly, so it’s completely worth the price!

If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.