DataTable - Edit

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

Row Editing
IdYearBrandColor
cd2a7dcb
1985
Volvo
Orange
53a8033f
2009
Volkswagen
Green
a2ecadd9
1969
Volkswagen
Maroon
84d2b909
1980
Jaguar
Orange
b41c137e
1982
Jaguar
Orange
3fbb2273
1995
Volkswagen
Yellow
5bc616ec
1996
Mercedes
Yellow
ba589315
1988
Audi
Black
a06d9673
1965
Volvo
Black
9c3203a7
1999
Mercedes
Orange
Cell Editing with Click and RightClick
IdYearBrandColor
3a542cfd
2002
Volkswagen
Red
0a39fd35
1962
Fiat
White
11d08fbf
2007
Honda
Black
e269bc13
1966
Volvo
Red
ce95f1d2
2001
Honda
Red
2a0c239c
1978
Mercedes
Orange
aec3a16e
1980
Audi
Orange
e046cd74
1972
Volkswagen
Red
0638c7fa
2008
Jaguar
Orange
278df814
1967
Ford
Blue
<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>