DataTable - Add Row

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

Documentation
Row Editing with add functionality
IdYearBrandColor
7d432bc4
1968
Audi
Red
53e69250
1995
Honda
Yellow
976f8e98
1971
Volvo
Maroon
b10fb7bd
1969
Honda
Maroon
625014f3
2000
Jaguar
Green
6da44e85
1989
Audi
Silver
86a70d12
2001
Volkswagen
Brown
99e4b847
2002
Volkswagen
Orange
ef56d65b
1968
Jaguar
Silver
1ec33260
1984
Renault
Red
9ca46df9
1969
Ford
Brown
1699b650
2001
BMW
Yellow
9208f80d
1960
Mercedes
Orange
aa5e3aca
2000
Fiat
Silver
97d7804e
1993
Jaguar
Red
<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.