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
d39e6638
1983
Renault
Maroon
f0fbe72e
2005
Volkswagen
Red
8424a80a
1988
Volvo
Brown
2a8a27fe
2005
Mercedes
Yellow
d027196f
1999
Ford
Orange
178931a1
1999
Audi
Brown
0af3f29c
2007
Audi
Maroon
9f1f686e
1968
Ferrari
Yellow
ff7dd92b
1979
Ferrari
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>