<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.col {
width: 100px;
}
</style>
<a4j:keepAlive beanName="dataScrollerBean" ajaxOnly="true"/>
<h:form>
<rich:datascroller align="left" for="carList" maxPages="20"
page="#{dataScrollerBean.scrollerPage}" reRender="sc2" id="sc1" />
<rich:spacer height="30" />
<rich:dataTable width="483" id="carList" rows="10" columnClasses="col"
value="#{dataTableScrollerBean.allCars}" var="category">
<f:facet name="header">
<rich:columnGroup>
<h:column>
<h:outputText styleClass="headerText" value="Make" />
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Model" />
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Price" />
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Mileage" />
</h:column>
</rich:columnGroup>
</f:facet>
<h:column>
<h:outputText value="#{category.make}" />
</h:column>
<h:column>
<h:outputText value="#{category.model}" />
</h:column>
<h:column>
<h:outputText value="#{category.price}" />
</h:column>
<h:column>
<h:outputText value="#{category.mileage}" />
</h:column>
</rich:dataTable>
<rich:datascroller align="left" for="carList" maxPages="20"
page="#{dataScrollerBean.scrollerPage}" id="sc2" reRender="sc1" />
</h:form>
</ui:composition>
