Hi, Jeremie 

Thanks for reaching out to us

-

1.  In regards to a fixed/sticky elements such as headers/columns/rows,  similar to the example you shown,

- Sorry to disappoint you but unfortunately something like this is not possible to achieve with the plugin built-in features at the moment or some simple CSS.

Our developers will work to add it as a built-in feature, but i can't say an ETA on it.

You can suggest this as a built-in feature on this link https://wpdatatables.com/documentation/feature-suggestion/ and our developers would place it on their "TO-DO" list.

As more customers request a feature, it gets pushed quicker on the list. We always strive to make our product better and deliver the most value to our end users, so we carefully review each suggestion

-

At this time, it can only be made with custom solutions.

Here is a workaround suggestion from our customer that managed to achieve a similar solution :

"I actually created a fixed header and column using the translation of x and y (no absolute or fixed position used), very similar to the fixed header provided by weihs5  on this site, and here's one solution, take a look:

First of all, you gotta set the z-index for each component below:

jQuery("#table td").css({"z-index": "-1", "position": "relative"});
jQuery("table tr td:first-child").css({'z-index': '1', 'position': 'relative'});
jQuery("table th:first-child").css({ 'z-index':'2','position':'relative'});

Then you gotta add a listener on scroll like this:

jQuery('document').scroll(function () {   scrollBlock();
});

If your table is set to be scrollable, then you might want to add this in as well:

jQuery('.wdtscroll').scroll(function () { scrollBlock();
});

And here's the scrollBlock() part, it is ugly though, but it works for me though. (noted: the numbers work for my theme, if it is not working correctly on yours, then try to adjust the number until it fits.)

function scrollBlock(){  var table = document.querySelector('table');
var top = table.getBoundingClientRect().top;
top = document.body.className.search('admin') > 0 ? top - 32 : top + 3; // this value can change            var left = table.getBoundingClientRect().left;            if(left >= 20){ // before scrolling left (before transforming)                                if(top >= 0){ // before reaching header bar                    jQuery("#table_1 thead th").css("transform", "translateY(0px)");                     translate(jQuery("table th:nth-child(1)"), 0, 0);                     translate(jQuery("table td:nth-child(1)"), 0, 0);                                    } else{ // after reaching header bar                     jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");                     translate(jQuery("table th:nth-child(1)"), 0, -top);                     translate(jQuery("table td:nth-child(1)"), 0, 0);                 }            } else { // after scrolling left                                if(top >= 0){                    jQuery("#table_1 thead th").css("transform", "translateY(0px)");                    translate(jQuery("table th:nth-child(1)"), -left + 46, 0);                    translate(jQuery("table td:nth-child(1)"), -left + 46, 0);                                    } else{                     jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");                     translate(jQuery("table th:nth-child(1)"), -left + 46, -top);                     translate(jQuery("table td:nth-child(1)"), -left + 46, 0);                     }                }            }
function translate(element, x, y) {
var translation = "translate(" + x + "px," + y + "px)"
element.css({      "transform": translation,       "-ms-transform": translation,          "-webkit-transform": translation,     "-o-transform": translation,      "-moz-transform": translation,   });
}

It is kind of messy, you definitely can't copy and paste and expect it to work for you. You need to spend some time to figure it out. Hope this helps everyone!"

So hopefully this can help you out.

-

2.  In regards to having an "auto expanded" responsive design, i have a custom workaround to offer.

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:

Let me know how that seems, and if the second solution works for your use-case.

And in the future, when you have a new question, not related to the original topic of the ticket, please open new tickets for unrelated questions.

You can open several tickets at the same time, and we will cover them all.

Thank you

Hi, Jeremie

Sorry for the delay

-

I am delighted to see that these workaround ideas are working for you.

-

In regards to hiding the headers, we can only do that currently with custom CSS.

table.wpDataTable th {
    display: none !important;
}

You can either add this for individual tables in their Customize/Custom CSS,

or if you wish to hide for all tables, you can use it in the main settings/Custom JS and CSS/Custom CSS

-

Let me know if this helps.

Thank you

Hi, Jeremie 

Sorry for the waiting time.

-

Apologies, it was a misunderstanding. I though that you just wish to hide the headers,

but once i read everything again, i realise you wrote that you need the labels of the values hidden, along with the colon symbol ( : )

and i just gave you the CSS to remove Table headers, which was not what you need.

-

If we just remove the "columnTitle" span class, with CSS, the colon stays.

span.columnTitle {
    display: none;
}

We will check to see if we can provide any workaround to remove the colon symbol as you need it.

As soon as i confirm this, we will report back right away.

Thank you for your patience once again.

Hi, Jeremie 

We were advised on this.

For the time being, the only solution would be to edit this file :

../wp-content/plugins/wpdatatables/assets/js/responsive/datatables.responsive.js

around line 126 find this :

this.rowLiTemplate = '<li><span class="columnTitle"><!--column title--></span>: <span class="columnValue"><!--column value--></span></li>';

In the middle of the code, after the first </span>  there is a colon ( : )

Delete the colon,  and save this file.

Then in plugin settings/Custom JS and CSS  tad  ,  disable "Use minified wpDataTables Javascript" and then the colon ( : ) will get removed.

But this will be affected during updates,

each time the plugin updates it will override what you've done here, so you would have to repeat the process,

Until our devs come up with a better solution in the future, but i can't say a realistic ETA on that.

Let me know if that might work, for the time being, as a custom workaround. Thank you

Hi, Jeremie 

Sorry for the delay

- Yes.  You have already sent us that in the previous reply, that is correct, sorry about that.

You did explain that you wanted to see if we have something better,

and we did our best, but at this time, it can either be done by editing the code - or by applying this solution you made.

Thank you for sharing that with us, we will make note of it, it might help with future improvements of the plugin.

Of course, as you know - please don't hesitate to reach out to us whenever you have any questions and we will do our best to answer as quickly as possible.

Thanks again.