DataTable - Edit Data displayed on datatable can be edited at row or cell level.
Row Editing
IdYearBrandColor
cb72205c
2009
BMW
Yellow
cc301bec
1987
BMW
Brown
d6c911e9
1966
Volkswagen
Green
0a57056f
1973
Volkswagen
Yellow
258cb50e
1986
Audi
Orange
f62b55b9
2008
Volvo
Silver
cd4576f0
2003
Volvo
Blue
c90bfc01
1996
Ford
Maroon
dcb02f55
1963
Volvo
Brown
95983681
2000
Fiat
Yellow
Cell Editing with Click and RightClick
IdYearBrandColor
3ff62ab6
1992
Jaguar
Orange
d30236a4
2001
Audi
Blue
9729da3a
2008
Audi
Silver
4a23b562
1988
Audi
Silver
e50aa98d
2003
Mercedes
Yellow
e740b564
1990
Volkswagen
Red
d51d2ea5
1975
Renault
White
0eb07b4e
1982
Ford
Red
ea01c2d3
1977
Ford
Green
d4f0e010
1965
Honda
White
<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:32px">
           <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="ui-icon-search" onclick="PF('cellCars').showCellEditor();return false;"/>  
       <p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>  
   </p:contextMenu> 

</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2.RC1 on Mojarra-2.3.2.