DataTable - Multiple Row Selection

DataTable also supports multiple row selection using metaKey and shiftKey.

Click "View" button after selecting multiple to see details
ModelYearManufacturerColor
3006563d 1962 Mercedes Green
40a924b5 1962 BMW Orange
8f349f50 2007 Volkswagen Orange
8fb05930 1962 Opel Red
5af5aff0 1996 Audi Maroon
99fd49e8 1965 Chrysler Silver
cdb79c9b 1988 Volvo Silver
c5cc4940 1969 Volkswagen Orange
dbfcba8e 1994 Chrysler Yellow
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="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>