Excel like 'Freeze column header' functionality in sharepoint OOB list view webpart

Question

Hi,
I have OOB external list dropped on a page as listview webpart. It contains many records and hence while scrolling down headers are no available, hence it should freeze all column headers while scrolling down the page. Its directly dragged and dropped
on site page hence no server side formatting can be done.
Is there any way we can apply some client side script to freeze column headers to listview webpart while scrolling down? or any settings that can be done to acheive this?
Thanks in advance.
Regards,
Rahul

Answer 1

Hi Rahul,
Normal techniques for freezing the header row of an HTML table tend to fall short when it comes to SharePoint 2010 lists due to the lack of THEAD elements.
You can try something like this, although you may want to test it in various browsers in case the column heading alignment is off.
<style>
.ms-viewheadertr{background-color:white;}
</style>
<script>
/* wrap the table in a div, set its height, give it scrollbars, and move it down */
var myTable = document.querySelector(".ms-listviewtable");
var wrapperDiv = document.createElement('div');
wrapperDiv.setAttribute("ID","FreezePaneWrapper");
wrapperDiv.setAttribute("style","OVERFLOW: auto; HEIGHT: 400px; padding-top:38px;");
wrapperDiv.appendChild(myTable.cloneNode(true));
myTable.parentNode.replaceChild(wrapperDiv,myTable);
/* Freeze the header row and move it up*/
var headerRow = document.querySelector(".ms-viewheadertr");
document.getElementById("FreezePaneWrapper").style.width = "" + headerRow.scrollWidth + "px";
headerRow.style.width = "" + headerRow.scrollWidth + "px";
headerRow.style.position = "absolute";
headerRow.style.top = ""+(headerRow.offsetTop-39)+"px";
/* Tell the header's columns to be the same width as the cells in the first "alternating" row */
var columns = document.querySelector("table.ms-listviewtable tr.ms-alternating").querySelectorAll("tr>td");
headers = document.querySelectorAll("tr.ms-viewheadertr th");
for(var i = 0; i < headers.length; i++){
if(columns[i].scrollWidth > headers[i].scrollWidth){
headers[i].style.width = ""+columns[i].scrollWidth + "px";
}else{
columns[i].style.width = ""+headers[i].scrollWidth + "px";
</script>
Edit: Also, you may want to inspect the HTML attributes on the external list view to be sure the class names match up with the querySelector parameters above. Specifically, the table should have a class of "ms-listviewtable", the header row should
have a class of "ms-viewheadertr", and rows of alternating background color should have a class of "ms-alternating".
If any of those are different in your case, you may be able to adjust the above code accordingly.