How to Use Sticky Table Header This plugin allows you to keep your table headers fixed at the top of the screen or container while users scroll through a long Repeating Group.

1. Setup the Header ID
Select the Group or HTML element that acts as your table header.

Go to the property editor for that element and locate the ID Attribute field (at the bottom of the "Appearance" tab).

Enter a unique ID (e.g., my-sticky-header).

Note: If you don't see the ID Attribute field, enable it in your app's Settings > General > "Expose the option to add an ID attribute to HTML elements".

2. Configure the Plugin Element
Place the "Sticky Table Header" element anywhere on your page.

In the element’s properties, find the Header ID field.

Paste the exact same ID you created in Step 1 (e.g., my-sticky-header).

3. Refine the Behavior
The plugin will now automatically detect that element and apply the necessary CSS to make it "stick" when it reaches the top of its scrollable container.

Pro Tip: Ensure your header has a background color set; otherwise, the Repeating Group data may appear visible behind the text as it scrolls underneath.

Common Use Cases:
Dashboards: Keep column titles visible in long lists of transactions or users.

Mobile Apps: Prevent users from losing track of which column is which on small screens.

Data Grids: Perfect for any Repeating Group where alignment and context are critical.


Demo Page: https://hks-demos.bubbleapps.io/version-test/sticky_header_demo

Demo Editor: https://bubble.io/page?id=hks-demos&test_plugin=1776087327114x231801787871133700_current&tab=Design&name=sticky_header_demo&type=page&elements=cmMuv