I have been trying to come up with a clean way in both FF and IE to create a locked header column (the left-most column) in a dataTable.

I first tried scrollableDataTable, but it isn't clean (works great in FF, but IE has layout bugs).

I have found a CSS based solution (allowing you to use a plain old rich:dataTable component):

The CSS code follows. This requires 2 rich:column components for each locked column. Unfortunately in FF they must have the same width so that sizes match up (this means a hard-coded number of pixels). The border rules may need to be tweaked to fit both FF and IE depending on how you had them setup.

/* position:absolute only locks columns in FF, it also requires a place holder to keep from overlapping content */
td.locked, th.locked {
 width: 100px;
 position: absolute;
 z-index: 100;
 border-top: none;
 border-left: 1px solid #A0A0A0;
 padding: 3px;
}
td.lockedPlaceHolder, th.lockedPlaceHolder {
 width: 100px;
 display: block;
 z-index: 0;
 border-top: none;
 border-left: 1px solid #A0A0A0;
 padding: 3px;
}

/* position:relative only locks columns in IE, it also breaks borders in FF */
[if IE] td.locked, th.locked {
 width: 100%;
 position: relative;
 left: -1px;
 border-bottom: none;
 border-top: 1px solid #A0A0A0;
}
/* border tweaks */
[if IE] tr.rich-table-subheader td.locked, tr.rich-table-subheader th.locked { border-top: none; }
/* IE does not require a place holder so we hide it */
[if IE] td.lockedPlaceHolder, th.lockedPlaceHolder { display: none; }

The above has only been tested in FF3 and IE7.

I hope this can help the other people who have also been trying to deal with this problem.

If anyone has a better solution, please let me know. Any and all help/advice is much appreciated.

Thanks.
-Shadow