Advertise with us

Our eBooks

Datatables with PrimeFaces

Primefaces editable dataTable

When your tabular data is not read-only, you need to enable editing of your dataTable cells. This can be achieved in many ways: for example you might add a button which fires a popup with the editable fields.

Creating an editable datatable with PrimeFaces just requires wrapping each column into <p:cellEditor>. The <p:cellEditor> contains both an output text and an input text which will be fired when you are in edit mode. In order to switch to the editing mode, add a column containing <p:rowEditor />. That's all. No changes required in the Bean Model.

<html xmlns=""


<h2>Editable Datatable</h2>
    <h:form id="jsfexample">
        <p:panelGrid columns="2">
            <f:facet name="header">  
                Basic PanelGrid  
            <h:outputLabel for="key" value="Enter key" />
            <p:inputText id="key" value="#{manager.key}" />

            <h:outputLabel for="value" value="Enter value" />
            <p:inputText id="value" value="#{manager.value}" />

            <p:commandButton action="#{}" update="mydata"
                value="Save" icon="ui-icon-check" style="margin:0" />


        <p:dataTable value="#{manager.cacheList}" var="item" id="mydata">

            <p:column headerText="Key">
                    <f:facet name="output">
                        <h:outputText value="#{item.key}" />
                    <f:facet name="input">
                        <h:inputText value="#{item.key}" />


            <p:column headerText="Value">
                    <f:facet name="output">
                        <h:outputText value="#{item.value}" />
                    <f:facet name="input">
                        <h:inputText value="#{item.value}" />

            <p:column headerText="Options" style="width:50px">
                <p:rowEditor />

This is the JSF Bean which is used in this example. For the full code example (which includes a SingletonEJB and the Property POJO download the code at the end of the article).

package com.sample.bean;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.model.SelectItem;
import javax.servlet.http.HttpServletRequest;

import com.sample.ejb.SingletonBean;
import com.sample.model.Property;

public class PropertyManager {
    SingletonBean ejb;
    ArrayList  cacheList;
    private String key;
    private String value; 

    public String getKey() {
        return key;

    public void setKey(String key) {
        this.key = key;

    public String getValue() {
        return value;

    public void setValue(String value) {
        this.value = value;

    public void save() {
        ejb.put(key, value);

    public void clear() {
    public List getCacheList() {
        return ejb.getCache();


And here's the expected output:

primefaces datatable tutorial

© 2021 All Rights Reserved.

Please publish modules in offcanvas position.