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
324bbb89
1976
Volkswagen
Blue
b4fd6860
1974
Jaguar
Black
e96d1f98
1983
Ford
Orange
6e9d6d92
1996
Mercedes
Brown
eab81c11
1965
Jaguar
Yellow
d29da554
1976
Volkswagen
Red
b225c719
1998
Opel
Yellow
237af0b9
1984
Renault
Blue
43485e9d
1981
Audi
Black

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>