Just a few lines of JavaScript in the Dashboard Properties section will implement a scroll table with fixed header and footer.
Here is how you do it:
In the Element Container Properties --> Advanced tab of the scroll table, find the #elContainer Id. If needed substitute the #elContainer Id in the JavaScript below
The JavaScript should be placed in the Dashboard Properties --> Scripts (JS) included in page body section
JavaScript to be included:
// Enable fixed header on table visualization in elContainer_1
$("body").on("dataElementRendered", "#elContainer_1", function(evt,elRes){
var config = $.guruTools.tablescroll.getConfig($(this).attr("id"));
config.autoscroll = false
$.guruTools.tablescroll.initialize(config, elRes);
});
NB!
If the scroll table is not wide enough, or the browser is resized to a smaller size, one or more column headers might occupy more than 1 line. This will cause an extra unwanted scrollbar in the table element.
Go to the Column Properties dialogue:
By uncheking the Allow wrapping checkbox, and/or setting a fixed column Width, and/or changing the column name to a one word colum name, you can force the column headers to occupy max one line.