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.

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


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

...

Figure 1 Header Freezed when scrolling data in the list


Setback with the current method

Warning
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 are too much many columns in the data list, the header will start to "spill out":

...

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


Sample App

View file
nameAPP_kb_dx8_HeaderFreeze_SA.jwa
height250