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
f2312e04
1979
Opel
White
9138f351
2008
Audi
White
39ae5147
1984
Ford
Orange
0e58b6e0
1975
Audi
Blue
3d525f2a
1993
Renault
Red
e8008362
1965
Renault
Black
5888ead4
1972
Opel
Yellow
292b9abf
1991
Opel
Blue
ef45e9b6
1968
Volkswagen
Silver

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>