DataTable - Complex

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

List of Cars
pp12345pp
ModelYearManufacturerColor
b9a2add3 1994 Ford Silver
bb692a16 1977 Opel Red
cc8d247c 2001 Chrysler Black
2858fc53 2004 Ferrari Blue
a3d44d5b 1964 Ford Black
e0f4faba 1968 Volkswagen Orange
a573a5c5 1966 BMW Brown
f42a5fc0 1977 Audi White
657b5360 1970 Chrysler Red
1636c5d3 1975 Opel Brown
pp12345pp
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="#{car.model}" filterBy="#{car.model}" id="model">
            #{car.model}
        </p:column>

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

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

        <p:column headerText="Color" sortBy="#{car.color}" filterBy="#{car.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>