# Freezing Table Headers

**URL:** <https://forums.knack.com/t/freezing-table-headers/10334>\
**Category:** Ask Developers\
**Created:** [December 16, 2014, 10:26pm UTC](https://forums.knack.com/t/freezing-table-headers/10334 "2014-12-16T22:26:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![SteveScott52178](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@SteveScott52178](https://forums.knack.com/u/SteveScott52178)\
**Post date:** [December 16, 2014, 10:26pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/1 "2014-12-16T22:26:30Z")

</div>

Has anyone used query to freeze table headers and allow scrolling of rows?

---

<div class="post-metadata">

**Author:** ![Brockmassi65785](https://avatars.discourse-cdn.com/v4/letter/b/3d9bf3/32.png) [@Brockmassi65785](https://forums.knack.com/u/Brockmassi65785)\
**Post date:** [September 2, 2020, 2:22am UTC](https://forums.knack.com/t/freezing-table-headers/10334/2 "2020-09-02T02:22:37Z")

</div>

Alec,

Were you able to resolve the filter menu resize issue? I am having the same event.&nbsp;

---

<div class="post-metadata">

**Author:** ![AlecKap48889](https://avatars.discourse-cdn.com/v4/letter/a/74df32/32.png) [@AlecKap48889](https://forums.knack.com/u/AlecKap48889)\
**Post date:** [July 11, 2020, 6:40pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/3 "2020-07-11T18:40:54Z")

</div>

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.&nbsp;

Do you know what might be causing this? Thanks again for your code and thanks in advanced for any and all help!

---

<div class="post-metadata">

**Author:** ![jrs32421](https://avatars.discourse-cdn.com/v4/letter/j/85f322/32.png) [@jrs32421](https://forums.knack.com/u/jrs32421)\
**Post date:** [March 21, 2020, 5:43am UTC](https://forums.knack.com/t/freezing-table-headers/10334/4 "2020-03-21T05:43:09Z")

</div>

Does anyone knows how to freeze pane?&nbsp;  
I need to freeze the first 2 column of the table while panning left and right.&nbsp;

---

<div class="post-metadata">

**Author:** ![jrs32421](https://avatars.discourse-cdn.com/v4/letter/j/85f322/32.png) [@jrs32421](https://forums.knack.com/u/jrs32421)\
**Post date:** [March 20, 2020, 3:19pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/5 "2020-03-20T15:19:22Z")

</div>

Dear Justin,

&nbsp;

I had changed the view # and it's working however the column width display the full width of the column.&nbsp;

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](mailto:jordanshu8@gmail.com)

&nbsp;

Thanks

---

<div class="post-metadata">

**Author:** ![jrs32421](https://avatars.discourse-cdn.com/v4/letter/j/85f322/32.png) [@jrs32421](https://forums.knack.com/u/jrs32421)\
**Post date:** [March 20, 2020, 2:46pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/6 "2020-03-20T14:46:29Z")

</div>

Can you kindly give me your email address.&nbsp;

I would like to share my screen to you.&nbsp;

It would be of great help.

Thanks mate.&nbsp;

---

<div class="post-metadata">

**Author:** ![Justin11773](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@Justin11773](https://forums.knack.com/u/Justin11773)\
**Post date:** [March 20, 2020, 2:42pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/7 "2020-03-20T14:42:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jrs32421](https://avatars.discourse-cdn.com/v4/letter/j/85f322/32.png) [@jrs32421](https://forums.knack.com/u/jrs32421)\
**Post date:** [March 20, 2020, 1:44pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/8 "2020-03-20T13:44:28Z")

</div>

Dear Justin,

Really appreciate your help Justin!&nbsp;

May I know how do I make the code so that the table column width is always the header wordings width?

&nbsp;

Thanks!

---

<div class="post-metadata">

**Author:** ![Justin11773](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@Justin11773](https://forums.knack.com/u/Justin11773)\
**Post date:** [March 17, 2020, 7:33pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/9 "2020-03-17T19:33:44Z")

</div>

My script works on full width, also works with grouped values.&nbsp; 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");  
});  
});  
}));

&nbsp;

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;}

&nbsp;

---

<div class="post-metadata">

**Author:** ![jrs32421](https://avatars.discourse-cdn.com/v4/letter/j/85f322/32.png) [@jrs32421](https://forums.knack.com/u/jrs32421)\
**Post date:** [March 17, 2020, 4:08pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/10 "2020-03-17T16:08:45Z")

</div>

Dear developer, when will the sticky header work on full-width options?? Please add this feature as soon as it's a basic usage.&nbsp;

Besides that, it would be most helpful if the first column field can be freeze.&nbsp;

---

<div class="post-metadata">

**Author:** ![Ben31053](https://avatars.discourse-cdn.com/v4/letter/b/5daacb/32.png) [@Ben31053](https://forums.knack.com/u/Ben31053)\
**Post date:** [August 9, 2018, 3:21pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/11 "2018-08-09T15:21:28Z")

</div>

Currently the sticky headers is partially enabled with the new theme, but only on the max-width option.&nbsp;I would love for it to work on the&nbsp;full-width option since that is the mode I am preferring.

---

<div class="post-metadata">

**Author:** ![Justin11773](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@Justin11773](https://forums.knack.com/u/Justin11773)\
**Post date:** [June 22, 2018, 9:33pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/12 "2018-06-22T21:33:32Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![NickLowrie12740](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@NickLowrie12740](https://forums.knack.com/u/NickLowrie12740)\
**Post date:** [June 22, 2018, 9:07pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/13 "2018-06-22T21:07:06Z")

</div>

I wish that this was an option, seems like a relatively easy thing to do that would&nbsp;improve usability immensely.

---

<div class="post-metadata">

**Author:** ![Bfritz88662](https://avatars.discourse-cdn.com/v4/letter/b/b9bd4f/32.png) [@Bfritz88662](https://forums.knack.com/u/Bfritz88662)\
**Post date:** [November 3, 2017, 7:01pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/14 "2017-11-03T19:01:58Z")

</div>

**Any news on getting this feature deployed as an option when you add/modify a table view**?&nbsp; My boss just asked for it and I see several others have as well!&nbsp; :D

I REALLY like how the left&nbsp;column freezes when you view a table on a mobile device, but it would rock if the column headers also froze as well.

&nbsp;

---

<div class="post-metadata">

**Author:** ![AmyFriedma05833](https://avatars.discourse-cdn.com/v4/letter/a/7c8e57/32.png) [@AmyFriedma05833](https://forums.knack.com/u/AmyFriedma05833)\
**Post date:** [August 25, 2017, 5:51pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/15 "2017-08-25T17:51:19Z")

</div>

Would love to get this working with the new theme.

---

<div class="post-metadata">

**Author:** ![TylerLangf98016](https://avatars.discourse-cdn.com/v4/letter/t/919ad9/32.png) [@TylerLangf98016](https://forums.knack.com/u/TylerLangf98016)\
**Post date:** [August 14, 2017, 8:33pm UTC](https://forums.knack.com/t/freezing-table-headers/10334/16 "2017-08-14T20:33:49Z")

</div>

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? &nbsp;If so, has anyone found a workaround?&nbsp;

---

<div class="post-metadata">

**Author:** ![Justin11773](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@Justin11773](https://forums.knack.com/u/Justin11773)\
**Post date:** [June 26, 2017, 5:56am UTC](https://forums.knack.com/t/freezing-table-headers/10334/17 "2017-06-26T05:56:43Z")

</div>

.&nbsp;

---

<div class="post-metadata">

**Author:** ![Justin11773](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@Justin11773](https://forums.knack.com/u/Justin11773)\
**Post date:** [June 26, 2017, 5:35am UTC](https://forums.knack.com/t/freezing-table-headers/10334/18 "2017-06-26T05:35:41Z")

</div>

This was a super useful script. Unfortunately, It does not work with the new theme. &nbsp;I'm going to follow in case someone updates.&nbsp;

---

<div class="post-metadata">

**Author:** ![juliemarti35698](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@juliemarti35698](https://forums.knack.com/u/juliemarti35698)\
**Post date:** [June 6, 2016, 3:38am UTC](https://forums.knack.com/t/freezing-table-headers/10334/19 "2016-06-06T03:38:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JavierZepe59417](https://avatars.discourse-cdn.com/v4/letter/j/f475e1/32.png) [@JavierZepe59417](https://forums.knack.com/u/JavierZepe59417)\
**Post date:** [May 27, 2016, 1:04am UTC](https://forums.knack.com/t/freezing-table-headers/10334/20 "2016-05-27T01:04:09Z")

</div>

After struggling for some hours this is the solution I found:

JS:&nbsp;

```
$( 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");
  });
}));
```

&nbsp;

&nbsp;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;}
```

&nbsp;

[Next page](https://forums.knack.com/t/freezing-table-headers/10334.md?page=2)