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

When using the library to freeze the header, do note that the header will be responsive towards the table's total width. Thus, when there are too many columns in the data list, the header will start to "spill out":

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


Sample App