DataTable - Selection

There are various ways to select rows from the datatable.

Basic
IdYearBrandColor
ffdb66321976FordRed
d57b2a591999RenaultBlue
a718c9f21993BMWWhite
c96631d21989RenaultBrown
d46c9b5b2008VolkswagenBlue
10678f0d1978FordOrange
8936689c2001VolkswagenBlue
1ecee7ab1963JaguarMaroon
5bf4f7981977FiatSilver
af8057101982JaguarBlack
Single with Row Click
IdYearBrandColor
8ba9c9c31971FiatMaroon
6fb963281990FiatBrown
f3297b3b1966HondaSilver
412d05551962MercedesMaroon
127873af2007HondaGreen
d7a337d31994HondaRed
ed0639781991MercedesRed
57063be41993VolkswagenBlack
7d51f0571979FiatMaroon
09f599af1977HondaOrange
Select Events
IdYearBrandColor
2c7c52cc1977VolvoOrange
e8cc430b1973MercedesOrange
e54e0d401997AudiGreen
fe3a2dc21966RenaultOrange
656617c41970HondaOrange
962d2c832001RenaultRed
747446e81993MercedesRed
71f7290f2001JaguarMaroon
f7d1396c2003HondaBlack
220f3bab1988FiatOrange
Multiple with Meta and Shift keys
IdYearBrandColor
8511b23c2006BMWWhite
1231ee491998JaguarGreen
44a2359b2002BMWMaroon
e3ab71231996FordBlue
2aa87b461984RenaultGreen
61666e741989AudiBlack
19be46611967VolvoGreen
bd6459fa1971BMWGreen
40ecda9c1983JaguarOrange
2b33ba391984JaguarGreen
RadioButton
IdYearBrandColor
55455fe82002RenaultGreen
0babf1b61979JaguarBlue
1cad57331961AudiBlue
631c2f221964AudiSilver
a81671771991MercedesBrown
17cb00c12002FiatBlue
e5951aa41996HondaBrown
b414bc441978MercedesOrange
f8d425e61989VolkswagenMaroon
4978c9c91987VolkswagenBlue
Checkbox
IdYearBrandColor
7a573dc11971RenaultBlack
bae93ed11974MercedesRed
9b028e6c1984VolvoRed
ca5e47902007AudiBlue
509b92c81986RenaultOrange
dbeaba2a1966RenaultYellow
e057a18d1969AudiSilver
f24aa0481997AudiBlack
77ccad322009BMWBlack
427f86a61988MercedesSilver
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>