DataTable - Add Row

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

Documentation
Row Editing with add functionality
IdYearBrandColor
7bde74fd
1988
BMW
Maroon
d00d04e8
1995
BMW
Black
7885cdc5
1996
Audi
Silver
8f284790
1983
Volkswagen
Red
7f15bc66
1993
Volvo
Maroon
004c1a2b
1991
BMW
Brown
854ac41e
1977
Volkswagen
Orange
93ed5208
2004
Volkswagen
Maroon
44d85c51
1980
Audi
Orange
8fea381c
1989
BMW
Yellow
351ce7a4
1966
Jaguar
Yellow
bff83b57
1963
Fiat
Blue
f41de472
1969
Volvo
Yellow
b8932de0
1996
Ford
Silver
97f8e40c
2004
BMW
Silver
<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.