DataTable - Complex

This example demonstrates various features such as paging, sorting, filtering and selection.

List of Cars
ModelYearManufacturerColor
d104282f 1976 Audi Red
36af9b65 1961 Ford Red
d197ed06 1963 Honda Orange
3b7e882a 1966 Opel Green
9cd91756 1997 Mercedes Black
ead83232 1972 Jaguar Brown
e021d1b4 1989 Audi Red
8e54fa99 1970 Ford Silver
bb554c89 1997 Jaguar Red
5a55d664 1987 BMW Yellow
Car Detail
Model:
Year:
Manufacturer:
Color:

Source

<h:form id="form">

    <p:dataTable var="car" value="#{tableBean.cars}" rowKey="#{car.model}" paginator="true" rows="10"
                selection="#{tableBean.selectedCar}" selectionMode="single" filteredValue="#{tableBean.filteredCars}" id="carsTable">

        <p:ajax event="rowSelect" update=":form:display" oncomplete="carDialog.show()" />

        <f:facet name="header">
            List of Cars
        </f:facet>

        <p:column headerText="Model" sortBy="model" filterBy="model" id="model">
            #{car.model}
        </p:column>

        <p:column headerText="Year" sortBy="year" filterBy="year" id="year">
            #{car.year}
        </p:column>

        <p:column headerText="Manufacturer" sortBy="manufacturer" filterBy="manufacturer" id="manufacturer">
            #{car.manufacturer}
        </p:column>

        <p:column headerText="Color" sortBy="color" filterBy="color" id="color">
            #{car.color}"
        </p:column>

    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
              width="200" showEffect="explode" hideEffect="explode">

        <h:panelGrid id="display" columns="2" cellpadding="4">

            <f:facet name="header">
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
            </f:facet>

            <h:outputText value="Model:" />
            <h:outputText value="#{tableBean.selectedCar.model}" id="model"/>

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" id="year"/>

            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" id="manufacturer"/>

            <h:outputText value="Color:" />
            <h:outputText value="#{tableBean.selectedCar.color}" id="color"/>
        </h:panelGrid>
    </p:dialog>

</h:form>