DataTable - Edit

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

Documentation
Row Editing
IdYearBrandColor
0ca164a6
1966
Audi
White
51532212
2001
Jaguar
Red
2246d2d9
1977
Jaguar
Silver
a5efb926
1994
Jaguar
Green
4daa3959
1969
BMW
Yellow
f68a0c32
1993
Honda
Blue
4c453f71
1960
Mercedes
Red
40398712
1983
Volkswagen
White
047cebf6
1965
Fiat
Maroon
449ad7f8
1978
Honda
Maroon
Cell Editing with Click and RightClick
IdYearBrandColor
dcf2f2bf
1989
Renault
Blue
14a6d304
1977
BMW
Blue
b1175ffd
1965
Ford
Yellow
92994f01
1972
Mercedes
Black
e40825d3
1997
Volvo
Red
bf9c9c48
1991
Volvo
Yellow
32b4f534
1990
Audi
Yellow
003ad6aa
1965
Volkswagen
Maroon
720d4141
1964
Honda
White
7f6ff4ff
1963
Honda
Red
<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>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.