JSF dataTable example

08 January 2014
By Gonçalo Marques
In this tutorial we will see how to present tabular data using JSF dataTable component.


The dataTable component may be used to represent tabular data inside a JSF view. In this tutorial we will use a dataTable in order to present an illustrative list of users.

The model

We will need a simple model class to represent a user:


package com.byteslounge.jsf;

public class User {

  private final String firstName;
  private final String lastName;
  private final String email;
  private final int age;

  public User(String firstName, String lastName, String email, int age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
    this.age = age;

  public String getFirstName() {
    return firstName;

  public String getLastName() {
    return lastName;

  public String getEmail() {
    return email;

  public int getAge() {
    return age;


The managed bean

We will also naturally need a managed bean:


package com.byteslounge.jsf;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

public class UsersBean {

  private List<User> userList;

  private void init() {
    userList = new ArrayList<>();
    userList.add(new User("John", "Doe", "[email protected]", 32));
    userList.add(new User("Peter", "Smith", "[email protected]", 25));
    userList.add(new User("Mary", "Jane", "[email protected]", 27));
    userList.add(new User("Mike", "Skeet", "[email protected]", 35));

  public List<User> getUserList() {
    return userList;

  public int getUserCount() {
    return userList.size();


We are just creating a dummy user list during bean initialization.

The dataTable

Finally the dataTable itself:

The dataTable

<h:dataTable value="#{usersBean.userList}" var="user" border="1">

  <f:facet name="header">
    <h:outputText value="Users" />

    <f:facet name="header">
      <h:outputText value="First name" />
    <h:outputText value="#{user.firstName}" />

    <f:facet name="header">
      <h:outputText value="Last name" />
    <h:outputText value="#{user.lastName}" />

    <f:facet name="header">
      <h:outputText value="Email" />
    <h:outputText value="#{user.email}" />

    <f:facet name="header">
      <h:outputText value="Age" />
    <h:outputText value="#{user.age}" />

  <f:facet name="footer">
    <h:outputText value="User count: " />
    <h:outputText value="#{usersBean.userCount}" />


Note the dataTable value and var properties:

value should point to a method (usually a simple getter) in our backing bean that returns the list that will be used to populate the dataTable.

var will represent each list item during the list iteration and consequently each record during table rendering.

We map each dataTable column to the corresponding user property.

The defined columns and the dataTable itself may contain facets (facets are optional). We used the header facet both for the table and the individual columns. This way we may have a global header for the whole table and individual headers for the columns.

We used a footer facet for the dataTable in order to display the user count. If we need we may also use footer facets for individual columns (ex: to display column sums) but this was not the case.

The dataTable we just defined will result in the following table being rendered:

resulting dataTable
JSF dataTable output

Related Articles


About the author
Gonçalo Marques is a Software Engineer with several years of experience in software development and architecture definition. During this period his main focus was delivering software solutions in banking, telecommunications and governmental areas. He created the Bytes Lounge website with one ultimate goal: share his knowledge with the software development community. His main area of expertise is Java and open source.

GitHub profile: http://github.com/gonmarques

He is also the author of the WiFi File Browser Android application: