Hello! thanks for the fantastic plugin! I'm not able to fix/block the first column and the header while i'm scrolling horizontal/vertical.. I need these to be always visible while consulting the data.How can i do this thing? Really thanks, have a good day
This is not possible with plugin built in features, but someone of our customers made this possible. We did not arrive to test it, so you can try if is working for you.
He actually created a fixed header and column using translation of x and y (no absolute or fixed position used), and here's one solution, take a look:
First of all, you gotta set the z-index for each component below:
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 figuring it out.
I need to fix the firts column as well but I don´t have any experiences with coding so it´s too complicated for me. Are you planning to build this possibility in wpDataTables options in the coming versions?
We are working on new features of plugin, but for now that feature is not on our TO DO list. Thank you for your suggestion. I will forward this to my development team to think about this like new feature in future.
Hello! thanks for the fantastic plugin! I'm not able to fix/block the first column and the header while i'm scrolling horizontal/vertical.. I need these to be always visible while consulting the data.How can i do this thing? Really thanks, have a good day
Hi Massimo,
Thank you for your purchase.
This is not possible with plugin built in features, but someone of our customers made this possible. We did not arrive to test it, so you can try if is working for you.
He actually created a fixed header and column using translation of x and y (no absolute or fixed position used), and here's one solution, take a look:
First of all, you gotta set the z-index for each component below:
Then you gotta add listener on scroll like this:
If your table is set to be scrollable, then you might want to add this in as well:
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.)
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 figuring it out.
Best regards.
Kind Regards,
Isidora Markovic
wpDataTables: FAQ | Facebook | Twitter | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Amelia demo sites | Docs
You can try our wpDataTables add-ons before purchase on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables
Hi Milan,
I need to fix the firts column as well but I don´t have any experiences with coding so it´s too complicated for me. Are you planning to build this possibility in wpDataTables options in the coming versions?
Thank you for your answer
Martina
Hi Martina,
We are working on new features of plugin, but for now that feature is not on our TO DO list. Thank you for your suggestion. I will forward this to my development team to think about this like new feature in future.
Kind Regards,
Isidora Markovic
wpDataTables: FAQ | Facebook | Twitter | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Amelia demo sites | Docs
You can try our wpDataTables add-ons before purchase on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables