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
60ee6b251987FordOrange
4227787c2000FordMaroon
262798611970OpelWhite
fd28ee2b1999OpelWhite
9e821e1f1972MercedesBlack
867f8d471996VolvoBlack
46ced91e1981VolkswagenRed
17356e8d1970FordBlue
316002a41965VolkswagenBlack
1101527e1980FordBlack
Double click a row to see the detail page
ModelYearManufacturerColor
60ee6b251987FordOrange
4227787c2000FordMaroon
262798611970OpelWhite
fd28ee2b1999OpelWhite
9e821e1f1972MercedesBlack
867f8d471996VolvoBlack
46ced91e1981VolkswagenRed
17356e8d1970FordBlue
316002a41965VolkswagenBlack
1101527e1980FordBlack

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";
    }
}