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
92d07fd31963FordRed
3fce72321999BMWBlue
e3884d361982VolkswagenGreen
d9e6a3f41963RenaultYellow
2482422d2000AudiBrown
cb1603342001AudiMaroon
3785fd4f2003MercedesMaroon
d60d816f2006RenaultGreen
525603961987MercedesOrange
8b878cb81995OpelSilver
Double click a row to see the detail page
ModelYearManufacturerColor
92d07fd31963FordRed
3fce72321999BMWBlue
e3884d361982VolkswagenGreen
d9e6a3f41963RenaultYellow
2482422d2000AudiBrown
cb1603342001AudiMaroon
3785fd4f2003MercedesMaroon
d60d816f2006RenaultGreen
525603961987MercedesOrange
8b878cb81995OpelSilver

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