JSF - Display DataTable

h:dataTable tag is used to display data in a tabular fashion.
<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>
<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>
id
Identifier for a component
rendered
A boolean; false suppresses rendering
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
Specification for sides of the 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 drawn between cells; valid values: groups, rows, columns, all
summary
Summary of the table's purpose and structure used for non-visual feedback such as speech
var
The name of the variable created by the data table that represents the current item in the value
title
A title, used for accessibility, that describes an element. Visual browsers typically create tooltips for the title’s value
width
Width of an element
onblur
Element loses focus
onchange
Element’s value changes
onclick
Mouse button is clicked over the element
ondblclick
Mouse button is double-clicked over the element
onfocus
Element receives focus
onkeydown
Key is pressed
onkeypress
Key is pressed and subsequently released
onkeyup
Key is released
onmousedown
Mouse button is pressed over the element
onmousemove
Mouse moves over the element
onmouseout
Mouse leaves the element’s area
onmouseover
Mouse moves onto an element
onmouseup
Mouse button is released
Let us create a test JSF application to test the above tag.
.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;
}
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;
   }	
}
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;
   }
}
<?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 the following result.

    37 Lectures 
     3.5 hours 

 Chaand Sheikh
 Print
 Add Notes
 Bookmark this page