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
d72b6892 1983 Chrysler Orange
7da4a715 1999 Mercedes Brown
8c8f5f8f 2007 Audi Green
222ac2e3 2007 Opel Blue
d361620b 1961 Ford White
40e0522e 1991 Ford Maroon
53bf649a 1975 Chrysler Orange
0890d20e 1999 BMW Maroon
af946ecb 2005 Ford Black
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>