DataTable - Row Editing

Row editing feature allows updating values within the datatable. Optional "rowEdit" and "rowEditCancel" ajax behaviors are provided as callbacks to process edited data.

In-Cell Editing
ModelYearManufacturerColor
3332d324
1984
Ferrari
Yellow
606b476c
1967
Volvo
Red
67dda8dc
1983
Chrysler
Orange
28c89caa
1986
Opel
Black
cab3b8de
1967
Audi
White
548c3a61
1972
Chrysler
Green
b5a863bc
1991
Volvo
White
5f5673a4
1987
Volvo
Yellow
59faa709
1977
Chrysler
Brown

Source

<h:form id="form">

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

    <p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList" editable="true">

        <f:facet name="header">
            In-Cell Editing
        </f:facet>

        <p:ajax event="rowEdit" listener="#{tableBean.onEdit}" update=":form:messages" />
        <p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}" update=":form:messages" />

        <p:column headerText="Model" style="width:30%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.model}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.model}" style="width:100%"/>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Year" style="width:20%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.year}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.year}" style="width:100%" label="Year"/>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Manufacturer" style="width:24%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.manufacturer}" />
                </f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.manufacturer}" >
                        <f:selectItems value="#{tableBean.manufacturers}"
                            var="man" 
                            itemLabel="#{man}"
                            itemValue="#{man}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Color" style="width:20%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.color}" />
                </f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.color}" >
                        <f:selectItems value="#{tableBean.colors}"
                            var="color" 
                            itemLabel="#{color}"
                            itemValue="#{color}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column style="width:6%">
            <p:rowEditor />
        </p:column>

    </p:dataTable>

</h:form>