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