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;

  1. id: unique identifier used to identify a component.
  2. value: The current value of the component.
  3. bgcolor: background color for the table that is displayed.
  4. border: width in pixel to be drawn around the table.
  5. cellpadding: Space between border of each cell and its contents.
  6. cellspacing: Space between left side of the table and leftmost column and also amount of space between the cells.
  7. columnClasses: List of css styles separated by comma to be applied to the columns of this table.
  8. bodyrows: List of row indices separated by comma to be applied for the “tbody” element should be started.
  9. first: zero or relative row number of the first row to be displayed.
  10. frame: code that specifies the frame to be visible around the table
  11. rows: Number of rows to be displayed identified by first property.
  12. 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.

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;

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.

By admin

Leave a Reply

%d bloggers like this: