CODEWITHSUNDEEP
jsf
Raam
Raam

Reputation: 29

JSF - Scrollable DataTable

Is there any way to implement a scrollable datatable without using Rich Faces ? If there is can anyone point me to some code samples or example pages ? Thanks.

Upvotes: 1

Views: 14978

Answers (2)

UdayKiran Pulipati
UdayKiran Pulipati

Reputation: 6667

Use div component for scrollable datatable in jsf and mention properties height: 200px; overflow: auto; in style attribute.

<div style="height: 200px; overflow: auto;">
    <h:dataTable value="#{facesBean.files}" var="file">
        <h:column>
            <f:facet name="header">
                <h:outputText value="Image"></h:outputText>
            </f:facet>
            <h:graphicImage value="#{files.image}" style="width:100px; height:100px;"></h:graphicImage>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Description"></h:outputText>
            </f:facet>
            <h:outputText style="font-weight:bold;" value="File Name:"></h:outputText>
            <h:outputText value="#{file.alt}"></h:outputText>
        </h:column>
    </h:dataTable>
</div>

Upvotes: 4

Ellie Fabrero
Ellie Fabrero

Reputation: 811

This can be achieved via CSS. You must use the css property overflow:scroll or overflow-x and overflow-y. But take note that different browsers treat this property differently so you it may result to different behavior.

You make a h:dataTable wrap inside a div. Change the property of the div using css and add overflow property to scroll. Make sure that your table has a fixed sized.

You may want to look at this

http://anaturb.net/csstips/sheader.htm

-cheers :)

Upvotes: 2

Related Questions