DataTable - Multiple Row Selection

DataTable also supports multiple row selection using metaKey and shiftKey.

Click "View" button after selecting multiple to see details
ModelYearManufacturerColor
5cda5484 1960 Chrysler Green
8239f65d 2009 Chrysler Maroon
73280074 1993 Ford Maroon
f4c60409 1982 Volvo Brown
962faa0d 1969 Opel Blue
12cac41c 2007 Audi Black
f01adc51 1975 BMW Yellow
3127b886 1973 Mercedes Blue
41df9243 1978 Ford Black
Car Detail
No records found.

Source

<h:form id="form">

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

        <f:facet name="header">
            Click "View" button after selecting multiple 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 value="View" icon="ui-icon-search"
                        update=":form:display" oncomplete="PF('carDialog').show()"/>
        </f:facet>
    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog"
              width="250" showEffect="explode" hideEffect="explode">

        <p:dataList id="display"
            value="#{tableBean.selectedCars}"
            var="selectedCar" type="definition">

            Model: #{selectedCar.model}, Year: #{selectedCar.year}
            <f:facet name="description">
                <p:graphicImage value="/images/cars/#{selectedCar.manufacturer}.jpg"/>
            </f:facet>
        </p:dataList>

    </p:dialog>

</h:form>