You can create a scrollable table using javascript.
scroller.js var divContent = null;
var divHeaderRow = null;
var divHeaderColumn = null;
var divHeaderRowColumn = null;
var headerRowFirstColumn = null;
var x;
var y;
var horizontal = false;
var vertical = false;
function CreateScrollHeader(cont, scrollHorizontal, scrollVertical)
{
if (typeof cont == '
string') content = document.getElementById(cont).parentNode;
horizontal = scrollHorizontal;
vertical = scrollVertical;
if (content != null)
{
divContent = content;
var headerRow = divContent.childNodes[0].childNodes[0].childNodes[0];
x = divContent.childNodes[0].offsetWidth;
y = divContent.childNodes[0].offsetHeight;
divHeaderRow = divContent.cloneNode(true);
if (horizontal)
{
divHeaderRow.style.height = headerRow.offsetHeight;
divHeaderRow.style.overflow = "hidden";
divContent.parentNode.insertBefore(divHeaderRow, divContent);
divContent.childNodes[0].style.position = "absolute";
divContent.childNodes[0].style.top = "-" + headerRow.offsetHeight;
y = y - headerRow.offsetHeight;
}
divHeaderRowColumn = divHeaderRow.cloneNode(true);
headerRowFirstColumn = headerRow.childNodes[0];
divHeaderColumn = divContent.cloneNode(true);
divContent.style.position = "relative";
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderColumn, divContent);
divContent.style.left = headerRowFirstColumn.offsetWidth;
divContent.childNodes[0].style.position = "absolute";
divContent.childNodes[0].style.left = "-" + headerRowFirstColumn.offsetWidth;
}
else
{
divContent.style.left = 0;
}
if (vertical)
{
divHeaderColumn.style.width = headerRowFirstColumn.offsetWidth;
divHeaderColumn.style.overflow = "hidden";
divHeaderColumn.style.zIndex = "99";
divHeaderColumn.style.position = "absolute";
divHeaderColumn.style.left = "0";
addScrollSynchronization(divHeaderColumn, divContent, "vertical");
x = x - headerRowFirstColumn.offsetWidth;
}
if (horizontal)
{
if (vertical)
{
divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
}
divHeaderRowColumn.style.position = "absolute";
divHeaderRowColumn.style.left = "0";
divHeaderRowColumn.style.top = "0";
divHeaderRowColumn.style.width = headerRowFirstColumn.offsetWidth;
divHeaderRowColumn.overflow = "hidden";
divHeaderRowColumn.style.zIndex = "100";
divHeaderRowColumn.style.backgroundColor = "#ffffff";
}
if (horizontal)
{
addScrollSynchronization(divHeaderRow, divContent, "horizontal");
}
if (horizontal || vertical)
{
window.onresize = ResizeScrollArea;
ResizeScrollArea();
}
}
}
// Resize scroll area to window size.
function ResizeScrollArea()
{
var height = document.documentElement.clientHeight -
294;
if (!vertical)
{
height -= divHeaderRow.offsetHeight;
}
var width = document.documentElement.clientWidth -
50;
if (!horizontal)
{
width -= divHeaderColumn.offsetWidth;
}
var headerRowsWidth = 0;
divContent.childNodes[0].style.width = x;
divContent.childNodes[0].style.height = y;
if (divHeaderRowColumn != null)
{
headerRowsWidth = divHeaderRowColumn.offsetWidth;
}
// width
if (divContent.childNodes[0].offsetWidth > width)
{
divContent.style.width = Math.max(width - headerRowsWidth, 0);
divContent.style.overflowX = "scroll";
divContent.style.overflowY = "auto";
}
else
{
divContent.style.width = x;
divContent.style.overflowX = "auto";
divContent.style.overflowY = "auto";
}
if (divHeaderRow != null)
{
divHeaderRow.style.width = divContent.offsetWidth + headerRowsWidth;
}
if (divContent.childNodes[0].offsetHeight > height)
{
divContent.style.height = Math.max(height, 80);
divContent.style.overflowY = "scroll";
}
else
{
divContent.style.height = y;
divContent.style.overflowY = "hidden";
}
if (divHeaderColumn != null)
{
divHeaderColumn.style.height = divContent.offsetHeight;
}
if (divContent.style.overflowY == "scroll")
{
divContent.style.width = divContent.offsetWidth + 17;
}
if (divContent.style.overflowX == "scroll")
{
divContent.style.height = divContent.offsetHeight + 17;
}
divContent.parentElement.style.width = divContent.offsetWidth + headerRowsWidth;
}
function getOnScrollFunction(oElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.srcElement.scrollTop;
};
}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);
fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null)
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
Note : adjust the value shown in the bold (ResizeScrollArea())if you are not getting scroller.In the above case table appears to the full length of the browser.if you table appears in some small area adjust the value.
In your JSF file add this
Add this on your body onload
CreateScrollHeader('form1:table1', true,false);
This is your form content
h:form id="form1"
div
div:div style="left: 20px; top: 250px; position: absolute;"
div:div
div:div
h:dataTable id="table1" ....
div:div - end tag
div:div -end tag
div:div -end tag
Note : div tag is own renderer component which gives you a div tag
Have a look of this link for DIV
http://www.jsftutorials.net/components/step1.html
