JSF 2 html dataTable

In this tutorial you will learn about the tag in JSF.

JSF 2 html dataTable

In this tutorial you will learn about the <h:dataTable> tag in JSF.

In JSF applications <h:dataTable> tag is used in the JSF pages to create table. This tag renders the HTML <table> tag and displays the data into the table format. The <h:column> attribute is used as the child tag for creating the columns in table and it is rendered as the HTML <td> tag. To render the <h:column> tag UIColumn component is responsible. If any header, facet is defined within the <h:dataTable> tag it is rendered as the HTML <thead> tag. For the child UIColumn components header, facet the output is the 'col' value as the "scope" attribute of <th> element. And if the header, facet is defined for the UIData component (outside the UIColumn components) the output is the 'colgroup' value as the "scope" attribute of <th> element. Using the CSS, appearance of table contents can be enhanced such as the colour etc.

Attributes of <h:dataTable>

• first : This is an optional attribute. This attribute is used for setting the zero-relative row number of the first row. Using this tag you can set the initial row number to begin the rendering of row of underlying data. As for example if you will set the value zero, then the rendering of row will be begin from the first row.
  
  
• id : This is an optional attribute. This attribute is used to make the attribute uniquely identifiable. The value given to this attribute must be unique within the closest parent.
  
  
• rendered : This is an optional attribute. This attribute evaluates to a boolean value which indicates that whether the current component should be rendered in the Render Response Phase or not or worked on any later form submission. Default value is 'true'.
  
  
• rows : This is an optional attribute. This attribute specifies that how many rows are to be displayed, started with the value specified by the attribute "first". The Value zero determines that all the rows that are available in the respective data model will be displayed.
  
  
• value : This is an optional attribute. This attribute is used to assign a current value to this component.
• var : This is an optional attribute. This attribute is used to specify the request-scope attribute's name using which the current value of the row for each iteration (rowIndex) the data will be exposed.
  
  
• bgcolor : This is an optional attribute that is used for specifying the back ground color of table by providing either the code or name of color.
• bodyrows : This is an optional attribute that is used for specifying the row of indices for which a new <tbody> element is to be started and which one previously opened <tbody> has to be ended.
  
  
• border : This is an optional attribute. This attribute is used to specify the border (i.e width) for the table.
• captionClass : This is an optional attribute. This attribute is used to specify the list of CSS style class/es which will be used on the caption of this table. List of the CSS style class/es is a space-separated list.
  
  
• captionStyle : This is an optional attribute. This attribute is used to specify the list of CSS style/s which will be used on the caption during rendered.
• cellpadding : This is an optional attribute. This attribute is used for defining the required space should left between the each cell's border and its contents.
• cellspacing : This is an optional attribute. This attribute is used for defining the required space should left between the leftmost column and the left side of the table, between the top of the table and the top of the top side of the topmost row, and so on for the right and bottom of the table. Using this attribute the  required amount of space should be left between cells can also be defined.
  
  
• columnClasses : This is an optional attribute that specifies the list of CSS style class/es which will be used on the columns of this table. List of the CSS style class/es is a comma-delimited list or for any individual columns list may defined as space-separated list of the CSS style class/es.
  
  
• dir : This is an optional attribute. This attribute evaluates to the java.lang.String value that suggests the direction for the text which doesn't inherit the property of maintaining a direction. The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
  
  
• footerClass : This is an optional attribute. Specifies the CSS style class/es for the footer of the table to be applied on. The list of CSS style class/es is a space-separated list.
  
  
• frame : This is an optional attribute that sets the code for which sides of the frame surrounded this table to be visible. Allowable values are 'above' (for top side only), 'below' (for bottom side only), 'hsides' (for top and bottom sides only), 'lhs' (for left hand side only), 'rhs' (for right hand side only), 'vsides' (for left and right side only), 'box' (for all four sides), 'border' (for all four sides), 'none' (for default value, no sides).
  
  
• headerClass : This an optional attribute. Specifies the CSS style class/es for the any header of the table to be applied on. The list of CSS style class/es is a space-separated list.
  
  
• lang : This is an optional attribute. This attribute is used to give the description of language of the generated HTML output.
• onclick : This is an optional attribute. This attribute specifies the onclick event i.e the JavaScript code is executed when click is done over the element by the pointer button.
  
  
• ondblclick : This is an optional attribute. This attribute specifies the ondbclick event i.e the JavaScript code is executed when double click is done over the element by the pointer button.
  
  
• onkeydown : This is an optional attribute. This attribute specifies the onkeydown event i.e the JavaScript code is executed when the key of keyboard is pressed down over this element.
  
  
• onkeypress : This is an optional attribute. This attribute specifies the onkeypress event i.e the JavaScript code is executed when the key of keyboard is pressed down and released over this element.
  
  
• onkeyup : This is an optional attribute. This attribute specifies the onkeyup event i.e the JavaScript code is executed when the key of keyboard is released over this element.
  
  
• onmousedown : This is an optional attribute. This attribute specifies the onmousedown event i.e the JavaScript code is executed when a mouse button is pressed down over this element.
  
  
• onmousemove : This is an optional attribute. This attribute specifies the onmousemove event i.e the JavaScript code is executed when a mouse button is moved over this element.
  
  
• onmouseout : This is an optional attribute. This attribute specifies the onmouseout event i.e the JavaScript code is executed when a mouse button is moved away from this element.
  
  
• onmouseover : This is an optional attribute. This attribute specifies the onmouseover event i.e the JavaScript code is executed when the mouse pointer is moved onto this element.
  
  
• onmouseup : This is an optional attribute. This attribute specifies the onmouseup event i.e the JavaScript code is executed when the mouse button is relesased over this element.
  
  
• rowClasses : This is an optional attribute that specifies the list of CSS style class/es which will be used on the rows of the table. List of the CSS style class/es is a comma-delimited list or for any individual rows list may defined as space-separated list of the CSS style class/es.
  
  
• rules : This is an optional attribute. This attribute defines the code of rules that will be seem between the cells inside the table. The allowable values are : groups (seen between the row groups), rows (seem between rows only), cols (seem between columns only), all (seem between all rows and columns), none ( for default, no rules).
  
  
• style : This is an optional attribute. This attribute is used to add the inline CSS styles that are to be applied on this table to specify how it will be displayed when rendered.
  
  
• styleClass : This is an optional attribute. This attribute is used to assign the external CSS style class/es that are to be applied on this element to specify how it will be displayed when rendered.
  
  
• summary : This is an optional attribute. This attribute is used to specify the summary of purpose and structure of this table.
• title : This is an optional attribute. This attribute specifies the text information of the component as a tooltip when the mouse pointer is hover over this table.
  
