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
e98795eb
1964
Mercedes
Green
03a3f5ae
1969
Ford
Yellow
088ca24a
1975
BMW
Yellow
de1a3a95
1981
Ford
Green
a2a56dc3
1995
Renault
Black
4c74486c
2004
Volvo
Silver
6238557b
1988
Audi
Yellow
19e93a9c
1960
Jaguar
Black
3299ac16
1989
Volkswagen
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>