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
55cd03bc 2004 Volkswagen Orange
f0d3ed4a 1990 Ferrari Green
174d6f35 1990 BMW Brown
05ba9e8d 1977 Ford White
bd623232 1967 Ford Silver
44b8476d 1990 Audi Black
e168a03d 1972 Volkswagen Yellow
eecf176d 1977 Mercedes Maroon
d9ed9e1c 1967 Ferrari Orange
b59bb507 2006 Ford Red

Checkbox Based Selection
ModelYearManufacturerColor
55cd03bc 2004 Volkswagen Orange
f0d3ed4a 1990 Ferrari Green
174d6f35 1990 BMW Brown
05ba9e8d 1977 Ford White
bd623232 1967 Ford Silver
44b8476d 1990 Audi Black
e168a03d 1972 Volkswagen Yellow
eecf176d 1977 Mercedes Maroon
d9ed9e1c 1967 Ferrari Orange
b59bb507 2006 Ford Red
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>