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="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h2>Editable Datatable</h2>
<h:body>
    <h:form id="jsfexample">
        <p:panelGrid columns="2">
            <f:facet name="header">  
                Basic PanelGrid  
           </f:facet>
            <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="#{manager.save}" update="mydata"
                value="Save" icon="ui-icon-check" style="margin:0" />

        </p:panelGrid>

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

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

 

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


            <p:column headerText="Options" style="width:50px">
                <p:rowEditor />
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

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;

@ManagedBean(name="manager")
public class PropertyManager {
  
    @EJB
    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() {
         
        cacheList.clear();
    
    }
    public List getCacheList() {
        return ejb.getCache();
    }

}

And here's the expected output:

primefaces datatable tutorial

0
0
0
s2sdefault