Introduction

In this article, we will show you how to make a header freeze when scrolling down a data list using a JavaScript library from github.com/jmosbech/StickyTableHeaders.

Getting Started

Configuration

Add custom JavaScript 

Navigate through UI Builder > Settings > Theme > Advanced > Custom JavaScript. Enter the sample code below:

function initializeStickyHeaders() {
    $('table.responsivetable').stickyTableHeaders({
        fixedOffset: $('.navbar').height()
    });
}

$(function(){
    // Initialize sticky table headers on page load
    initializeStickyHeaders();
    
    // Re-run initialization code when custom event 'page_loaded' is triggered
    $(document).on('page_loaded', function() {
        initializeStickyHeaders();
    });
});

Load the library with <script> tag and a CDN(Content Delivery Network) link provided from github.com/jmosbech/StickyTableHeaders in the Sub Header.

<script src="https://unpkg.com/sticky-table-headers"></script>

The header will freeze on the top and will overlap through the data in the list.

Figure 1 Header Freezed when scrolling data in the list

Setback with the current method

Figure 2 Header "spilled out" due to excessive columns in the list body

Sample App

APP_HeaderFreeze_SA-1-20240219160812.jwa