Master-Detail Tables for wpDataTables

What does this add-on do and when is it useful?

Master-Detail Tables is an add-on for wpDataTables that allows you and your site visitors to see all desired details for each row with a simple click. Many users today have tables with a large number of columns and data. However, when such tables are placed on a website, they often disrupt the visual appearance of the page. Until now, the only solution was to hide certain columns or completely modify the table to fit the page. But what if you need all those columns and data, and you can’t hide anything because you want your users to have all the information? Don’t worry, there is now a solution for that.

The Master-Detail Tables add-on allows you to hide less important data from the table on the frontend, while still giving users the option to view all the information, either in a non-tabular view or now also in a special tabular display by simply clicking on the desired row.  This way, you don’t have to delete any columns; you can simply hide them visually and display all the information when needed. This scenario illustrates a common use of the Master-detail functionality in practice. However, please note that within the details, you can also display data from columns that are visible on the frontend, i.e., columns that have not been previously hidden. This add-on provides you with the flexibility to creatively adapt it to your needs and the needs of your users.

Further in the text, it will be explained how you can easily access the desired details by simply clicking on a specific row or button, and how to use the Master-Detail add-on yourself.

6.A. Send Parent Table Row Data – This option allows you to generate desired details in a non-tabular view for the selected row of this parent table by simply clicking on the desired row or button. The option becomes visible only after selecting to send via the GET parameter in step five. The essence of this option is that only the parent table ID and the details of a specific row, in the format you previously defined in the template (Instructions on how to create a custom template), are sent via GET parameters. Sending data via GET parameters allows you to access the details of any row at any time and from anywhere, without needing to have the entire table in front of you. This way, you can directly access the details of a specific row through a URL, instead of searching for and clicking on the specific row within the table. This option is extremely useful for efficient data access and simplifies working with large tables. Pay attention to the next option “Parent Table Column Name,” where you need to select a column with unique values (e.g., WDT_ID in Manual tables) based on which placeholders in the template will display details of the exact table, column, and row. 

It’s best to demonstrate the use of this option with an example. First, you need to create wpDataTables from the Table wizard. Let’s start by creating a manual table by importing this Excel file. As you can see, this table has a large number of different columns. In this specific example, we followed the steps below:

1. Create a data table by importing data from a data source using this Excel file. If you encounter any difficulties in this step, read the instructions here.
2. Hide all less important columns. The columns we kept visible are: “Make,” “Model,” “Model version (description) years,” “Wheel base (mm),” “Price”.
3. Configure the visibility of each column in the details page in the column list.
4. Enable master-detail functionality.
5. In the “Open details on” option, choose to display row details by clicking on the button. You will see a new Master-detail column created called Details which is filled with a predefined value “More details” link. 
6. In the “Show details in” option, choose to display row details on a page.
7. In the “Template page” option, insert the template you created earlier. (Instructions on how to create a custom template)
8. Leave the “Link target attribute” option in its default state so that the details page is displayed in a separate tab.
9. Enable the “Send details over” GET parameter.
10. In the “Send Table data” option, choose “Send Parent Table Row Data.”
11. For the “Parent Table Column Name,” use the wdt_ID column as the column with unique values.

After following the steps mentioned above, you will get the following table. Click on the “More Details” button in the column of the row for which you want to see more information. In the table below, you can see how the details page opens and what details it contains. Since we previously selected the option to send details via GET parameters, you can copy the URL of the details page and access it anytime and from anywhere.

6.B. Send Child Table Row Data – This option allows you to connect two tables so that by clicking on a row in the parent table, you can easily access more detailed information from the child table. This eliminates the need to create tables with many different columns and entries to gather all necessary information about any item. This option works by allowing you to send row details specifically from the child table. For this option to function correctly, you need two tables, a parent and a child, which are interconnected by a common UNIQUE ID column. Within the master detail functionality, in the “Child Tables” option, select the child table whose data you want to link with the chosen parent table. Establish the link by selecting unique columns with corresponding unique values in the “Parent Table Column Name” and “Child Table Column Name” options. Create a template beforehand that will contain placeholders from the child table, which will be displayed and replaced with actual data from the child table when you click on the row in the parent table to which this information pertains. This way, you get the ability to see detailed information from the parent table row, in a non-tabular view,  which is stored in the child table linked to the parent table by a unique ID column.

Note: This will only be handled as a “One-to-One” relation. If you have multiple rows with the same ID in the “Parent Table Column Name” of the selected child table; in that case, only the first row matching the chosen ID will be rendered, and any other ‘duplicate ID rows’ will be ignored. That is why we recommended using unique values for the relation columns earlier (both parent and child columns).

It’s best to demonstrate the use of this option with an example. What you need to do first is to create wpDataTables using the Table Wizard. Let’s start by creating manual tables by importing Excel files. You’ll need one parent table and one child table, which we will link using a common unique ID column. Let’s go through the steps together:

1. Create a parent table by importing this Excel file. If you encounter any difficulties in this step, read the instructions here.
2. Create a child table by importing this Excel file. If you encounter any difficulties in this step, read the instructions here.
3. Enable master-detail functionality within the parent table.
4. In the “Open details on” option, choose to display row details by clicking on the row.
5. In the “Show details in” option, choose to display row details on a page.
6. In the “Template page” option, insert the template you created earlier. Note that the template should contain only placeholders that will be replaced with actual values from the child table. (Instructions on how to create a custom template.)
7. Leave the “Link target attribute” option in its default state so that the details page is displayed in a separate tab.
8. Enable the “Send details over” GET parameter.
9. In the “Send Table data” option, choose “Send Child Table Row Data”.
10. For the “Parent Table Column Name” and “Child Table Column Name,” use the wdt_ID columns as the columns with unique values that match.

In this way, we have created two tables where one is subordinate to the other and provides more detailed descriptions of its rows. By clicking on the parent table below, observe how and which details open on the details page. You will notice that the page offers a detailed description of universities based on data stored in the child table. Since we previously selected the option to send details via GET parameters, you can copy the URL of the details page and access it anytime and from anywhere.