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.

Master-detail columnConfigure options in new Master detail column- Details

You are able to configure this new Master-detail column. When you click on Column settings button column settings for this column will be shown. On DISPLAY tab you are able to set options like in other column types from wpdatatables: change Display header, Column position, Cell prefix and suffix, Add column class and color, Hide column on mobile or tablet devices (if Responsiveness option is turn on ) and Show this column on front-end.

Master detail column settings
Master detail data settings

On the DATA tab you will find an option “Show link as a button”– this option allows you to display the link as a button. When you turn it on two new options will be shown:

1) Button text – You can set the button display text. (We change it to Tech details)

2) Button class – You can set the button CSS class. (We add and create md-button class)

When you check that, you need to click apply and the setting will be saved. You can create the custom CSS class md-button in CUSTOM JS AND CSS settings, in the field Custom wpdatatables CSS,  inserting this:

.md-button{background-color: #0083c2 !important;line-height: 1.75;border:1px solid transparent;color:#fff !important;padding: .75rem 2rem;font-size:18px;border-radius: 28px;box-shadow: 0 2px 6px 0 rgba(122,122,122,.5);text-transform: none;position: relative;transition: all .3s ease;}.md-button:hover{cursor:pointer;color:#fff !important;background: #008cff !important;}

When you click save you will get buttons in table like this:

“Row click” option for editable and non-editable wpdatatablesDifferent functionality of “Row click” option for editable and non-editable wpdatatables

If you create editable tables (manually created tables, table created by  import the table data from Google Spreadsheet, Excel or CSV and MySQL based wpDataTable ) and choose “Row click” on Open details on settings in Master-detail settings  this option will behave differently for tables:

  • For editable tables, when you choose “Row click” on Open details on in Master-detail settings, it will be added Details button with editable buttons (disabled by default) and once you click on the row, a button called Details will be enabled next to the buttons for adding new entry, editing a row and deleting a row, and once you click on it details will be shown in a popup modal or in a page or a post (depending on what you have set in Master-detail settings).

If you turn on option Popover editing in wpdatatables, Details button will be shown there as well.

  •  For tables created from existing data source once you click on the row, details will be shown right away (as it is explained previously in this post)

As for the “Button click” option, “More details” link will be displayed in the same way for both editable or non-editable tables – a new column will be added with “More details” link as an option in each row.

Master detail option - Show details in: “Page or Post”How to create template post or page for Master-detail Tables

If you choose in the “Show details in” setting the “Post” or “Page” option, a new setting will appear “Template page” or “Template post” (depending on what you have chosen: page or post) where you will choose your already prepared custom page or post.

The Link target attribute section allows you to open the Master-Detail page/post in the same tab. The default behavior of the add-on is to open Master-Detail page/post in another tab.

md-page

Instructions how to create custom template (post or page)

Master detail origin header

When you create wpdatatables and choose which column you will use in the Master detail section then you need to prepare your custom post or page to show details from your table. We will only explain how to do it on a custom page because it is the same procedure for a custom post.

You will create a new page or you can do it on an already existing one. What you need to do is to create placeholders by using origin headers from columns that you use for Master-detail which you can find in column settings of each column. You can see it in wpDataTables configuration page when you open column settings panel by clicking on “Column settings” button    or by clicking on “Column list”  button complete-column-list from where you can open column configuration for each column.

You need to copy that origin header and then insert it on your page between percentage characters like this (in our case origin header is Image ):

%Image%

This way you will create placeholders for values from this column on your page. You need to create those placeholders on your custom page for each column that you include in Master detail section (Turn on option “Add to the details section” on Master-detail column setting). Please note that if you create placeholder for column where you turn off this option it will not be shown on template page after “Row or Button click”. Also if you visit this custom page directly, placeholders will be replaced with empty strings, so data will be populated only when you access this page from our table by clicking on Row or Button depending on your configuration.

Here is the example in our case for Car details page (without any page builder)

When you save this page you need to go in to Master-detail settings and choose option “Page” on Show details in settings and then Template page settings will be displayed where you will choose your custom page, in our case it is the Car details. After that click apply to save the settings. When you click on the “Row” or “Button link” (depending on what you set in the settings “Open details on”) you will be redirected to that page.(example for our case)

This was an example without any customization, but you can do it depending on your needs. In our example, we customize the layout with WPBakery Page Builder like this:

When you click on the “Row” or “Button link” (depending on what you set in settings “Open details on”) you will be redirected on that page. (example for our case with page builder)

You can test this on the table below by clicking on button Tech details.

New option in wpdatatables columnsHow to use new option in wpdatatables columns

There is an option for each column (except Master-detail column-Details) for you to choose whether that column will be shown in the Master-detail section or not. Once you open Column Settings, in the Display section you will see “Master-detail column” setting and “Add to the details section” option (turned on by default).

Master detail add column
Master detail short options in column list modal

 You will find the same option if you click on “Column list” button above the table.

When you click on it, you will see a list of all columns where you can choose which column will be included in Master detail table or not.

So, if you hide some columns from the front-end page, you can still choose whether those columns will be shown in Master-detail section. 

Please note that those functions are not applied on Excel-like tables and Conditional formatting is not supported at the moment.