Fixed Header Table Records

Hi,

Im trying to fixing the header of the table to the top, and when I try this the header looks like this.


How should I proceed to get the header fixed?

mvp_badge
MVP

what do you mean by "you tried it" ?

did you use a forge component?

did you build it yourself?

did you use some jquery plugin?


I use in CSS the Property "fixed" to the HeaderStyle.


SyntaxEditor Code Snippet

.TableRecords_Header{
    height: 40px;
    position: fixed;
}
mvp_badge
MVP

Hi Henrique,

Can you explain what's your goal here?

I'm not really sure what's supposed to be the outcome of making an HTML table's header having a "fixed" position...

Champion

Jorge Martins wrote:

Hi Henrique,

Can you explain what's your goal here?

I'm not really sure what's supposed to be the outcome of making an HTML table's header having a "fixed" position...


He probably has a very long list of items and wants the header to be visible at all times.

mvp_badge
MVP

Even though its a nice idea that will not work.

Please look at the forge or jquery plugins.


Hi, 

Exactly Claring! 

Example: https://codepen.io/tjvantoll/pen/JEKIu

mvp_badge
MVP

I already gave you the answer twice, so here's my final and third:


https://www.outsystems.com/forge/component/1009/headerfixed/


HI J,

Will this works on OS11 as well?


Thanks

Ash

mvp_badge
MVP

Hi Ash,

Without trying it myself, I'd expect it will still work for Traditional Web applications. Reactive Web Apps do not include jQuery and pure JavaScript is the recommended approach. 

There now seem to be other ways to achieve this anyways with only CSS (like this one or these two).

Hope this helps!

Hi Henry, take a look at this page. It will explain in detail how to do this:

https://success.outsystems.com/Documentation/How-to_Guides/Front-End/How_to_scroll_records_in_a_table_with_a_fixed_header

Hi there, 

Nowadays all you need is some good CSS classes. The key attribute is the position: sticky, for documentation on that CSS property check this link: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning 

If you want to apply the sticky header to all your table records, just apply the following: 

.TableRecords .TableRecords_Header{
    position: sticky;
    top: var(--header-size);  
    z-index: 5;
}

For all modern browsers, this works well. You only need the other techniques for compatibility with legacy browsers no one should be using anyway. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.