JSF dataTable tag is used to display data on JSF view pages. The data bound table components are responsible for displaying the relational data in a tabular format. The <h:dataTable> tag is used for displaying the data components. The <h:column> tag iterates over each record in the data source displayed in rows.
JSF dataTable
Some of the attributes of JSF dataTable tag are;
- id: unique identifier used to identify a component.
- value: The current value of the component.
- bgcolor: background color for the table that is displayed.
- border: width in pixel to be drawn around the table.
- cellpadding: Space between border of each cell and its contents.
- cellspacing: Space between left side of the table and leftmost column and also amount of space between the cells.
- columnClasses: List of css styles separated by comma to be applied to the columns of this table.
- bodyrows: List of row indices separated by comma to be applied for the “tbody” element should be started.
- first: zero or relative row number of the first row to be displayed.
- frame: code that specifies the frame to be visible around the table
- rows: Number of rows to be displayed identified by first property.
- headerClass: CSS class for the table header
JSF dataTable Example
Now let’s look at the JSF dataTable example.
The example is to display the mobile company name, price and quantity needed by the user.
Create a managed bean named Mobile.java to contain a list of mobiles along with their details.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
package com.journaldev.jsf.beans; import java.util.ArrayList; import java.util.Arrays; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name = "mobilerecords", eager = true) @SessionScoped public class Mobile { private String companyname; private String modelnumber; private String color; private int quantity; private double price; private static final ArrayList<Mobile> mobiles = new ArrayList<Mobile>( Arrays.asList( new Mobile("Nokia", "N213", "Black", 10, 2500), new Mobile("Micromax", "A114", "White", 25, 9500), new Mobile("MotoG", "M345", "Grey", 40, 15300), new Mobile("Samsung", "S-512", "Blue", 15, 11000) )); public ArrayList<Mobile> getMobiles() { return mobiles; } public Mobile() { } public Mobile(String companyname, String modelnumber, String color, int quantity, double price) { this.companyname = companyname; this.modelnumber = modelnumber; this.color = color; this.quantity = quantity; this.price = price; } public String getCompanyname() { return companyname; } public void setCompanyname(String companyname) { this.companyname = companyname; } public String getModelnumber() { return modelnumber; } public void setModelnumber(String modelnumber) { this.modelnumber = modelnumber; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } public int getQuantity() { return quantity; } public void setQuantity(int quantity) { this.quantity = quantity; } public double getPrice() { return price; } public void setPrice(double price) { this.price = price; } } |
Here we have declared a list called mobiles which contains mobile details like color, company name, price etc. and the getter setter methods for various fields used. Also, the constructors are written to set values for the fields and insert them into the list called “mobiles”.
Now create the JSF page mobiles.xhtml as;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html" xmlns:c="https://java.sun.com/jsf/core"> <h:head> <title>DataTable tag Example</title> </h:head> <h:body> <h3>Mobile Details</h3> <h:form> <h:dataTable value="#{mobilerecords.mobiles}" var="mobile" border="2" cellspacing="1" cellpadding="1"> <h:column> <c:facet name="header">Name</c:facet> #{mobile.companyname} </h:column> <h:column> <c:facet name="header">Model Number</c:facet> #{mobile.modelnumber} </h:column> <h:column> <c:facet name="header">Color</c:facet> #{mobile.color} </h:column> <h:column> <c:facet name="header">Quantity</c:facet> #{mobile.quantity} </h:column> <h:column> <c:facet name="header">Price</c:facet> #{mobile.price} </h:column> </h:dataTable> </h:form> </h:body> </html> |
Here we use the jsf dataTable tag to fetch the list from the Mobile bean and display each column using <h:column> tag.
We use css properties like border, cellspacing, cellpadding etc. to display the table as we want. The <c:facet> tag is used to display the column headers.
The <h:column> tag represents the data for each column and iterates until it finds the <h:column> tag for a particular row.
Once done with the above said bean class and JSF page, run the application and it should display the following output.
Below image shows the final JSF dataTable example project structure in Eclipse.
You can download the final JSF dataTable project from below link to learn more.