SharePoint jQuery: Scrolling View with Frozen Header

SharePoint lists that contain a lot of numeric data type columns can be hard to look at when the column headers scroll out of view. Such lists are typically created by moving data entry into SharePoint from Excel, where users could easily freeze the header row. As I showed back in 2005 for ASP.NET datagrids, you can achieve a frozen header row also for HTML tables by applying a simple CSS style.

The following jQuery script contains a selector to first find the table that contains the view of the specified list. Then it wraps the table in a scrolling pane and finally applies the CSS style that freeze the header row. The style class itself is also included above the actual jQuery script. The script shows how to use a jQuery object as the selector context to speed up element lookup.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>

<script type="text/javascript">
$(function(){
var $table = $("TABLE[ID^='{4C9CFF20-B467-4E10-820C-0A132442CF98}']:first", "#MSO_ContentTable");

<!--WRAP TABLE IN SCROLL PANE-->
$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 420px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>

The ID attribute of the SharePoint view <TABLE> element is a combination of the the list's GUID and the view's GUID. The script shows how to use the attribute starts with filter (^) on the table's ID. The found table is kept in a jQuery object named $table for manipulation and for use as a jQuery context. Use View-Source to view the page HTML, search for ContextInfo and look for the first <TABLE> element beneath it to find the list's GUID.

The $table object is then injected into a DIV with a fixed height and overflow:auto to get a scrollbar on the list, using the wrap(html) manipulation function. The script then looks up the table's header TR element based on it's class and appends the DataGridFixedHeader style to the header row.


To avoid hardcoding list GUIDs into your scripts, you can use the SharePoint JavaScript ContextInfo object to set the value of the table ID attribute filter:

$("TABLE[ID^='" + ctx.listName + "']")

Each view page has an instance of the ContextInfo object named ctx, and you can access any JavaScript object on the page from jQuery - afterall it is just a JavaScript DSL.

Using the ContextInfo object allows you to put generic jQuery scripts into common files that you include using a CEWP in view pages for more than just one list. In addition, I recommend putting script that only applies to a specific list in a list specific file that is only included in the view pages of the list.