• width : This is an optional attribute. This attribute specifies the width for the entire table.
• binding : This is an optional attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Generally this tag is used to display the dynamic data into the table format. When I used this tag to display the static contents it is nothing to see in the output but when I have used this tag with its "value" attribute it shows the data. Here is the example of static data :

input.xhtml

<!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">

<head>
<title>JSF 2 html dataTable</title>
</head>
<f:view>
<h:form>
<h:dataTable value="" border="1" title="dataTable">
<f:facet name="header">
<h:outputText value="JSF dataTable example" />
</f:facet> 
<h:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet> 
<h:outputText value="Deepak"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Address" />
</f:facet> 
<h:outputText value="Rohini"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Ph.No" />
</f:facet> 
<h:outputText value="9328888888"/>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</html>

When you will execute the above code by giving the address as http://localhost:8181/jsfHDataTable/input.jsf then the output will be as follows :

Example :

Here I am giving a simple example for you which will demonstrate you about how to use the <h:dataTable> tag in JSF 2. In this example we will give the dynamic value to the table. For this I have created a JavaBeans with the some property and their setter getter methods as well as created an array of the Sales object. Then created a JSF page to use the <h:dataTable> tag. In this example I have used the various attributes with this tag which purpose has been discussed above.

Directory Structure

SalesBean.java

package devmanuals;

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

@ManagedBean(name="salesBean")
@SessionScoped
public class SalesBean {

private Sales[] saleList = new Sales[] {

new Sales(1, "Leather Shoe", 2000, 1),
new Sales(2, "Sport Shoe", 3000, 2),
new Sales(1, "Ladies Sandle", 700, 3),
new Sales(2, "Men's Sandle", 1000, 1), 
};

public Sales[] getSaleList() {

return saleList; 
}

public static class Sales{

int sellerId;
String productName;
int cost;
int qty;
public Sales(int sellerId, String productName, int cost, int qty) {
super();
this.sellerId = sellerId;
this.productName = productName;
this.cost = cost;
this.qty = qty;
}
public int getSellerId() {
return sellerId;
}
public void setSellerId(int sellerId) {
this.sellerId = sellerId;
}
public String getProductName() {
return productName;
}
public void setProductName(String productName) {
this.productName = productName;
}
public int getCost() {
return cost;
}
public void setCost(int cost) {
this.cost = cost;
}
public int getQty() {
return qty;
}
public void setQty(int qty) {
this.qty = qty;
} 
}
}

