DataTable - Row Selection

This examples demonstrates how to select a row using a PrimeFaces commandButton and standard setPropertyActionListener.

ModelYearManufacturerColor
1c645db51966RenaultRed
268190d22000BMWBlue
5192a4131977AudiRed
8ed302a51984BMWMaroon
023ca9ab2001MercedesBlack
a4d26dd72002AudiOrange
f75d7a771978ChryslerOrange
b516fb341987VolvoSilver
c112a8792004MercedesBlue
Car Detail
Model:
Year:
Manufacturer:
Color:

Source

<h:form id="form">

    <p:growl id="msgs" showDetail="true" />

    <p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">

        <p:column headerText="Model" style="width:24%">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" style="width:24%">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer" style="width:24%">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" style="width:24%">
            <h:outputText value="#{car.color}" />
        </p:column>

        <p:column style="width:4%">
                <p:commandButton id="selectButton" update=":form:display" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View">
                <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
            </p:commandButton>
        </p:column>

    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"
                showEffect="fade" hideEffect="explode" modal="true">

        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">

            <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}" style="font-weight:bold"/>

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>


            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

            <h:outputText value="Color:" />
            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>

        </h:panelGrid>

    </p:dialog>

</h:form>