DataTable - Selection

There are various ways to select rows from the datatable.

Basic
IdYearBrandColor
ec7f8c1a1991VolkswagenBlue
eaad158a1962JaguarYellow
97f416222009VolkswagenBrown
e6be0a682005FiatOrange
cd6d13601988VolkswagenBlue
7e4465661983VolkswagenOrange
667634222002BMWBrown
068aaae81963BMWBlue
b69b3b9f2008FiatWhite
9e1ec8071964RenaultGreen
Single with Row Click
IdYearBrandColor
07dc16ce2002VolvoSilver
b8bb660a1993VolvoSilver
e9a259722009RenaultBlack
dc661b602004VolvoMaroon
9ba8df321960VolkswagenWhite
360003e71967VolvoBrown
d86f20472004JaguarRed
6dd8371e1982HondaSilver
41e5106a2002HondaRed
9bc18fd51974HondaMaroon
Select Events
IdYearBrandColor
126ba8c12001VolkswagenBlack
83b0f8c11987FiatMaroon
dbf467751998VolkswagenBlue
708b45851999AudiWhite
45e9828d1973BMWGreen
543984591974RenaultBlue
576930b11969MercedesYellow
f81bd77f1960RenaultRed
c7ae808c2005FiatBlue
c37de6c01997FordRed
Multiple with Meta and Shift keys
IdYearBrandColor
c0e74c011962FiatBlack
7a528e471973AudiYellow
659a27192003VolvoMaroon
c76c41ef2005FiatMaroon
a6560fa22003FordRed
beaa374c2003FordBrown
716870c62009JaguarRed
0ed780961994VolkswagenMaroon
fc43964f1972VolvoRed
6c380b9d1975VolvoBlue
RadioButton
IdYearBrandColor
2c2944702003JaguarGreen
4fec02871996FordGreen
aa598dfa2005AudiBrown
42f08f081985FordOrange
962e26e32009AudiYellow
7e4ea7562008MercedesGreen
ee5b800b2004RenaultBlack
9c5a142a2002VolvoBlack
e6c1695a1987VolkswagenGreen
39ebc82d1976MercedesBrown
Checkbox
IdYearBrandColor
0c821a722008BMWRed
8b8392931991MercedesOrange
4f3656912007HondaWhite
6fe4e1921962MercedesMaroon
2c3767f01985HondaSilver
d17def1f1972AudiMaroon
2b87b85c1971BMWOrange
92fae3d02008FiatRed
a728b54b1965JaguarOrange
c56eeb641989MercedesBlue
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>