We're Moving to a New Support Platform – Starting June 1st!
We’re excited to let you know that starting June 1st, we’ll be transitioning to a new support system that will be available directly on our product websites – Amelia, wpDataTables, and Report Builder. In fact, the new support platform is already live for Amelia and wpDataTables, and we encourage you to reach out to us there.
You'll always be able to reach us through a widget in the bottom right corner of each website, where you can ask questions, report issues, or simply get assistance.
While we still do not offer live support, a new advanced, AI-powered assistant, trained on our documentation, use cases, and real conversations with our team, is there to help with basic to intermediate questions in no time.
We're doing our best to make this transition smooth and hassle-free. After June 1st, this current support website will redirect you to the new "Contact Us" pages on our product sites.
Thanks for your continued support and trust – we’re excited to bring you an even better support experience!
Hello,
How can I freeze header of the table and to make rest of the data scrollable
Many Thanks
Revaz
Hi Revaz
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:
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 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.