Freeze Header for Data List UI

Introduction

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

How Does It Work?

The following steps describe how to enable sticky headers for a Data List:

Add custom JavaScript

1. 1. Navigate to UI Builder > Settings > Theme > Sub Header
   2. Paste the following <script> tag to include the StickyTableHeaders plugin:

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

Add the JavaScript Logic

1. 1. Navigate the UI Builder > Settings > Theme > Advanced > Custom JavaScript.
   2. Paste the following code:

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();
    });
});

Expected Outcome

When implemented correctly, the header of the Data List (as shown in the screenshot below) will remain fixed at the top while the user scrolls vertically through the list items. The behavior ensures that the column headers are always visible for better usability:

Sample App