sales.xhtml

<!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">

<head>
<title>JSF 2 html dataTable</title>
</head>
<f:view>
<h:form>
<h:dataTable id="t1" value="#{salesBean.saleList}"
var="s" bgcolor="red" border="10" cellpadding="5"
cellspacing="1" first="0" rows="4" width="50%"
frame="box" rules="all" title="SalesRecord Table"
summary="Table for the Sales Record" >

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

<h:column>
<f:facet name="header">
<h:outputText value="Salesman Id" />
</f:facet> 
<h:outputText value="#{s.sellerId}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Product Name"/>
</f:facet> 
<h:outputText value="#{s.productName}"></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="Cost"/>
</f:facet> 
<h:outputText value="#{s.cost}"></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="Quantity"/>
</f:facet>
<h:outputText value="#{s.qty}"></h:outputText>
</h:column>

<f:facet name="footer">
<h:outputText value="@SalesRecord" />
</f:facet> 

</h:dataTable>
</h:form>
</f:view>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfHDataTable</display-name>
<welcome-file-list>
<welcome-file>sales.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How To Run

Download the above code from the link Download Source Code and import this file into the eclipse or copy the above codes and paste them into the respective files as per the directory structure given above and then start your server and then used the link http://localhost:8181/jsfHDataTable/sales.jsf into the address bar of your web browser.

Output :

When you will execute the above code the following output will be displayed to you :

Description of output :

A frame you are looking within which the table is surrounded is because of the use of frame="box" attribute, when you will hover the mouse over the table tooltip will appear because of the use of title="SalesRecord Table" attribute, the background color is set using the bgcolor="red" attribute, footer and headers are showed because of the use of <f:facet name="header/footer"> tag, border of table is set by the use of border="10" attribute.

As well as the HTML output of this table will be as follows :

<!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">

<head>
<title>JSF 2 html dataTable</title>
</head>
<form id="j_idt3" name="j_idt3" method="post" action="/jsfHDataTable/sales.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />
<table id="j_idt3:t1" bgcolor="red" border="10" cellpadding="5" cellspacing="1" frame="box" rules="all" summary="Table for the Sales Record" title="SalesRecord Table" width="50%">
<thead>
<tr><th colspan="4" scope="colgroup">SalesRecord Table</th></tr>
<tr>
<th scope="col">Salesman Id</th>
<th scope="col">Product Name</th>
<th scope="col">Cost</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tfoot>
<tr><td colspan="4">@SalesRecord</td></tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Leather Shoe</td>
<td>2000</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>Sport Shoe</td>
<td>3000</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>Ladies Sandle</td>
<td>700</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Men's Sandle</td>
<td>1000</td>
<td>1</td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJWSwWsTQRTGXzfdtolBYiw5iPVUhIJsKKVQDGKCaehiUgOpYPFgJ8k02Ti7O868TTY9FHrRgxdBPQgVPXjw0Jt/gXgQBAU9ehIP3jyKR53ZxEShOTgwj2X2ve+938x39B1MLgWc6pAusQJ0mLVBZLtCuDn7+fWbzM7HGBglSDCfNEukgb6wIY5tQWXbZ82QX86DXsnenIoptWMI8c4tp4krF3E5EHD6ZjmSZsRrWdfqHdrA3IMPN56l5BIzAEKuakyuVnAH9iGmFfYFLOma0NolDSqthu9y36MeWtftIkGyWBU+pwL7V2lfwnCllZaAk+Ne617g/v2TI8wJv2d7TRqOgKNM20PaoiL99fmLnwf31gyYssHsEhZQpZga520Gbp2Ku0ePF048+nI/Gv6XWkp4ZkA8QvgXyFRA1iSgK3++J1JpmVmEBEEUTj1AKqU+guHVz0RXr/cUwjklbcnAGzbSkVGUVqFaLdvrRcW9OiHDcTmzinSXBAxLg8PFAuesv+Xfpt6Plxe2D/OdfFJD9zKQzErCVHnYRpepzmsrO98qYahAV/8PtCqcLkF6DO/8mHerTbAgaE3NqQw1dmpBCNIvOxLDg08LT96SpzH9dNPS2aORr4zetI6q6PzxU9VQ9d5QRqaiRrpUbL97denh4fuKAUYZ4g1GpNwkLkVIRybOahtka2osr5UrQ0KqmmakgZAZZDh+tkaFQ5izR+qM5kLOuxroTPRmZ7mO89qLprbM8sgjBufhbz/nHmKMAwAA" autocomplete="off" />
</form>
</html>