DataTable - Edit

Data displayed on datatable can be edited at row or cell level.

Row Editing
IdYearBrandColor
8aecf7a2
1973
Ford
Blue
9e99df6b
1963
Mercedes
Orange
37e62e04
2009
Volkswagen
Blue
06b6cd63
2009
Fiat
Orange
8a7367f2
2001
Honda
Green
69193e6e
1990
Audi
Maroon
77874af7
2006
Mercedes
Yellow
508a9828
1971
Volkswagen
Brown
2a544b28
1970
Fiat
Yellow
2253b602
1985
Jaguar
Yellow
Cell Editing with Click and RightClick
IdYearBrandColor
1fe64127
1969
Honda
Black
a5c9ef05
1990
Audi
Blue
f3288ab1
1989
Honda
Red
0017ffde
1978
Volvo
Red
17a98457
1985
Volvo
Orange
c762e53f
2006
Mercedes
White
e776c06d
1977
Honda
Red
f7b50206
1993
Honda
Green
c516ee43
1995
Jaguar
Maroon
f1fb3c3a
1986
Renault
Orange
<style type="text/css">
    .ui-row-editor .ui-row-editor-pencil {
        margin-left:8px;
    }
</style>


 <h:form id="form">
    <p:growl id="msgs" showDetail="true"/>

    <p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}" editable="true" style="margin-bottom:20px">
        <f:facet name="header">
            Row Editing
        </f:facet>

        <p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs" />
        <p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" update=":form:msgs" />

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

        <p:column headerText="Year">
            <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="Brand">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.brand}" style="width:100%">
                        <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Color">
            <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="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column style="width:35px">
            <p:rowEditor />
        </p:column>
    </p:dataTable>

    <p:dataTable id="cars2" var="car" value="#{dtEditView.cars2}" editable="true" editMode="cell" widgetVar="cellCars">
        <f:facet name="header">
            Cell Editing with Click and RightClick
        </f:facet>

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

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

           <p:column headerText="Year">
            <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="Brand">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.brand}" style="width:100%">
                        <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Color">
            <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="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>
    </p:dataTable>
    
    <p:contextMenu for="cars2" widgetVar="cMenu">   
        <p:menuitem value="Edit Cell" icon="pi pi-search" onclick="PF('cellCars').showCellEditor();return false;"/>  
        <p:menuitem value="Hide Menu" icon="pi pi-times" onclick="PF('cMenu').hide()"/>  
    </p:contextMenu> 
 </h:form>