DataTable - Complex

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

List of Cars
ModelYearManufacturerColor
a4cd3d25 2006 Ferrari Red
720ced87 1966 Audi White
dd62079a 1974 Volkswagen White
be7c23e9 1965 Audi Blue
904e0b35 1987 Chrysler Blue
d1a7e985 1967 Opel Blue
f530f8fb 1992 Ford Brown
72fe38a8 1990 Ford Black
4ace273c 1997 Ferrari Silver
055c70d1 1976 Volvo Brown
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>