Header Visibility

Hello,
Is there a way to make the table header sticky at a specific position, for example top: 50px? My table has 20 records per page, and when I scroll down, I want the header to remain visible at that level. Any solutions would be appreciated.

Regards,

Hi @ykifahh

I have an example that may help. It is not perfect and may need some adjustments, but it shows how to fix the headers. Here’s a demo Handsontable example - JSFiddle - Code Playground .

Is there a better solution? I’m currently using height: auto, and I already have a pre-loading script, so I can’t set a fixed height because it would break the preloader. I’d like to keep my current setup, but I just want the header to stay visible when the user scrolls down.

Hm.. we can test something out.

Could you please share your recent progress in a demo so I can work on what is already defined and works well for you? Maybe there are also other settings you’d like to have.

Sure, here is the demo of my code

Thank you so much for your help, and Happy New Year! :blush:

Hi @ykifahh Thank you for sharing the demo. I think that I have made some progress here. It is getting quite big for JSFiddle so I have it saved as a single HTML file. I cannot share it via post (forum restrictions, so I sent it to you via forum PM).

Hi @ykifahh,

from what you shared, it looks like you already have a fairly advanced idea and setup for your app.

If you think it would be helpful, we could also jump on a short call to walk through your use case and discuss the best approach together. Sometimes it’s just easier and faster to align live, especially with more custom scenarios like this.

Let me know what you think and if that sounds useful to you. We can schedule details on email - support@handsontable.com

Sounds good!
I will send you an email to figure out how to solve this issue

We can close this thread as we moved to emails.