Fixed Column Headers on Window Scroll

Tags: #<Tag:0x00007efc651fc558> #<Tag:0x00007efc651fc3f0>
#1

Hey,

Hope all is well.

I’m investigating the best way to have fixed column headers as I scroll down the page. This is the window scroll bar and not the one within the table itself.

Lets say I have a table and other content below the table. If I use the scroll bar within the table then the headers are fixed, which is perfect.

However if i’m using the window scroll and I scroll pass the headers, they are not sticky and a lot of context is lost. It’s easy to say “Well the user should just scroll back up” but it’s never as easy as that and personally from a UX perspective I think think this sort of feature would be great.

So I guess my question is does Handsontable have a preferred way to do this already? Or can you point me in the right direction, before we try and support this ourselves. I did have a look at the docs and could not see anything. I came across a few forum posts as well, but they all seemed slightly different to this use case.

Thanks, James

#2

Hi @james.dale

I’m not sure if I missed something in your requirements, but isn’t it acting like this already? Please check this example: https://jsfiddle.net/handsoncode/oywb8dt3/

#3

Yes! Thats what we want, will investigate our side, we have probably done something to break this.

Cheers, James

#4

Sure, let me know if you would need help with anything else :slight_smile:

#5

Hi,

So I got chance to debug this a bit it appears to be related to setting the height on the table or even the parent div. We have many cases where we set the table height manually especially when we have multiple tables per page.

Do you have any suggestions around this?

Thanks, James

#6

Hi @james.dale

Thank you for the update. That’s a desired behavior, actually. If the table has set a fixed height the assumption is that it will be visible in full, though the column headers will be always visible. If the height is not defined then it assumes that it might be higher than the viewport and the column headers move with the browser scroll.

As this is a solution by design, currently we don’t have any option to change that behavior.

#7

Hey,

Cool cheers for that, makes sense.

Thanks, James

#8