Locale

Change the locale of the datepicker, schedule and client side validation messages.

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Czech
Greek
Persian
Finnish
Danish
Hindi
Indonesian
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
Vietnamese
Chinese
Chinese

Input Style

Themes

PrimeOne
Saga Saga
Vela Vela
Arya Arya
Bootstrap
bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple
Material Design
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple
Material Design Compact
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple

DataTable Edit

Data displayed on datatable can be edited at row or cell level.

Row Editing
CodeNameStatusPrice
8b292e1f
Bamboo Watch
INSTOCK
$65.00
09f96c5d
Black Watch
INSTOCK
$72.00
9511f5fd
Blue Band
LOWSTOCK
$79.00
b7a25159
Blue T-Shirt
INSTOCK
$29.00
366ef137
Bracelet
INSTOCK
$15.00
01dad4e2
Brown Purse
OUTOFSTOCK
$120.00
2491ebfc
Chakra Bracelet
LOWSTOCK
$32.00
ebf5d51d
Galaxy Earrings
INSTOCK
$34.00
e6762f01
Game Controller
LOWSTOCK
$99.00
0025aec9
Gaming Set
INSTOCK
$299.00
Cell Editing with Click and RightClick
CodeNameStatusPrice
42b8f644
Bamboo Watch
INSTOCK
$65.00
7a5a38c4
Black Watch
INSTOCK
$72.00
84b4e8ff
Blue Band
LOWSTOCK
$79.00
c897be1d
Blue T-Shirt
INSTOCK
$29.00
383698c7
Bracelet
INSTOCK
$15.00
7940fdfe
Brown Purse
OUTOFSTOCK
$120.00
bc049703
Chakra Bracelet
LOWSTOCK
$32.00
68efaa80
Galaxy Earrings
INSTOCK
$34.00
7710777d
Game Controller
LOWSTOCK
$99.00
45a25bac
Gaming Set
INSTOCK
$299.00
Cell Editing with Double Click Event (dblclick)
CodeNameStatusPrice
23fc87b4
Bamboo Watch
INSTOCK
$65.00
cc0e1f42
Black Watch
INSTOCK
$72.00
88a8c82f
Blue Band
LOWSTOCK
$79.00
d895f6f7
Blue T-Shirt
INSTOCK
$29.00
2eb31283
Bracelet
INSTOCK
$15.00
5cb60b77
Brown Purse
OUTOFSTOCK
$120.00
da4a92f5
Chakra Bracelet
LOWSTOCK
$32.00
1212c8d3
Galaxy Earrings
INSTOCK
$34.00
4c43b27f
Game Controller
LOWSTOCK
$99.00
54fe88ba
Gaming Set
INSTOCK
$299.00

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

    <div class="card">
        <h5>Row Editing</h5>
        <p:dataTable id="products1" var="product" value="#{dtEditView.products1}" editable="true"
                     style="margin-bottom:20px">

            <p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs"/>
            <p:ajax event="rowEditCancel" listener="#{dtEditView.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">
                        <p:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
                            <f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
                                           itemLabel="#{status.text}" itemValue="#{status}"/>
                        </p:selectOneMenu>
                    </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Price">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{product.price}">
                            <f:convertNumber type="currency" currencySymbol="$"/>
                        </h:outputText>
                    </f:facet>
                    <f:facet name="input">
                        <p:inputNumber value="#{product.price}" style="width:100%" label="Price" symbol="$"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column style="width:6rem">
                <p:rowEditor editTitle="Edit Row" cancelTitle="Cancel Edit" saveTitle="Save Row"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Cell Editing with Click and RightClick</h5>
        <p:dataTable id="products2" var="product" value="#{dtEditView.products2}" editable="true"
                     editMode="cell" widgetVar="cellProducts">

            <p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" 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="modelInput2" 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">
                        <p:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
                            <f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
                                           itemLabel="#{status.text}" itemValue="#{status}"/>
                        </p:selectOneMenu>
                    </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Price">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{product.price}">
                            <f:convertNumber type="currency" currencySymbol="$"/>
                        </h:outputText>
                    </f:facet>
                    <f:facet name="input">
                        <p:inputNumber value="#{product.price}" style="width:100%" label="Price" symbol="$"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Cell Editing with Double Click Event (dblclick)</h5>
        <p:dataTable id="products3" var="product" value="#{dtEditView.products3}" editable="true" editMode="cell"
                     widgetVar="cellCars2" editInitEvent="dblclick" style="margin-bottom:20px">

            <p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" 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="modelInput3" 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">
                        <p:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
                            <f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
                                           itemLabel="#{status.text}" itemValue="#{status}"/>
                        </p:selectOneMenu>
                    </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Price">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{product.price}">
                            <f:convertNumber type="currency" currencySymbol="$"/>
                        </h:outputText>
                    </f:facet>
                    <f:facet name="input">
                        <p:inputNumber value="#{product.price}" style="width:100%" label="Price" symbol="$"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
        </p:dataTable>
    </div>

    <p:contextMenu for="products2" widgetVar="cMenu">
        <p:menuitem value="Edit Cell" icon="pi pi-search"
                    onclick="PF('cellProducts').showCellEditor();return false;"/>
        <p:menuitem value="Hide Menu" icon="pi pi-times" onclick="PF('cMenu').hide()"/>
    </p:contextMenu>
</h:form>