JSF Tutorial - JSF DataTable Add Delete Example

JSF has a rich control named DataTable to render and format html tables.

With DataTable we can iterate over collection or array of values to display data.

DataTable has attributes to modify its data in easy way.

In order to use DataTable we need the following HTML header.

<html 
   xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html">
</html>

The following JSF tag

<h:dataTable value="#{userData.employees}" var="employee"
   styleClass="employeeTable"
   headerClass="employeeTableHeader"
   rowClasses="employeeTableOddRow,employeeTableEvenRow">
   <h:column>            
      <f:facet name="header">Name</f:facet>            
      #{employee.name}
   </h:column>
   <h:column>
      <f:facet name="header">Department</f:facet>
      #{employee.department}
   </h:column>
   <h:column>
      <f:facet name="header">Age</f:facet>
      #{employee.age}
   </h:column>
   <h:column>
      <f:facet name="header">Salary</f:facet>
      #{employee.salary}
   </h:column>
</h:dataTable>

is rendered into the following HTML tags.

<table class="employeeTable">
<thead><tr>
   <th class="employeeTableHeader" scope="col">Name</th>
   <th class="employeeTableHeader" scope="col">Department</th>
   <th class="employeeTableHeader" scope="col">Age</th>
   <th class="employeeTableHeader" scope="col">Salary</th>
</tr></thead>
<tbody>
<tr class="employeeTableOddRow">
   <td>Tom</td>
   <td>Marketing</td>
   <td>10</td>
   <td>2000.0</td>
</tr>
<tr class="employeeTableEvenRow">
   <td>Robert</td>
   <td>Marketing</td>
   <td>15</td>
   <td>1000.0</td>
</tr>
</table>

Tag Attributes

Attribute	Description
id	id for the tag
dir	Direction for text. Valid values are ltr (left to right) and rtl (right to left).
styleClass	Cascading stylesheet (CSS) class name
value	A component's value, typically a value binding
bgcolor	Background color for the table
border	Width of the table's border
cellpadding	Padding around table cells
cellspacing	Spacing between table cells
columnClasses	Comma-separated list of CSS classes for columns
first	Index of the first row shown in the table
footerClass	CSS class for the table footer
frame	frame surrounding the table should be drawn; valid values: none, above, below, hsides, vsides, lhs, rhs, box, border
headerClass	CSS class for the table header
rowClasses	Comma-separated list of CSS classes for rows
rules	Specification for lines between cells; valid values: groups, rows, columns, all
summary	Summary of the table's purpose and structure used for non-visual feedback
var	The variable name created by the data table that represents the current item
title	A title used for accessibility. Browsers typically create tooltips for the title's value
type	Type of a link; for example, stylesheet
width	Width of an element
onblur	Event handler for losing focus
onchange	Event handler for value changes
onclick	Event handler for Mouse button clicked over the element
ondblclick	Event handler for Mouse button double-clicked
onfocus	Event handler for element received focus
onkeydown	Event handler for Key pressed
onkeypress	Event handler for Key pressed and released
onkeyup	Event handler for Key released
onmousedown	Event handler for Mouse button pressed
onmousemove	Event handler for mouse moved
onmouseout	Event handler for mouse left
onmouseover	Event handler for mouse moved onto
onmouseup	Event handler for mouse button released

Example

The following code is from demo.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets">
    <h:head>
      <h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
      <h:form>
        <h:dataTable value="#{book.bookList}" var="o"
          styleClass="book-table"
          headerClass="book-table-header"
          rowClasses="book-table-odd-row,book-table-even-row">
          <h:column>
            <f:facet name="header">Book No</f:facet>#{o.bookNo}
          </h:column>
          <h:column>
            <f:facet name="header">Product Name</f:facet>#{o.productName}
          </h:column>
          <h:column>
            <f:facet name="header">Price</f:facet>#{o.price}
          </h:column>
          <h:column>
            <f:facet name="header">Quantity</f:facet>#{o.qty}
          </h:column>
          <h:column>
            <f:facet name="header">Action</f:facet>
            <h:commandLink value="Delete" action="#{book.deleteAction(o)}" />
          </h:column>
        </h:dataTable>
        <h3>Enter Book</h3>
        <table>
        <tr>
          <td>Book No :</td>
          <td><h:inputText size="20" value="#{book.bookNo}" /></td>
        </tr>
        <tr>
          <td>Product Name :</td>
          <td><h:inputText size="20" value="#{book.productName}" /></td>
        </tr>
        <tr>
          <td>Quantity :</td>
          <td><h:inputText size="20" value="#{book.price}" /></td>
        </tr>
        <tr>
          <td>Price :</td>
          <td><h:inputText size="20" value="#{book.qty}" /></td>
        </tr>
        </table>
        <h:commandButton value="Add" action="#{book.addAction}" />
      </h:form>
    </h:body>
</html>

The following code is from UserBean.java.

package com.java2s.common;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="book")
@SessionScoped
public class UserBean implements Serializable{
  private static final long serialVersionUID = 1L;
  String bookNo;
  String productName;
  BigDecimal price;
  int qty;
  public String getBookNo() {
    return bookNo;
  }
  public void setBookNo(String bookNo) {
    this.bookNo = bookNo;
  }
  public String getProductName() {
    return productName;
  }
  public void setProductName(String productName) {
    this.productName = productName;
  }

  public BigDecimal getPrice() {
    return price;
  }

  public void setPrice(BigDecimal price) {
    this.price = price;
  }

  public int getQty() {
    return qty;
  }

  public void setQty(int qty) {
    this.qty = qty;
  }

  private static final ArrayList<Book> bookList = 
    new ArrayList<Book>(Arrays.asList(
    
    new Book("1", "CSS", new BigDecimal("123.12"), 1),
    new Book("2", "HTML", new BigDecimal("321.12"), 2),
    new Book("3", "SQL", new BigDecimal("12333.33"), 8),
    new Book("4", "Javascript", new BigDecimal("1233.33"), 3),
    new Book("5", "Web", new BigDecimal("123.22"), 10)
  ));
   
  public ArrayList<Book> getBookList() {
    return bookList;
  }
  public String addAction() {
    Book book = new Book(this.bookNo, this.productName, 
      this.price, this.qty);
    bookList.add(book);
    return null;
  }
  public String deleteAction(Book book) {
      
    bookList.remove(book);
    return null;
  }

    public static class Book{
      
      String bookNo;
      String productName;
      BigDecimal price;
      int qty;
    
      public Book(String bookNo, String productName, 
          BigDecimal price, int qty) {
        this.bookNo = bookNo;
        this.productName = productName;
        this.price = price;
        this.qty = qty;
      }
      
      public String getBookNo() {
        return bookNo;
      }
      public void setBookNo(String bookNo) {
        this.bookNo = bookNo;
      }
      public String getProductName() {
        return productName;
      }
      public void setProductName(String productName) {
        this.productName = productName;
      }
      public BigDecimal getPrice() {
        return price;
      }
      public void setPrice(BigDecimal price) {
        this.price = price;
      }
      public int getQty() {
        return qty;
      }
      public void setQty(int qty) {
        this.qty = qty;
      }
    }

}

The following code is from table-style.css.

.book-table-header{
  bbook-bottom:1px solid #BBB;
  padding:16px;
}

.book-table-odd-row{
  bbook-top:1px solid #BBB;
}

.book-table-even-row{
  bbook-top:1px solid #BBB;
}

Download DataTable_Add_Delete.zip

To RUN

Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.

http://localhost:8080/simple-webapp/demo.xhtml