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
4a48b9261969FordRed
d4ed9b6a1993AudiSilver
4e724d411980VolkswagenWhite
c83309e21977VolkswagenBlack
eee71aea1961FerrariBlue
da2314071979FordBlack
9d1b45d51968OpelBlue
e0fc56fe2003BMWYellow
dab7bfee2000FordBlue
02ef9dc41974BMWBrown
Double click a row to see the detail page
ModelYearManufacturerColor
4a48b9261969FordRed
d4ed9b6a1993AudiSilver
4e724d411980VolkswagenWhite
c83309e21977VolkswagenBlack
eee71aea1961FerrariBlue
da2314071979FordBlack
9d1b45d51968OpelBlue
e0fc56fe2003BMWYellow
dab7bfee2000FordBlue
02ef9dc41974BMWBrown

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