DataTable - Edit Data displayed on datatable can be edited at row or cell level.
Row Editing
IdYearBrandColor
67d1d9a3
2006
Honda
White
26b21b54
1961
Ford
Black
7fd49249
1976
BMW
Blue
c75cdb72
1993
Volkswagen
Yellow
bfbd53ce
1997
Volvo
Blue
48c7ad16
1998
Volvo
Blue
cb8bc25e
1961
Volvo
Green
84728a1e
1969
Honda
Green
6e5392ba
1974
Renault
Orange
bd684feb
1966
Ford
White
Cell Editing with Click and RightClick
IdYearBrandColor
65fe61e0
1992
Fiat
Yellow
422fa7ba
1982
Volkswagen
Silver
bdf7034d
1975
Renault
Yellow
bd6c825f
1984
BMW
Blue
f7dde55f
2000
Volvo
Yellow
d7ed55c8
1987
Volvo
Brown
7b9ba3d4
1972
Honda
Yellow
06a87376
1968
Ford
White
a0204d7c
1984
Audi
Blue
7d187b5e
1970
Mercedes
Maroon
<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.3-SNAPSHOT on Mojarra-2.3.2.