JSF - Display DataTable

Advertisements


h:dataTable tag is used to display data in tabular fashion.

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>

Rendered Output

<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>John</td>
   <td>Marketing</td>
   <td>30</td>
   <td>2000.0</td>
</tr>
<tr class="employeeTableEvenRow">
   <td>Robert</td>
   <td>Marketing</td>
   <td>35</td>
   <td>3000.0</td>
</tr>
</table>

Tag Attributes

S.N.Attribute & Description
1id
Identifier for a component
2rendered
A boolean; false suppresses rendering
3dir
Direction for text. Valid values are ltr (left to right) and rtl (right to left).
4styleClass
Cascading stylesheet (CSS) class name
5value
A component's value, typically a value binding
6bgcolor
Background color for the table
7border
Width of the table's border
8cellpadding
Padding around table cells
9cellspacing
Spacing between table cells
10columnClasses
Comma-separated list of CSS classes for columns
11first
Index of the first row shown in the table
12footerClass
CSS class for the table footer
13frame
Specification for sides of the frame surrounding the table should be drawn; valid values: none, above, below, hsides, vsides, lhs, rhs, box, border
14headerClass
CSS class for the table header
15rowClasses
Comma-separated list of CSS classes for rows
16rules
Specification for lines drawn between cells; valid values: groups, rows, columns, all
17summary
Summary of the table's purpose and structure used for non-visual feedback such as speech
18var
The name of the variable created by the data table that represents the current item in the value
19title
A title, used for accessibility, that describes an element. Visual browsers typically create tooltips for the title’s value
20width
Width of an element
21onblur
Element loses focus
22onchange
Element’s value changes
23onclick
Mouse button is clicked over the element
24ondblclick
Mouse button is double-clicked over the element
25onfocus
Element receives focus
26onkeydown
Key is pressed
27onkeypress
Key is pressed and subsequently released
28onkeyup
Key is released
29onmousedown
Mouse button is pressed over the element
30onmousemove
Mouse moves over the element
31onmouseout
Mouse leaves the element’s area
32onmouseover
Mouse moves onto an element
33onmouseup
Mouse button is released

Example Application

Let us create a test JSF application to test the above tag.

StepDescription
1Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - h:outputStylesheet sub-chapter of JSF - Basic Tags chapter.
2Modify styles.css as explained below.
3Create Employee.java under package com.tutorialspoint.test as explained below.
4Create UserData.java as a managed bean under package com.tutorialspoint.test as explained below.
5Modify home.xhtml as explained below. Keep rest of the files unchanged.
6Compile and run the application to make sure business logic is working as per the requirements.
7Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
8Launch your web application using appropriate URL as explained below in the last step.

styles.css

.employeeTable{   
   border-collapse:collapse;
   border:1px solid #000000;
}

.employeeTableHeader{
   text-align:center;
   background:none repeat scroll 0 0 #B5B5B5;
   border-bottom:1px solid #000000;  
   padding:2px;
}

.employeeTableOddRow{
   text-align:center;
   background:none repeat scroll 0 0 #FFFFFFF;	
}

.employeeTableEvenRow{
   text-align:center;
   background:none repeat scroll 0 0 #D3D3D3;
}

Employee.java

package com.tutorialspoint.test;

public class Employee {
   private String name;
   private String department;
   private int age;
   private double salary;
   private boolean canEdit;

   public Employee (String name,String department,int age,double salary){
      this.name = name;
      this.department = department;
      this.age = age;
      this.salary = salary;
      canEdit = false;
   }

   public String getName() {
      return name;
   }

   public void setName(String name) {
      this.name = name;
   }

   public String getDepartment() {
      return department;
   }

   public void setDepartment(String department) {
      this.department = department;
   }

   public int getAge() {
      return age;
   }

   public void setAge(int age) {
      this.age = age;
   }

   public double getSalary() {
      return salary;
   }

   public void setSalary(double salary) {
      this.salary = salary;
   }

   public boolean isCanEdit() {
      return canEdit;
   }

   public void setCanEdit(boolean canEdit) {
      this.canEdit = canEdit;
   }	
}

UserData.java

package com.tutorialspoint.test;

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

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {

private static final long serialVersionUID = 1L;

   private String name;
   private String dept;
   private int age;
   private double salary;

   private static final ArrayList<Employee> employees
      = new ArrayList<Employee>(Arrays.asList(
      new Employee("John", "Marketing", 30,2000.00),
      new Employee("Robert", "Marketing", 35,3000.00),
      new Employee("Mark", "Sales", 25,2500.00),
      new Employee("Chris", "Marketing", 33,2500.00),
      new Employee("Peter", "Customer Care", 20,1500.00)
   ));	


   public ArrayList<Employee> getEmployees() {
      return employees;
   }

   public String addEmployee() {		 
      Employee employee = new Employee(name,dept,age,salary);
      employees.add(employee);
      return null;
   }

   public String deleteEmployee(Employee employee) {
      employees.remove(employee);		
      return null;
   }

   public String editEmployee(Employee employee){
      employee.setCanEdit(true);
      return null;
   }

   public String saveEmployees(){
      //set "canEdit" of all employees to false 
      for (Employee employee : employees){
         employee.setCanEdit(false);
      }		
      return null;
   }
   
   public String getName() {
      return name;
   }

   public void setName(String name) {
      this.name = name;
   }

   public String getDepartment() {
      return department;
   }

   public void setDepartment(String department) {
      this.department = department;
   }

   public int getAge() {
      return age;
   }

   public void setAge(int age) {
      this.age = age;
   }

   public double getSalary() {
      return salary;
   }

   public void setSalary(double salary) {
      this.salary = salary;
   }
}

home.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">
   <h:head>
      <title>JSF tutorial</title>		
      <h:outputStylesheet library="css" name="styles.css"  /> 	
   </h:head>
   <h:body> 
   <h2>DataTable Example</h2>
   <h:form>
      <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>
   </h:form>
   </h:body>
</html>

Once you are ready with all the changes done, let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application, this will produce following result:

JSF display datatable

Advertisements
Advertisements