DataTable - Add Row

A new row can be added by clicking the Add new button.

Documentation
Row Editing with add functionality
IdYearBrandColor
1936fd4c
1976
Audi
Black
abe9b233
1986
Mercedes
Green
08e2b30d
1965
Volvo
Red
abe25bf5
1961
Mercedes
White
5eaf571f
1983
Audi
Yellow
2ca10d15
1962
Volvo
Yellow
c267aeb9
1962
Ford
Black
319943ef
1974
Jaguar
Blue
d3a101d4
1981
Mercedes
Silver
31e5c119
1979
Ford
Red
301cf780
1963
Jaguar
Black
b4fcbbaf
1975
Renault
Yellow
3c624ab2
1987
Honda
Green
ba65b6c9
1981
Volkswagen
Brown
465f3a8b
1987
BMW
White
<h:form id="form">
    <p:growl id="msgs" showDetail="true"/>

    <p:dataTable id="cars1" widgetVar="cars1" var="car" value="#{dtAddRowView.cars1}" editable="true" style="margin-bottom:20px">
        <f:facet name="header">
            Row Editing with add functionality
        </f:facet>

        <p:ajax event="rowEdit" listener="#{dtAddRowView.onRowEdit}" update=":form:msgs" />
        <p:ajax event="rowEditCancel" listener="#{dtAddRowView.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>

     <div class="ui-g">
         <div class="ui-g-12">
             <p:commandButton value="Add new row" styleClass="ui-priority-primary" process="@this" update=":form:msgs"
                              action="#{dtAddRowView.onAddNew()}" oncomplete="PF('cars1').addRow();"/>
         </div>
     </div>

 </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.