Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

Code Block
languagejs
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.

...

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


Sample App

View file
nameAPP_HeaderFreeze_SA-1-20240219160812.jwa
height250