DataTable - Selection

There are various ways to select rows from the datatable.

Basic
IdYearBrandColor
fa219d8e1989MercedesRed
1fe6dc892005JaguarBlack
1d0b3f5e1968JaguarSilver
8fd140182002FordBlack
3e698bf32002BMWOrange
92821fae1969VolkswagenSilver
1d0611582006BMWWhite
f23094fa2003FiatWhite
b85662491994AudiBlack
c04651fa1960VolkswagenOrange
Single with Row Click
IdYearBrandColor
69a762301996RenaultSilver
702343d11980RenaultBlack
ec6218a31983BMWOrange
64a25cbf1978HondaMaroon
4a1ffb121996MercedesGreen
c11ebaaf1999HondaSilver
d541b3cb2000VolvoOrange
87b266661982MercedesSilver
6dd91ca41995BMWBrown
52fbfd771964BMWRed
Select Events
IdYearBrandColor
aeb2bc871960FiatMaroon
5383afe21996HondaBlack
575dc8951989VolvoYellow
1f1b50861980FordGreen
3aa61d151994RenaultBlack
a40aff7f1995VolvoRed
165b29f61980VolvoRed
e22d59591965JaguarBlack
21004a961984RenaultGreen
8d06c2e91969MercedesMaroon
Multiple with Meta and Shift keys
IdYearBrandColor
24c1d7e71968RenaultYellow
823379e21994HondaGreen
910b76a41986JaguarYellow
4c7a4b2e1966VolkswagenYellow
473b13fd1960JaguarYellow
4d060f651969HondaBrown
2a10aaa81984BMWWhite
71fd17a21996RenaultYellow
519e89b72006FiatBlue
acb1f4da1964VolvoGreen
RadioButton
IdYearBrandColor
6b7605f61968VolvoBrown
2a00713f1965JaguarBlack
717d820b1989VolkswagenOrange
9bb874cb2006FiatYellow
ceeaecf01969HondaGreen
73b7fe691988FiatBlue
59fcaea51985FordBrown
bc76e4f22003MercedesOrange
efe4a4bb1976FiatBlue
c6500b972006VolvoYellow
Checkbox
IdYearBrandColor
6e0037ac1981VolvoMaroon
7253ddbb1971JaguarBrown
de30ab261975MercedesSilver
c99aeadb1966HondaMaroon
0d3282a71976FiatBlack
64f530d51988FordMaroon
bedbc4331992FiatSilver
5e40779a1987AudiGreen
8ea4bb9c1963RenaultRed
f069bb8c1968BMWRed
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>