Locale

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Free Themes

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

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

DataTable Add Row

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

Row Editing with add functionality
CodeNameStatusPrice
5566b368
Bamboo Watch
INSTOCK
65.0
b2b6320a
Black Watch
INSTOCK
72.0
c1d924f8
Blue Band
LOWSTOCK
79.0
ae1a6ac8
Blue T-Shirt
INSTOCK
29.0
e1a4cc48
Bracelet
INSTOCK
15.0
ca560308
Brown Purse
OUTOFSTOCK
120.0
62e228ee
Chakra Bracelet
LOWSTOCK
32.0
763390e4
Galaxy Earrings
INSTOCK
34.0
ddf2b464
Game Controller
LOWSTOCK
99.0
2b13f67a
Gaming Set
INSTOCK
299.0
5c4bc43a
Gold Phone Case
OUTOFSTOCK
24.0
4bb54b80
Green Earbuds
INSTOCK
89.0
488f9f3e
Green T-Shirt
INSTOCK
49.0
476e8d87
Grey T-Shirt
OUTOFSTOCK
48.0
411c801d
Headphones
LOWSTOCK
175.0

<div class="card">
    <h:form id="form">
        <p:growl id="msgs" showDetail="true"/>

        <p:dataTable id="products1" widgetVar="products1" var="product" value="#{dtAddRowView.products1}"
                     editable="true">
            <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="Code">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{product.code}"/></f:facet>
                    <f:facet name="input"><p:inputText id="modelInput" value="#{product.code}"
                                                       style="width:100%"/></f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Name">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{product.name}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{product.name}" style="width:100%"
                                                       label="Name"/></f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Status">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{product.inventoryStatus}"/></f:facet>
                    <f:facet name="input">
                        <h:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
                            <f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
                                           itemLabel="#{status}" itemValue="#{status}"/>
                        </h:selectOneMenu>
                    </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Price">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{product.price}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{product.price}" style="width:100%"
                                                       label="Price"/></f:facet>
                </p:cellEditor>
            </p:column>


            <p:column style="width:6rem">
                <p:rowEditor/>
            </p:column>
        </p:dataTable>

        <div class="grid mt-3">
            <div class="col-12">
                <p:commandButton value="Add new row" process="@this" update=":form:msgs"
                                 action="#{dtAddRowView.onAddNew()}" oncomplete="PF('products1').addRow();"/>
            </div>
        </div>

    </h:form>
</div>