DataTable - Edit

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

Row Editing
IdYearBrandColor
e8f18afb
1983
BMW
Blue
39c4ec43
1994
Jaguar
Silver
2e095682
1986
Audi
Orange
bb96e3c8
1965
Jaguar
Yellow
aa2f38c8
1993
BMW
Green
a5fe1202
2009
Audi
Green
29608c73
1994
Honda
Black
2deae7d5
1961
Jaguar
Silver
7939ac1c
1989
Mercedes
Orange
b0183516
2000
Renault
Black
Cell Editing with Click and RightClick
IdYearBrandColor
e435beae
1987
Ford
Red
a9b3a497
1990
Ford
Yellow
abec37aa
1967
Mercedes
White
2f11abc7
1962
Jaguar
Green
2a994072
1996
BMW
Red
cc822e6c
1979
BMW
Orange
9c75b355
1968
Volkswagen
Blue
678a0b3d
1990
Mercedes
White
b5f278c9
2002
Mercedes
Silver
3ff959ae
1994
Honda
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>