DataTable - Row Selection

Datatable makes it easy to select rows. Selection value reference is populated automatically with selected rows. Use metaKey to unselect a row.

Click "View" button after selecting a row to see details
ModelYearManufacturerColor
b133895a 2007 Volvo Brown
d842e799 1991 Renault Red
730a4962 2007 Renault Yellow
da80bde9 1975 Audi Green
0c78f4ae 1963 Opel White
8410f8ee 1998 Renault Green
eab8d49e 1981 Renault Brown
d6b8ed16 1977 Opel Maroon
20055648 1974 Mercedes Blue
Car Detail
Model:
Year:
Manufacturer:
Color:

Source

<h:form id="form">

    <p:dataTable id="cars" var="car" value="#{tableBean.smallCarsModel}" rowKey="#{car.model}"
                 selection="#{tableBean.selectedCar}" selectionMode="single">

        <f:facet name="header">
            Click "View" button after selecting a row to see details
        </f:facet>

        <p:column headerText="Model">
            #{car.model}
        </p:column>

        <p:column headerText="Year">
            #{car.year}
        </p:column>

        <p:column headerText="Manufacturer" >
            #{car.manufacturer}
        </p:column>

        <p:column headerText="Color">
            #{car.color}
        </p:column>

        <f:facet name="footer">
            <p:commandButton id="viewButton" value="View" icon="ui-icon-search"
                    update=":form:display" oncomplete="PF('carDialog').show()"/>
        </f:facet>

    </p:dataTable>

    <p:dialog id="dialog" header="Car Detail" widgetVar="carDialog" resizable="false"
              width="200" showEffect="clip" hideEffect="fold">

        <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}" />

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" />

            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" />

            <h:outputText value="Color:" />
            <h:outputText value="#{tableBean.selectedCar.color}" />
        </h:panelGrid>
    </p:dialog>

</h:form>