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
7866f8841993FerrariMaroon
2766a6bf1977OpelRed
1c3468a61996BMWSilver
6c7a9f901993AudiOrange
877f82ed1971OpelWhite
5dac259d1998ChryslerBlue
e577426c1991FordGreen
55bd576b2001OpelYellow
b490af431995VolkswagenRed
1429e2fe1978VolvoBlack
Double click a row to see the detail page
ModelYearManufacturerColor
7866f8841993FerrariMaroon
2766a6bf1977OpelRed
1c3468a61996BMWSilver
6c7a9f901993AudiOrange
877f82ed1971OpelWhite
5dac259d1998ChryslerBlue
e577426c1991FordGreen
55bd576b2001OpelYellow
b490af431995VolkswagenRed
1429e2fe1978VolvoBlack

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