| Table of Contents |
|---|
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:
| Code Block | ||
|---|---|---|
| ||
$(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();
});
}); |
...
Figure 1 Header Freezed when scrolling data in 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 too much columns in the data list, the header will start to "spill out": |
...