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(){
    // 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>


Header will freeze on the top while overlapping through the data in the list.

Figure 1 Header Freezed when scrolling data in 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 is too much columns in the data list, the header will start to "spill out":

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