Hi Ed,

It depends what table type you need.

1. If you can work with a Simple Table type, then you can easily create a table looking like that.
Because with the Simple tables, you can align the cells in a very flexible way and merge cells, etc.

They are just limited in terms of not able to have filtering, sorting , etc - please check more here.

2. Or, if you need to have any other table type then Simple tables :
Pivoting the table is not a built-in option of wpDataTables, but please feel free to check out this ticket:

https://tmsplugins.ticksy.com/ticket/3042192/

One of our customers made a short tutorial for all customers that want to use the Pivot feature with wpDataTables. 

I hope that helps.

If you wish to see a built-in option for this in the future, please don't hesitate to

Please feel free to search on our suggestions page, 

 to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

3. The only other way to have the data looking like this is to have our Responsiveness always active for all screens, like this :

You can enable Responsiveness in the table, and choose which columns will be hidden from the front-end on tablet devices. 

Then, you can go to wpDataTables settings, and change the tablet's width to a bigger value (2000 for example). 

When you do this, the plugin will consider all screens below 2000px as tablets, and hide the selected columns which would be available on click. 

A "+" sign will appear in the first column, so when you click on it the data hidden will be displayed.

You can optionally change the 'action' on which the rows expand, if you wish it to be on the + icon, or on cell or on row.

But, you also need to have all rows 'expanded automatically' at all times in order to achieve this 'layout'.

This is a bit of an improvised solution, 

we will add two Conditional Formatting rules to your first "responsive column" (that has the + expander symbol).

- For this example, I have this table, and we will make a two-column responsive layout for mobile screens. ( we will select the first two columns to be visible on mobile screens, and hide the others)

- Basically, with the plugin built-in responsive "hidden columns" design, there is a CSS class we named "detail-show", that gets "triggered", whenever we click on the + symbol, 

and then all the hidden data gets revealed.

- Now, If we create two conditional statements in the column that has the"+" symbol ( the first column shown on mobile screens); 

we can "add this class" to the rows, as long as the cell value isn't empty;

but also another rule to say : if the cell is empty,  also add the same CSS class to that case.

- So, basically, this improvised solution will look as if you pressed the + sign on all the rows by default.

( In case if you need to auto-expand only the rows which are not empty  - you can simply remove the second rule)

- Here is a screenshot of the resulting table:

I hope that helps.