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.

6.C. Send Child Table 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. (Well known Parent/Child table relationship). This eliminates the need to create tables with many different columns and entries to gather all necessary information about any item. This option allows you to display the entire dataset from a child table in a separate table view on a post or page. In this way, you can establish a “One-to-Many” relationship. This means that you can link one row in the parent table to multiple rows in the child table. This type of relationship enables each row in the parent table to have multiple corresponding rows in the child table, which is useful when you want to display all related data.

Here’s how it works: by selecting a row in the parent table that you want more information about, you retrieve data about all rows in the child table that are linked to it.

When using this option, you should select the child table under the “Child Tables” option and connect it to the parent table using unique columns that have matching values through the options Parent Table Column Name and Child Table Column Name. This setup ensures that if the id column (Parent Table Column Name) in the parent table has multiple matching ids in the child table id column (Child Table Column Name) that relate to it, opening the template details by clicking on a row in the parent table will display a table with all the rows from the child table that are linked by the unique column to this row.

It’s necessary to first create and insert a template that contains the placeholder

which allows you to display all rows from the child table linked to the selected row in the parent table in a tabular view.

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:

• Create a parent table by importing this Excel file. If you encounter any difficulties in this step, read the instructions here.
• Create a child table by importing this Excel file. If you encounter any difficulties in this step, read the instructions here.
• Enable master-detail functionality within the parent table.
• In the “Open details on” option, choose to display row details by clicking on the row.
• In the “Show details in” option, choose to display row details on a page.
• In the “Template page” option, insert the template you created earlier. The only requirement for the template page is that it contains the following placeholder:

(Instructions on how to create a custom template.)

• Leave the “Link target attribute” option in its default state so that the details page is displayed in a separate tab.
• Enable the “Send details over” GET parameter.
• In the “Send Table data” option, choose “Send Child Table Data”.
• For “Parent Table Column Name” and “Child Table Column Name” use the unique ID columns whose values match. As the unique common column in this example, we used the ‘productid’ column, which links products to their corresponding order information.

In this way, we linked the parent table of products with all the information about those products to the child table of orders related to the products from the parent table. Click on any row from the parent table below to see a tabular display of all orders related to that specific product. 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.

Try this option on the table below:

• The table is non-editable. We created non-editable table from this excel file
• Under the “Open details on” option, “Row click” is selected.
• Under the “Show details in” option, it is set to display row details in a popup.
• In the “Popup Title” settings, we have defined the popup title as “Car description.”

If you click on any row in the table, you will get more details about the car description in a popup dialog for that row. You can check how this works in the table below.

If we previously selected the last option, “Send Child Table Data”, in the “Send Table Data” settings, and we want to display the details of the row from the parent table, we insert the following placeholder in the template:

which allows you to display all rows from the child table linked to the selected row in the parent table in a tabular view.