DataTable - Complex

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

List of Cars
pp12345pp
ModelYearManufacturerColor
11adf065 1961 Renault Silver
be427319 1977 Ford Black
66b90a40 1965 Mercedes Yellow
5049b4a4 1965 Ferrari White
4a31a6e3 2003 Volvo Maroon
8cd425d2 2005 Mercedes Silver
6790612c 1960 BMW Maroon
25288a3d 1964 BMW Yellow
1bc97678 1984 Renault Orange
f645baa2 1989 Opel Green
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>