Hello jeroen.

This is the responsive feature at work.

You can disable it, but it will not look nice on the mobile screen.

Ah, thanks for the explanation, Jeroen.

Currently, our plugin doesn't offer such a feature, and there are no built-in workarounds to achieve it. However, it's a great idea for a potential future option. You're welcome to explore our suggestions page for more details.

If you're eager to implement a custom solution immediately, you might consider adding a custom button near the table on the page. Utilizing custom JavaScript with an event listener on button click, you can apply a CSS class to all table rows. Levering the plugin's built-in responsive "hidden columns" design, a CSS class named "detail-show" is activated when clicking the + symbol. Consequently, only the hidden data of the clicked row is revealed.

If you can find a way to create a button with a script and an event listener for the click, here's the CSS selector for the table rows on your page:

.wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr

Adding a class named "detail-show" to each table row element could help you implement a custom solution. However, it's important to note that our support doesn't encompass custom solutions, and we haven't tested this approach before.

I'll demonstrate a custom workaround to keep all rows expanded continually using Conditional Formatting. This could serve as a starting point or an alternative solution:

We'll implement two Conditional Formatting rules on your initial "responsive column" containing the + expander symbol.

For this example, I have a table with a two-column responsive layout designed for mobile screens. We'll choose the first two columns to be visible on mobile screens and hide the others.

Levering the plugin's built-in responsive "hidden columns" design, a CSS class named "detail-show" is activated when clicking the + symbol, revealing all hidden data.

To implement a custom solution, we can create two conditional statements in the column containing the "+" symbol (the first column shown on mobile screens). One rule would add the "detail-show" class to rows when the cell value isn't empty. Additionally, another rule would apply the same CSS class when the cell is empty.

Therefore, this makeshift solution will mimic the effect of pressing the + sign on all rows by default. If you want to auto-expand only non-empty rows, you can simply remove the second rule.

Here is a screenshot illustrating the resulting table:

I hope that helps!