DataTable - Selection

There are various ways to select rows from the datatable.

Basic
IdYearBrandColor
359cf10f1962JaguarRed
3e03ec801978MercedesSilver
a4ae01451980VolkswagenSilver
9be51fe51988JaguarBlue
fcc122081999MercedesRed
7f60e70e1979VolkswagenRed
f5e2e6e91994BMWWhite
e05601ab1964JaguarRed
a42affb02008VolkswagenRed
a26fc8de1962MercedesMaroon
Single with Row Click
IdYearBrandColor
8e1e8e381997VolvoMaroon
7331a6cc1996VolvoBlack
6faa377c1989BMWMaroon
db98fbc81981HondaBlue
8b5ccf0f2000BMWBlue
2305e22e1965HondaBlue
bb5b68f71993HondaOrange
a9cfe5541983FordBlack
69b0d3b11962HondaBlue
60f54c221972RenaultWhite
Select Events
IdYearBrandColor
0912837a1967VolvoGreen
b0e7323c1998FiatMaroon
a3fc95c62009JaguarWhite
425b4ca51970RenaultWhite
82de165a1964BMWWhite
4262f8501998FordGreen
abb299191992VolkswagenBlack
724d34e81969BMWBlue
4ae18c8a1963VolkswagenGreen
27f82e601982JaguarSilver
Multiple with Meta and Shift keys
IdYearBrandColor
bc55d17e1972VolvoSilver
f76e1ca21971HondaGreen
8e9082dc1967RenaultYellow
e6c7c2c82001BMWOrange
6d8fe2cf1976AudiOrange
144202581975VolkswagenYellow
47e08a4e2004VolkswagenWhite
a35e9dc01972FiatYellow
64a6ce3e1994RenaultBlue
3943962c1973FiatYellow
RadioButton
IdYearBrandColor
fe22b1ad2005VolvoWhite
d1aabda21985BMWBrown
059888c52009RenaultSilver
b52f9c4b1985BMWGreen
a2f66db21995FordSilver
6b90cfb92006FiatSilver
514e52861991AudiBlue
e5703f2c2007VolvoBlack
11febb021968FordOrange
a807fc141999FiatBrown
Checkbox
IdYearBrandColor
bafaf9851985FiatBlue
8ed574031995AudiWhite
f7a9d6e11990AudiMaroon
5442cdc72004FiatRed
b97291711972VolkswagenGreen
f58fd8c52003FordOrange
72f45fd31990VolkswagenBrown
37c864c91987RenaultRed
b6272e291980FiatOrange
b1d221a12006FordMaroon
Car Info
Selected Cars
<style type="text/css">
    .value {
        font-weight: bold;
    }
    
    .ui-datatable {
        margin-bottom: 25px
    }
    
    .ui-datatable .ui-datatable-footer {
        text-align:left;
    }
    
    .ui-datalist ul {
        padding: 0 0 0 10px;
        margin: 5px 0;
    }
    
    .ui-datatable .ui-button-icon-only .ui-button-text {
        padding: 0;
        line-height: 1.2;
    }
</style>


<h:form id="form">
    <p:growl id="msgs" showDetail="true" />

    <p:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
        <f:facet name="header">
            Basic
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column style="width:32px;text-align: center">
             <p:commandButton update=":form:carDetail" oncomplete="PF('carDialog').show()" icon="pi pi-search" title="View">
                <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
            </p:commandButton>
        </p:column>
    </p:dataTable>
    
    <p:dataTable id="singleDT" var="car" value="#{dtSelectionView.cars2}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            Single with Row Click
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="singleDT" update=":form:carDetail" icon="pi pi-search" value="View" oncomplete="PF('carDialog').show()" />
        </f:facet>
    </p:dataTable>
    
    <p:dataTable id="eventsDT" var="car" value="#{dtSelectionView.cars3}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            Select Events
        </f:facet>
        <p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update=":form:msgs" />
        <p:ajax event="rowUnselect" listener="#{dtSelectionView.onRowUnselect}" update=":form:msgs" />
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
    
    <p:dataTable id="multipleDT" var="car" value="#{dtSelectionView.cars4}" selectionMode="multiple" selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}">
        <f:facet name="header">
            Multiple with Meta and Shift keys
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="multipleDT" update=":form:multiCarDetail" icon="pi pi-search" value="View" oncomplete="PF('multiCarDialog').show()" />
        </f:facet>
    </p:dataTable>
    
    <p:dataTable id="radioDT" var="car" value="#{dtSelectionView.cars5}" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            RadioButton
        </f:facet>
        <p:column selectionMode="single" style="width:16px;text-align:center"/>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="radioDT" update=":form:carDetail" icon="pi pi-search" value="View" oncomplete="PF('carDialog').show()" />
        </f:facet>
    </p:dataTable>
    
    <p:dataTable id="checkboxDT" var="car" value="#{dtSelectionView.cars6}" selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}" style="margin-bottom:0">
        <f:facet name="header">
            Checkbox
        </f:facet>
        <p:column selectionMode="multiple" style="width:16px;text-align:center"/>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="checkboxDT" update=":form:multiCarDetail" icon="pi pi-search" value="View" oncomplete="PF('multiCarDialog').show()" />
        </f:facet>
    </p:dataTable>
    
    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/> 
                </f:facet>
                
                <h:outputText value="Id:" />
                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>
            
                <h:outputText value="Price" />
                <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
    
    <p:dialog header="Selected Cars" widgetVar="multiCarDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="220">
        <p:outputPanel id="multiCarDetail" style="text-align:center;">
            <ui:repeat value="#{dtSelectionView.selectedCars}" var="car">
                <h:outputText value="#{car.id} - #{car.brand}" style="display:block"/>
            </ui:repeat>
        </p:outputPanel>
    </p:dialog>
</h:form>