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 this 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