Master-Detail Tables for wpDataTables

Download Master-Detail Tables for wpDataTables
Master-Detail Tables is an add-on for 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 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!

Demo Link : https://wpdatatables.com/documentation/addons/master-detail-tables/

Summary from Demo
Before purchase you can test all plugin and Add-on features on our sandbox site.
Purchase now
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 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 you need the wpDataTables 2.8 full version to run the add-on! It will not work with earlier versions of the plugin nor with wpDataTables Lite.
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:
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.
Image:
Make:
Model:
Model (platform) years:
Model body (platform) years:
Model version:
Model version (description) years:
Years sold:
Sold in Europe:
Car classification:
Body type:
No. of doors:
No. of seats:
Engine place:
Drivetrain:
Cylinders:
Displacement (cm³):
Power (kW):
Power (PS):
Power (rpm):
Torque (Nm):
Torque (rpm):
Bore × Stroke (mm):
Compression ratio:
Valves per cylinder:
Crankshaft:
Fuel injection:
Supercharger:
Catalytic:
Manual:
Automatic:
Suspension front:
Suspension rear:
Assisted steering:
Turning circle (m):
Brakes front:
Brakes rear:
ABS:
ESP:
Tire size:
Tire size rear (if different than front):
Wheel base (mm):
Track front (mm):
Track rear (mm):
Length (mm):
Width (mm):
Height (mm):
Curb weight (kg):
Gross weight (kg):
Load (kg):
Stützlast (kg):
Roof load (kg):
Cargo space (litres):
Tow weight (kg):
Gas tank (litres):
0-100 kmph (sec):
Max speed (km/h):
Fuel eff (l/100km):
Fuel eff city (l/100km):
Fuel eff highway (l/100km):
Engine type:
Fuel type:
CO2 (g/km):
CO2 efficiency class:
Pollution class:
Price:
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.
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.
Image:
Make:
Model:
Model (platform) years:
Model body (platform) years:
Model version:
Model version (description) years:
Years sold:
Sold in Europe:
Car classification:
Body type:
No. of doors:
No. of seats:
Engine place:
Drivetrain:
Cylinders:
Displacement (cm³):
Power (kW):
Power (PS):
Power (rpm):
Torque (Nm):
Torque (rpm):
Bore × Stroke (mm):
Compression ratio:
Valves per cylinder:
Crankshaft:
Fuel injection:
Supercharger:
Catalytic:
Manual:
Automatic:
Suspension front:
Suspension rear:
Assisted steering:
Turning circle (m):
Brakes front:
Brakes rear:
ABS:
ESP:
Tire size:
Tire size rear (if different than front):
Wheel base (mm):
Track front (mm):
Track rear (mm):
Length (mm):
Width (mm):
Height (mm):
Curb weight (kg):
Gross weight (kg):
Load (kg):
Stützlast (kg):
Roof load (kg):
Cargo space (litres):
Tow weight (kg):
Gas tank (litres):
0-100 kmph (sec):
Max speed (km/h):
Fuel eff (l/100km):
Fuel eff city (l/100km):
Fuel eff highway (l/100km):
Engine type:
Fuel type:
CO2 (g/km):
CO2 efficiency class:
Pollution class:
Price:
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.
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(122122122.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:
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:
If you turn on option Popover editing in wpdatatables Details button will be shown there as well.
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.
If you choose in “Show details in” setting the “Post” or “Page” option new settings wil be possible “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.
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
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.
Image:
Make:
Model:
Model (platform) years:
Model body (platform) years:
Model version:
Model version (description) years:
Years sold:
Sold in Europe:
Car classification:
Body type:
No. of doors:
No. of seats:
Engine place:
Drivetrain:
Cylinders:
Displacement (cm³):
Power (kW):
Power (PS):
Power (rpm):
Torque (Nm):
Torque (rpm):
Bore × Stroke (mm):
Compression ratio:
Valves per cylinder:
Crankshaft:
Fuel injection:
Supercharger:
Catalytic:
Manual:
Automatic:
Suspension front:
Suspension rear:
Assisted steering:
Turning circle (m):
Brakes front:
Brakes rear:
ABS:
ESP:
Tire size:
Tire size rear (if different than front):
Wheel base (mm):
Track front (mm):
Track rear (mm):
Length (mm):
Width (mm):
Height (mm):
Curb weight (kg):
Gross weight (kg):
Load (kg):
Stützlast (kg):
Roof load (kg):
Cargo space (litres):
Tow weight (kg):
Gas tank (litres):
0-100 kmph (sec):
Max speed (km/h):
Fuel eff (l/100km):
Fuel eff city (l/100km):
Fuel eff highway (l/100km):
Engine type:
Fuel type:
CO2 (g/km):
CO2 efficiency class:
Pollution class:
Price:
Details:
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).
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.