Creating a sticky header and columns is not possible with plugin built in features, but one of our customers made this possible. We did not get a chance 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 to figure it out.
Thanks for the reply Blazenka - I think that will be difficult and risky to do on my site since I need to work at all times.
Is there any way that can be added as a feature request? On Google Sheets, it is 2 button clicks to freeze a row or column.....if this could be added to WpDataTables it would be sooooooo helpful to me and probably all of your customers.
Yes of course, I'll kindly ask you to add it as a feature suggestion on this page.
Features are pushed up on our "to-do" list when there are a lot of customers requesting those features, so having your vote as a customer can be beneficial to this feature being developed sooner.
Hello,
I was curious how I can "Freeze" the first 2 columns and "freeze" the header row - this would be very helpful!
Thanks in advance, hopefully I'm missing something obvious.
Sean
Hi Sean
Thank you for reaching out to us.
Creating a sticky header and columns is not possible with plugin built in features, but one of our customers made this possible. We did not get a chance 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 to figure it out.
Thanks for the reply Blazenka - I think that will be difficult and risky to do on my site since I need to work at all times.
Is there any way that can be added as a feature request? On Google Sheets, it is 2 button clicks to freeze a row or column.....if this could be added to WpDataTables it would be sooooooo helpful to me and probably all of your customers.
Thanks again for your time and help,
Sean McGregor
Hi Sean
Yes of course, I'll kindly ask you to add it as a feature suggestion on this page.
Features are pushed up on our "to-do" list when there are a lot of customers requesting those features, so having your vote as a customer can be beneficial to this feature being developed sooner.