Data Bound table components
Data-bound table components in JavaServer Faces (JSF) are used to display tabular data fetched from a backend source such as a database or a managed bean collection. These components provide a structured way to render data in rows and columns, supporting features like pagination, sorting, and filtering. Here’s an explanation followed by a Java example for a data-bound table component in JSF:

Table of Contents
Explanation
- 1. Â Purpose:
- Data-bound table components are designed to efficiently display large datasets in a tabular format.
- They enable developers to bind data from managed beans or other sources to the UI, dynamically rendering rows based on the data size.
- 2. Â Features:
- Data Binding: Â They bind to a collection of data (e.g., a list of objects retrieved from a managed bean) using a value attribute.
- Pagination: Â Allows displaying data in manageable chunks by limiting the number of rows per page.
- Sorting: Â Supports sorting columns based on specific criteria such as ascending or descending order.
- Filtering: Â Enables filtering data based on user-defined criteria to display relevant subsets of data.
- 3. Â Commonly Used Components:
- <h:dataTable>: Â Core JSF component for rendering a data table.
- <h:column>: Â Defines a column within <h:dataTable> to display specific properties or fields from the data objects.
- Additional components like <h:outputText>, <h:inputText>, etc., can be nested within <h:column> to customize cell rendering.
Java Example
Here’s an example demonstrating the use of <h:dataTable> to display a list of objects in JSF:
java
package com.example.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.ArrayList;
import java.util.List;
@ManagedBean
@RequestScoped
public class EmployeeBean {
private List<Employee> employees;
public EmployeeBean() {
// Simulated data retrieval or initialization
employees = new ArrayList<>();
employees.add(new Employee(1, "John Doe", "Developer", 5000));
employees.add(new Employee(2, "Jane Smith", "Designer", 4500));
employees.add(new Employee(3, "Mike Johnson", "Manager", 6000));
}
public List<Employee> getEmployees() {
return employees;
}
public void setEmployees(List<Employee> employees) {
this.employees = employees;
}
// Employee class definition with getters and setters
public static class Employee {
private int id;
private String name;
private String role;
private double salary;
public Employee(int id, String name, String role, double salary) {
this.id = id;
this.name = name;
this.role = role;
this.salary = salary;
}
// Getters and setters for id, name, role, and salary
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getRole() {
return role;
}
public void setRole(String role) {
this.role = role;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
}
}
xml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Employee Table Example</title>
</h:head>
<h:body>
<h2>Employee List</h2>
<h:dataTable value="{employeeBean.employees}" var="emp" border="1">
<h:column>
<f:facet name="header">ID</f:facet>
{emp.id}
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
{emp.name}
</h:column>
<h:column>
<f:facet name="header">Role</f:facet>
{emp.role}
</h:column>
<h:column>
<f:facet name="header">Salary</f:facet>
{emp.salary}
</h:column>
</h:dataTable>
</h:body>
</html>
Explanation of Example
- Managed Bean (EmployeeBean.java): Â This managed bean (EmployeeBean) initializes a list of Employee objects in its constructor. It provides a getter method getEmployees() to retrieve this list.
- JSF Page (employee_table.xhtml): Â This JSF page uses <h:dataTable> to display the list of employees ({employeeBean.employees}). Each <h:column> defines a column in the table, displaying specific properties (id, name, role, salary) from each Employee object.
Attributes Used:
- value=”{employeeBean.employees}”: Binds the data table to the employees list in EmployeeBean.
- var=”emp”: Defines a variable emp to refer to each Employee object iteratively within the table.
- <h:column>: Each column displays a specific property (id, name, role, salary) of the Employee object using EL expressions ({emp.property}).
This example demonstrates how <h:dataTable> in JSF can be used to create a data-bound table component, rendering a list of objects (Employee instances) in a tabular format. It showcases the simplicity and power of JSF components for displaying dynamic data in web applications.