DataTable - Instant Row Selection

Instant row selection feature processes a selection with ajax when a row is selected. If defined a rowSelectListener or rowUnselectListener is invoked passing row data as parameter, optionally other components on page can be updated with onRowSelectUpdate/onRowUnselectUpdate options. onRowSelectStart and onRowSelectComplete are additional client side callbacks for further customization. Note that rowSelectListener is aware of JSF Navigations so by returning an outcome you can navigate to another page with the selected row information.

Select a row to display a message
ModelYearManufacturerColor
cf850d191984BMWBlue
562a618d1967RenaultGreen
3d11de3a1985FerrariBlack
e3226c471996ChryslerOrange
c801abd22006AudiWhite
156d64db1990AudiBlue
92e6b43a2007FerrariYellow
349bde801960ChryslerRed
56425b431970ChryslerYellow
ead717d82000FordSilver
Double click a row to see the detail page
ModelYearManufacturerColor
cf850d191984BMWBlue
562a618d1967RenaultGreen
3d11de3a1985FerrariBlack
e3226c471996ChryslerOrange
c801abd22006AudiWhite
156d64db1990AudiBlue
92e6b43a2007FerrariYellow
349bde801960ChryslerRed
56425b431970ChryslerYellow
ead717d82000FordSilver

Source

<h:form>

    <p:growl id="growl" showDetail="true"/>

    <p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10"
                 selection="#{tableBean.selectedCar}" selectionMode="single"
                 rowSelectListener="#{tableBean.onRowSelect}"
                 onRowSelectUpdate="display growl"
                 onRowSelectComplete="carDialog.show()"
                 rowUnselectListener="#{tableBean.onRowUnselect}"
                 onRowUnselectUpdate="growl">

        <f:facet name="header">
            Select a row to display a message
        </f:facet>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Model" />
            </f:facet>
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Year" />
            </f:facet>
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Manufacturer" />
            </f:facet>
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Color" />
            </f:facet>
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
              width="200" showEffect="explode" hideEffect="explode">

        <h:panelGrid id="display" 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}" />

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" />

            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" />

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

    <p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10"
                 selection="#{tableBean.selectedCar}" selectionMode="single"
                 rowSelectListener="#{tableBean.onRowSelectNavigate}"
                 dblClickSelect="true">

        <f:facet name="header">
            Select a row to see the detail page
        </f:facet>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Model" />
            </f:facet>
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Year" />
            </f:facet>
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Manufacturer" />
            </f:facet>
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Color" />
            </f:facet>
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

</h:form>
                    
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import org.primefaces.examples.domain.Car;

import org.primefaces.event.SelectEvent;

public class TableBean {

    static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";

		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

    private final static String[] colors;

	private final static String[] manufacturers;

	private List<Car> cars;

	private Car selectedCar;

	public TableBean() {
		carsSmall = new ArrayList<Car>();

		populateRandomCars(carsSmall, 9);
	}

    private void populateRandomCars(List<Car> list, int size) {
		for(int i = 0 ; i < size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}

	public Car getSelectedCar() {
		return selectedCar;
	}
	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}

	public List<Car> getCars() {
		return cars;
	}

    public void onRowSelect(SelectEvent event) {
        FacesMessage msg = new FacesMessage("Car Selected", ((Car) event.getObject()).getModel());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void onRowUnselect(UnselectEvent event) {
        FacesMessage msg = new FacesMessage("Car Unselected", ((Car) event.getObject()).getModel());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public String onRowSelectNavigate(SelectEvent event) {
        FacesContext.getCurrentInstance().getExternalContext().getFlash().put("selectedCar", event.getObject());

        return "carDetail?faces-redirect=true";
    }
}