Sticky Table Header

Blog Post concerning sticky table headers

• Give your region a specific height, for example 480px
• Add following lines to your css definition

table thead, table tfoot {
  position: sticky;
  z-index: 10; /* cause fontawesome icons */
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
  background-color: white; /* make your background not transparent*/
}

• That should do the trick

• I have used following code, to move the last row of the table to a new tfoot, in order to make that sticky too

• you can place these lines inside a dynamic action - AfterRefresh on the report itself

// get the table
const table = document.getElementById("report_table_empl-table");

// Create an empty <tfoot> element and add it to the table:
const footer = table.createTFoot();

// get all rows
const rows = table.getElementsByTagName('tr');

// store the last
const shifted = rows[rows.length-1];

// remove the last
rows[rows.length-1].parentNode.removeChild(rows[rows.length-1]);

// append to footer
footer.appendChild(shifted);

• don't forget to give the table an ID