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
d95e8a78 1970 Opel Black
f99cf841 1968 BMW Green
c0775a53 1973 Volkswagen Blue
24d45905 1983 Volkswagen Red
3abc3294 1994 Audi White
ec94f638 1999 Volvo Black
b0c2e3b5 1996 Ford Yellow
d37bf529 2008 Renault Brown
80e7340b 1992 Renault Red
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="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>