DataTable - Cell Editing

Inline cell editing is enabled by selecting a cell. As a callback "cellEdit" ajax behavior event is provided to process edited data with CellEditEvent. First sample also has a context menu attached to demonstrate the usage of client side api. Second sample demonstrates multiple components support in a single cell. Quick tab navigation between cells is also supported for easier editing.

In-Cell Editing
ModelYearManufacturerColor
78434739
1988
Volvo
Yellow
54d32c0f
1990
Renault
Blue
4a57ae32
1960
Volvo
Orange
413d0a89
2009
Renault
Black
a8f8fc68
1998
Volvo
Yellow
47a26e19
1978
Renault
Orange
1e2e55ac
1970
Opel
Silver
a8089852
2000
Volkswagen
Brown
940b0250
2005
Volkswagen
Red

Multiple Components
Model/YearManufacturerColor
78434739 / 1988
/
Volvo
Yellow
54d32c0f / 1990
/
Renault
Blue
4a57ae32 / 1960
/
Volvo
Orange
413d0a89 / 2009
/
Renault
Black
a8f8fc68 / 1998
/
Volvo
Yellow
47a26e19 / 1978
/
Renault
Orange
1e2e55ac / 1970
/
Opel
Silver
a8089852 / 2000
/
Volkswagen
Brown
940b0250 / 2005
/
Volkswagen
Red

Source

<h:form id="form">

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

    <p:contextMenu for="cars" widgetVar="cMenu">   
        <p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('carsTable').showCellEditor();return false;"/>  
        <p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>  
    </p:contextMenu> 

    <p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}" editable="true" editMode="cell" widgetVar="carsTable">

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

        <p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":form:messages" />

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

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

        <p:column headerText="Manufacturer" style="width:25%">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.manufacturer}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.manufacturer}" style="width:100%">
                        <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:25%">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.color}" style="width:100%">
                        <f:selectItems value="#{tableBean.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

    </p:dataTable>

    <p:dataTable var="car" value="#{tableBean.carsSmall}" editable="true" editMode="cell" cellSeparator=" \/ ">

        <f:facet name="header">
            Multiple Components
        </f:facet>

        <p:column headerText="Model/Year" style="width:50%">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.model}" /> / <h:outputText value="#{car.year}" /></f:facet>
                <f:facet name="input">
                    <p:inputText id="modelInput" value="#{car.model}" style="width:46%" title="Model"/>
                    /
                    <p:inputText value="#{car.year}" style="width:47%" label="Year" title="Year"/>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Manufacturer" style="width:25%">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.manufacturer}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.manufacturer}" style="width:100%">
                        <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:25%">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.color}" style="width:100%">
                        <f:selectItems value="#{tableBean.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

    </p:dataTable>

</h:form>