Is it possible to freeze, or make "sticky", certain columns and or rows. I am hoping to freeze the first two columns on my data table because it contains the rank and names of everyone, this way when you scroll to the side what number match up with what people. It would also be helpful to freeze the top row, but not as important.
- 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.
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:
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!"
Is it possible to freeze, or make "sticky", certain columns and or rows. I am hoping to freeze the first two columns on my data table because it contains the rank and names of everyone, this way when you scroll to the side what number match up with what people. It would also be helpful to freeze the top row, but not as important.
Hi, James
Thanks for reaching out to us
- 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:
Then you gotta add a 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. Hope this helps everyone!"
So hopefully this can help you out.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables