Has anyone used query to freeze table headers and allow scrolling of rows?
1 Like
Alec,
Were you able to resolve the filter menu resize issue? I am having the same event.
Hey Justin! Thanks so much for that code, it works great for me on the surface, but I am running into an issue though where if you apply a filter from a filter menu, it loads the table in wonky sizes with fields all over the place. If you reload the page though by hitting refresh, the table loads back with the filter in place and the table sized correctly and frozen headers.
Do you know what might be causing this? Thanks again for your code and thanks in advanced for any and all help!
Does anyone knows how to freeze pane?
I need to freeze the first 2 column of the table while panning left and right.
Dear Justin,
I had changed the view # and it's working however the column width display the full width of the column.
But I would like to have the original column width which the text is wrapped according to header width.
Please email me jordanshu8@gmail.com
Thanks
Can you kindly give me your email address.
I would like to share my screen to you.
It would be of great help.
Thanks mate.
that's what the script does. Make sure to change the view # in the css portion and if it still does not work then check your console.logs and make sure you're getting new widths / make adjustments. I'd need access to your system to truly troubleshoot but I'm using this on several apps and it will work.
Dear Justin,
Really appreciate your help Justin!
May I know how do I make the code so that the table column width is always the header wordings width?
Thanks!
My script works on full width, also works with grouped values. Enjoy.
js:
$(document).on('knack-page-render.any', (function(event, view, data) {
var $arrTables = $("table");
$arrTables.each(function(i){
var $table = $(this);
var $arrTrs = $table.find('tbody tr');
var $firstTr;
for( var i = 0; i < $arrTrs.length; i++){
var curTr = $arrTrs.eq(i);
if( !curTr.hasClass('kn-table-group' || 'kn-group-level-2')){
$firstTr = curTr;
break;
}
}
console.log('firstTr', $firstTr);
console.log('curTr', curTr);
var $bodyCells = $firstTr.children();
console.log('body cells', $bodyCells)
var newWidths = [];
var colWidth = $bodyCells.map(function(index, val) {
return $(this).outerWidth();
}).get();
//Evaluate new max width
var thWidths = [];
$table.find('thead tr').children().each(function(i) {
var headerWidth = $(this).outerWidth();
var bodyRowWidth = colWidth[i];
var newWidth = headerWidth;
if (bodyRowWidth > newWidth) {
newWidth = bodyRowWidth;
}
newWidth++;
$(this).css("min-width", newWidth + "px");
newWidths[i] = newWidth;
console.log('new width', newWidth);
});
console.log('$firstTr.children()',$firstTr.children());
// Set new widths everywhere
$firstTr.children().each(function(i) {
$(this).css("min-width", (newWidths[i]) + "px");
});
});
}));
css:
#view_73 table {border-collapse: collapse;}
#view_73 thead {display:block; padding: 0px; margin: 0px;}
#view_73 tbody {display:block; overflow:auto; width 100%; margin: 0px; height:600px; padding:0px;}
Dear developer, when will the sticky header work on full-width options?? Please add this feature as soon as it's a basic usage.
Besides that, it would be most helpful if the first column field can be freeze.
Currently the sticky headers is partially enabled with the new theme, but only on the max-width option. I would love for it to work on the full-width option since that is the mode I am preferring.
@nick If your table is grouped you can use the collapse table script on these threads to help handle big tables. I've modified it to toggle collapse with a button. Let me know if that would help. I could post it.
I wish that this was an option, seems like a relatively easy thing to do that would improve usability immensely.
Any news on getting this feature deployed as an option when you add/modify a table view? My boss just asked for it and I see several others have as well! :D
I REALLY like how the left column freezes when you view a table on a mobile device, but it would rock if the column headers also froze as well.
Would love to get this working with the new theme.
Has anyone using this method noticed that the column headers do not realign when changing the page or increasing/decreasing the records shown on a page? If so, has anyone found a workaround?
.
This was a super useful script. Unfortunately, It does not work with the new theme. I'm going to follow in case someone updates.
thank you Javier, this is super appreciated!
where you have applied this, had you previously set any of the column widths manually using the layout, column width? i have this scenario in my tables and wondering if this is the reason the record widths are not matching up with the header widths.
After struggling for some hours this is the solution I found:
JS:
$( document ).on ('knack-page-render.any', (function(event, view, data) {
var $table = $('#view_120 > table');
var $bodyCells = $table.find('tbody tr:first').children();
var newWidths = [];
var colWidth = $bodyCells.map(function(index, val) {
/* Debug message*/
//console.log("Index: " + index + ". Value=" + $(this).width());
return $(this).width();
}).get();
var $headerCells = $table.find('thead tr').children();
//Evaluate new max width
$table.find('thead tr').children().each(function(i){
var headerWidth = $(this).width();
var bodyRowWidth = colWidth[i];
var newWidth = headerWidth;
if (bodyRowWidth > newWidth){
newWidth = bodyRowWidth;
}
newWidth++;
$(this).css("min-width", newWidth + "px");
newWidths[i] = newWidth;
/* Debug message*/
// console.log("Cell: " + i + ", header width=", headerWidth + ", bodyRowWidth=" + bodyRowWidth + ", idealWidth=" + newWidth + " Classes: " + $(this).attr('class'));
});
// Set new widths everywhere
$table.find('tbody tr:first').children().each(function(i){
//console.log("Setting new width to " + newWidths[i]);
$(this).css("min-width", ( newWidths[i]) + "px");
});
}));
CSS:
#view_120 table {border-collapse: collapse;}
#view_120 thead {display:block; padding: 0px; margin: 0px;}
#view_120 tbody {display:block; overflow:auto; width 100%; margin: 0px; height:600px; padding:0px;}