Hello! I found a solution to freeze my table headers through a user on this community post:
https://support.knack.com/hc/en-us/community/posts/220703228/comments/360009715371
Justins code works great for freezing my table headers initially, but if I apply a filter, sort, or change any record view, the columns and rows become misaligned to the point that the record data becomes unreadable. I have spent an embarrassing amount of time going through each line of code and commenting it out to try and see if I can't find where the issue is coming from. I believe it's from the //Evaluate new max width in the JS or from the thead or tbod in the CSS. I've been tearing my hair out trying to figure out how to fix it, so I'm hoping someone can help me figure out where the issue is arising or what is triggering it. Thank you in advanced for any and all help, I hope to be able to learn enough to contribute back to the community one day!
The code is below:
JS Code:
$(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 Code:
#view_5 table {border-collapse: collapse;}
#view_5 thead {display:block; padding: 0px; margin: 0px;}
#view_5 tbody {display:block; overflow:auto; width 100%; margin: 0px; height:600px; padding:0px;}