DataTable - Complex

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

List of Cars
ModelYearManufacturerColor
c98d5af8 1974 Renault Green
fb8c71d8 2008 Audi Black
0ebc3399 1968 Volkswagen Black
2b6c5e7b 1964 Audi Green
9e86e775 1963 Renault Red
da331973 2008 Jaguar Brown
8892fad4 1961 Opel White
62907e3e 1982 Jaguar Green
6a8c880b 1989 Renault Maroon
cebde63c 1962 Volkswagen 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>