DataTable - Add Row

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

Documentation
Row Editing with add functionality
IdYearBrandColor
c3d2f08d
1991
Honda
Brown
166d3688
1970
Fiat
Red
47d027e4
1979
Volkswagen
Orange
3c63adad
1997
Volkswagen
Silver
6a8c0eae
1965
Ford
Black
74c62248
1960
Mercedes
Green
bc6b4313
2002
Renault
White
ec5f745c
1975
Ford
Red
f79cc88e
1969
Fiat
White
2c00ea3a
1968
Audi
Silver
269c98ee
1962
Mercedes
Green
37571add
1998
Honda
White
6831f2b1
1960
Renault
Maroon
13a3fe30
1961
Fiat
White
b1a92558
1997
Jaguar
Green
<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.