DataTable - RadioCheckbox

RadioButton/Checkbox based row selection is a common use case and DataTable provides a solution for this with column selection mode feature.

RadioButton Based Selection
ModelYearManufacturerColor
50b7e8fd 2009 Volkswagen Silver
ab2e2163 1964 Ford Silver
99f6901f 1960 Volvo White
9ca4ba99 2005 Mercedes Silver
e4602288 1995 Ferrari Orange
6c13eb9a 1967 Volvo Orange
9613323c 1988 Audi Brown
3fff0a3c 1987 Ferrari Blue
9d6f5d5c 1978 Volvo Red
dcf1663f 1976 Chrysler Blue

Checkbox Based Selection
ModelYearManufacturerColor
50b7e8fd 2009 Volkswagen Silver
ab2e2163 1964 Ford Silver
99f6901f 1960 Volvo White
9ca4ba99 2005 Mercedes Silver
e4602288 1995 Ferrari Orange
6c13eb9a 1967 Volvo Orange
9613323c 1988 Audi Brown
3fff0a3c 1987 Ferrari Blue
9d6f5d5c 1978 Volvo Red
dcf1663f 1976 Chrysler Blue
Car Detail
Model:
Year:
Manufacturer:
Color:
Car Detail
No records found.

Source

<h:form id="form">

    <p:dataTable id="cars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10"
                 selection="#{tableBean.selectedCar}">

        <f:facet name="header">
            RadioButton Based Selection
        </f:facet>

        <p:column selectionMode="single" style="width:2%" />

        <p:column headerText="Model" style="width:25%">
            #{car.model}
        </p:column>

        <p:column headerText="Year" style="width:25%">
            #{car.year}
        </p:column>

        <p:column headerText="Manufacturer" style="width:24%">
            #{car.manufacturer}
        </p:column>

        <p:column headerText="Color" style="width:24%">
            #{car.color}
        </p:column>

        <f:facet name="footer">
            <p:commandButton id="viewButton" value="View" icon="ui-icon-search"
                             update=":form:displaySingle" oncomplete="PF('singleCarDialog').show()"/>
        </f:facet>
    </p:dataTable>

    <br />

    <p:dataTable id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10"
                 selection="#{tableBean.selectedCars}">

        <f:facet name="header">
            Checkbox Based Selection
        </f:facet>

        <p:column selectionMode="multiple" style="width:2%" />

        <p:column headerText="Model" style="width:25%">
            #{car.model}
        </p:column>

        <p:column headerText="Year" style="width:25%">
            #{car.year}
        </p:column>

        <p:column headerText="Manufacturer" style="width:24%">
            #{car.manufacturer}
        </p:column>

        <p:column headerText="Color" style="width:24%">
            #{car.color}
        </p:column>

        <f:facet name="footer">
            <p:commandButton id="multiViewButton" value="View" icon="ui-icon-search"
                             update=":form:displayMulti" oncomplete="PF('multiCarDialog').show()"/>
        </f:facet>
    </p:dataTable>

    <p:dialog id="dialog" header="Car Detail" widgetVar="singleCarDialog" resizable="false"
              showEffect="fade" hideEffect="explode">

        <h:panelGrid id="displaySingle" columns="2" cellpadding="4">

            <f:facet name="header">
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
            </f:facet>

            <h:outputText value="Model:" />
            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>

            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

            <h:outputText value="Color:" />
            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
        </h:panelGrid>
    </p:dialog>

    <p:dialog id="multiDialog" header="Car Detail" widgetVar="multiCarDialog"
              height="300" showEffect="fade" hideEffect="explode">

        <p:dataList id="displayMulti" value="#{tableBean.selectedCars}" var="selectedCar">
            Model: #{selectedCar.model}, Year: #{selectedCar.year}
        </p:dataList>

    </p:dialog>

</h:form>