How to: Scroll Table with Fixed Table Header and Footer

1 post / 0 new
oyvind's picture
How to: Scroll Table with Fixed Table Header and Footer

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);



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.