nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Fixing Column Headers in Cross Tab Table

futbolfrank

Hello,

I've built a CrossTab which results in multiple rows of data which span across multiple pages. While viewing such report on a Web Viewer, the Column Headers run off the page once a users scrolls down.

What would be best and suggested method of fixing multiple column headers and display them as the user scrolls down? I'm currently on BIRT 2.6.1 (but could possibly move up to BIRT 4.4) I saw a previous post found in research, but that focused more on row headers.
 
Thanks!

Find more posts tagged with

Comments

Clement Wong

I'm sure there are other ways of doing this. Attached is an OS BIRT 4.5.0 example using the stickyHeader JavaScript library -- prototype.js version (<a data-ipb='nomediaparse' href='https://github.com/kingkool68/stickyHeader'>https://github.com/kingkool68/stickyHeader</a>) as a base to fix the column headers for a cross tab. The magic happens in the HTML report item (red color) that contains the <SCRIPT> contents. It is located in the first cell so that it can be called on other pages. 
 
In the example, there are two header rows to fix or make sticky. In the generated HTML, we need to pull these two <TR> from the <TBODY>, and move them into a newly created <THEAD>. We'll also need to add the stickyheader class to the table so that the JavaScript from stickyHeader will work. This is all wrapped in a callback with a head.js load of the CSS.
 
There's a few modifications to the prototype.js version script (@ <a data-ipb='nomediaparse' href='https://github.com/kingkool68/stickyHeader/blob/master/stickyheader.prototype.js). '>https://github.com/kingkool68/stickyHeader/blob/master/stickyheader.prototype.js). </a>We are using the prototype.js version because the OS BIRT Viewer is based on prototype.js. 
 
One of those modification was to change the event observations from the window to the DIV 'document', among others. From Event.observe(window,'scroll',function() { to document.getElementById('Document').onscroll = function () {
 
To test this example, run the report, make your browser's window shorter so that you'll get a vertical scroll bar. Then scroll down and you'll see the fixed (<DIV>) header appear.

shamo

Another option would be this.