Sticky TableRecord's Header Row
Question

HI there,

Can we make the header row of a table record to always shown as we scroll the table record?

Thank you very much

regards

mvp_badge
MVP

Hi Marco,

How to do it in Outsystems?

Tq7

Champion

Behavioral wrote:

Hi Marco,

How to do it in Outsystems?

Tq7

Hi,

 Please go through with the below link.

https://success.outsystems.com/Documentation/Development_FAQs/How_to_scroll_records_in_a_table_with_a_fixed_header

Regards,

Pankaj Pant

Pankaj pant wrote:

Behavioral wrote:

Hi Marco,

How to do it in Outsystems?

Tq7

Hi,

 Please go through with the below link.

https://success.outsystems.com/Documentation/Development_FAQs/How_to_scroll_records_in_a_table_with_a_fixed_header

Regards,

Pankaj Pant

Hi Pank

It did not work.

When i scroll the browser vertical scroll bar, the header follows going up.

I want the header stays visible.

regards and thank you


While I understand the solotion depends on the situations and the target web browsers, the following CSS code just worked for me. Let me leave a comment here for the later reference.

.TableRecords .TableRecords_Header {
    position: sticky; top: 0;
}

Other ideas can be found in the following link.

https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body

Fully agree, spent ages in outsystems pages trying to find a well-supported way to do this. Like you say 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;
}

  

Nice contribution! José Queirós.


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