DataTable - Multiple Row Selection

DataTable also supports multiple row selection using metaKey and shiftKey.

Click "View" button after selecting multiple to see details
ModelYearManufacturerColor
f22816db 2009 Ferrari Blue
a86cf450 1992 Volkswagen White
5e2b3c1b 1997 Volvo Silver
6c73a5ae 1989 Ferrari Red
46573fdb 1962 Ferrari Maroon
d182a61d 1967 Chrysler Black
6d65defd 1974 Mercedes Yellow
af153ad8 1994 Opel Black
05d9be27 2008 Audi Green
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>