Master-Detail Tables for wpDataTables

Before purchase, you can test all plugin and Add-on features on our sandbox site.

Video versionVideo overview of the addon

Master-Detail Tables add-onWhat does this add-on do and who will find it useful

Master-Detail Tables is an add-on for wpDataTables which allows you and your site visitors to see details for each row with a simple click. Many users today have tables with lots of columns and once they place that table on their website it looks ugly so they often need to hide some columns or entirely edit the table so it can fit to the page. But, what if you actually need all those columns and data and you cannot hide anything because you want your users to see all the data? Well don’t worry, from now on you can have as many columns in the table as you need and you can hide them without worrying that the users of the table will lack some information. Master-Detail Tables add-on allows you to show those hidden columns with just one click, and the table will always look nice.

Installing and activating Master-Detail Tables add-onHow to install the addon

Installing the Master-Detail Tables addon is a quite straightforward process if you have some experience with WordPress plugins. There are 2 possible ways of uploading it to the WordPress site:

Go to your WordPress admin panel, open the “Plugins” page, then click “Add new”, choose “upload” and then browse to the ZIP file that you’ve downloaded from our store.
Go to our store, login with the credentials you received via e-mail when you purchased the plugin, download the plugin and extract the ZIP file that you’ve downloaded. Once you’ve done that open your WordPress installation through FTP, browse to wp-content/plugins, and upload the extracted folder there.

Once you’ve uploaded the plugin using one of these 2 scenarios, you should see the Master-Detail Tables add-on in your plugins list. Just click “activate”, and you’re good to go!

Please note that the minimum requirement for Master-Detail is the full version of wpDataTables, from v2.8 onward! It will not work with earlier versions of the plugin, nor with wpDataTables Lite.

Using the Master-Detail Tables addonHow to enable the addon

What you need to do first is to create wpdatatables from Table wizard.  There is a difference in functionality for editable tables and non-editable tables. For the first scenario we will create non-editable table from this excel file.

You should create table following the instructions from Creating Tables in WordPress from Excel. Then you can hide columns that you want to show in a Master-detail table (popup). In our example, we hide all columns related to car description, because we want to show them in the Master-detail table.

After activating the Master-Detail Tables add-on you will notice new table settings tab called Master-Detail Settings on the table configuration page. When you click on it you will see the option “Master-Detail”.

In order to try out how the Master-Detail add-on works, please enable the “Master-Detail” option and you will see several new options:

  1. Open details on – Choose how your details will be opened – If the “Row click” is selected, users will be able to access details for a row by clicking on it. If the “Button click” is selected, a new column will be added to the table, where each row would get a button opening the details for it.
  2. Show details in – Choose how data will be shown – If the “Popup” option is selected, the details for the selected row will appear in a popup dialog on the same page. If you choose one of the “Post” or “Page” options, users will be redirected to the chosen post or page (picked in a separate setting), which will be used as a template to render the details. Please note that you would need to create the template post or page and fill it in with placeholders first, so that you could select it here. Later on, it will be explained how to create a template on this post.
  3. Popup Title – Choose a title for the popup with row details. If you leave the field blank, the default title will be “Row details” (In our example we will call it Car description:)
Master detail settings

Master-detail Tables option – Open details on: “Row click”

For the first scenario you can choose: from settings Open details on the option “Row click”, from settings Show details in the option “Popup” and in settings Popup Title you can define the popup title  (we set Car description:). When you finish this, click Apply, so these settings can be applied to the table.

If you click on any row in the table you will get more details about car description in a Popup dialog for that row.

You can check how that works in the table below.

Master detail option – Open details on: “Button click” (will be created new Master-detail column)

For the second scenario you can choose: from settings Open details on the option “Button click”, from settings Show details in the option “Popup” and Popup Title settings you already defined. When you finish this, click Apply so these settings can be applied to the table.

Master detail button click option

You will see a new Master-detail column created called Details which is filled with predefined value “More details” link. If you click on any of these links a Popup modal with details about car description details (like in the first scenario) will be shown.

You can check out how this works in the table below.