DataTable - Complex

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

List of Cars
ModelYearManufacturerColor
c47a2ac3 1984 Chrysler White
452ae13a 1979 Volvo Black
1295bad5 1984 Renault Yellow
b7181cf0 1969 Chrysler Brown
72dc172f 1971 Volkswagen Silver
f6ce39fc 1994 Renault Green
93af9dfd 2005 Ford Silver
70bdc47d 1981 Chrysler Brown
019c8ede 2002 Chrysler Silver
f5bca3bb 1963 BMW 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>