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
70aac54c
1966
Audi
Silver
fc09ba4a
1983
Volvo
Green
9e969f88
1980
Audi
Silver
d06cedf0
1964
Ferrari
Black
e93854f5
1970
BMW
Red
b4922855
2002
Ford
Silver
c1b941f7
1977
Mercedes
Black
e55c098b
2009
Ford
Green
989f558e
1998
BMW
White

Multiple Components
Model/YearManufacturerColor
70aac54c / 1966
/
Audi
Silver
fc09ba4a / 1983
/
Volvo
Green
9e969f88 / 1980
/
Audi
Silver
d06cedf0 / 1964
/
Ferrari
Black
e93854f5 / 1970
/
BMW
Red
b4922855 / 2002
/
Ford
Silver
c1b941f7 / 1977
/
Mercedes
Black
e55c098b / 2009
/
Ford
Green
989f558e / 1998
/
BMW
White

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>