Lock the headers in the query results when you scroll down?

Lock the headers:

Similarly, can we lock the scroll bar and page number of query results, so it is visible even when you are not at the bottom?

Unfortunately neither of those are currently possible, but are definitely a good idea.

Are there any additional details on why it’s not possible. I’m being asked to implement this in our next sprint so even hints at what other people have tried would be helpful. Thank you!

Do some research first? It’s a very common problem in HTML. Lots of StackOverflow questions about it without any pretty solutions.

The root issue of sticky headers is column width: CSS doesn’t allow allow for a sticky position in a <thead> element. Maybe browsers will implement it someday. This would be the “magic” solution.

Without it, the usual solution is for your markup to include two tables: one with the <thead> and one with the <tbody>. Your job in JS is to keep the width of each header synced to the maximum width of any descended element. Or to force the columns to a pre-determined width and match their positioning.

There are React components that do this already. And many more that do it with jQuery. But they don’t match the style of Antd (our component library). And since the Table component is used throughout the application, it’s not so simple to swap one component for another. They have different data interfaces, after all.

Arik’s point above is not that sticky headers are impossible generally or undesirable. They are just complicated to implement without a lot of hassle. Like changing the tires on your auto while you fly down the freeway.

We would gladly review a PR.

Thank you very much. I appreciate you taking the time to add these details. I’ll be able to quickly demonstrate the alignment problem to the stakeholders with this information so they know what they’d be giving up to get this feature.

Hey, antd. seems to have frozen headers with scroll prop

Yes, it does, the only problem with Antd fixed headers is that it relies on specifying width sizes for the columns, which is a problem as we need it to have a dynamic behavior .

Hi, this issue can be solve? Thanks!

Hey, you solved it? Now, I want to update it, Thanks!

Hello, this issue solved it? Someone PR? Thanks!

Hello everyone, I did this feature in this PR:

If someone want to add this, please to get it.

FYI this was merged in #5103.