Main Tutorials

JSF 2 repeat tag example

The ui:repeat is always uses as an alternative to h:dataTable, to loop over array or list to display the data in HTML table format. See following examples :

1. h:dataTable

In dataTable, JSF helps you to generate all the HTML table tags.


<h:dataTable value="#{order.orderList}" var="o">
 
	<h:column>
		#{o.orderNo}
	</h:column>

	<h:column>
		#{o.productName}
	</h:column>

	<h:column>
		#{o.price}
	</h:column>

	<h:column>
		#{o.qty}
	</h:column>
 
</h:dataTable>

2. ui:repeat

In repeat tag, you have to put all the HTML table tags manually.


<table>

   <ui:repeat var="o" value="#{order.orderList}" varStatus="status">
	
	<tr>
		<td>#{o.orderNo}</td>
		<td>#{o.productName}</td>
		<td>#{o.price}</td>
		<td>#{o.qty}</td>
	</tr>
		
   </ui:repeat>
    			
</table>

ui:repeat example
Here’s a JSF 2.0 ui:repeat example to render exactly the same HTML output like this h:dataTable example. Compare both and spot the different.

JSF…


<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
    	
    	<h1>JSF 2 ui:repeat tag example</h1>

    	<table class="order-table">
    		<tr>
    			<th class="order-table-header">Order No</th>
    			<th class="order-table-header">Product Name</th>
    			<th class="order-table-header">Price</th>
    			<th class="order-table-header">Quantity</th>
    		</tr>
    		<tbody>
	    		<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
	    			<h:panelGroup rendered="#{status.even}">
	   			  <tr>
		    			<td class="order-table-even-row">#{o.orderNo}</td>
		    			<td class="order-table-even-row">#{o.productName}</td>
		    			<td class="order-table-even-row">#{o.price}</td>
		    			<td class="order-table-even-row">#{o.qty}</td>
		    		  </tr>
	    			</h:panelGroup>
	    		        <h:panelGroup rendered="#{status.odd}">
	    			  <tr>
		    			<td class="order-table-odd-row">#{o.orderNo}</td>
		    			<td class="order-table-odd-row">#{o.productName}</td>
		    			<td class="order-table-odd-row">#{o.price}</td>
		    			<td class="order-table-odd-row">#{o.qty}</td>
		    		  </tr>
	    			</h:panelGroup>
	    		</ui:repeat>
    		</tbody>
    	</table>
    </h:body>
</html>
Note
You can find the “order” managed bean source code in this h:dataTable example.

The “ui:repeat” tag comes with many helpful attributes like offset, size, status and etc. Make sure you check this JSF ui:repeat javadoc.

Output

jsf2-repeat-example

Download Source Code

Download It – JSF-2-Repeat-Tag-Example.zip (10KB)

References

  1. JSF ui:repeat JavaDoc
  2. JSF h:dataTable JavaDoc
  3. JSF h:panelGroup JavaDoc

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
16 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Abraão Isvi
11 years ago

Thanks!

yanping
11 years ago

thanks for the great example.
the reference doc link is broken. can you elaborate on the varStatus variable?

Melvin
11 years ago
Reply to  mkyong

varStatus…..

Isn’t it the index of the list?
I think you mean “var” in your example.

Vinoth
5 years ago

is it possible to iterate in reverse order? With out changing the java code.

Vishwas
8 years ago

Hi Yong,
Could you please put some example of how to iterate two dimensional array of string using ui:repeat. I want to show some db table table on user interface.
Thanks

sence
10 years ago

why it removes my tags…… i mean use simple #{status.odd ? ‘order-table-odd-row’ : ‘
order-table-even-row’} for the css class setter

sebastien
10 years ago

you’re cool Mr mkyong

Do Van Kien
11 years ago

How I can inport the library of this URI: “http://java.sun.com/jsf/facelets”?

gebuh
11 years ago

Hi Mkyong, what are the differences between ui:repeat, h:datatable and c:foreach? When would you choose one over the other?
thanx

murasame
10 years ago
Reply to  gebuh

First of all…. ui:repeat and c:foreach are TagHandlers which participate only before the view has rendered and then they dissapear from the document. h:datatable is a component which renders to the document.

On the other hand, ui:repeat and c:foreach are cycle structures and h:datatable is a component that allows you to create an HTML table.

I hope this helps….

Sushil Kumar
11 years ago

Is there any way to update ui:repeat component once some ajax call is completed?
I’m submitting a form and after that i will populate the list.

ram
11 years ago

Since, i dont want to see repeated row values in one column, can we hide the row values of same content repeated and just display one row and rest empty or blank in a rich:datatable or h:datatable column?

Peter Saly
13 years ago

ui:repeat Tag is not new to JSF 2.0. It is since JSF 1.2.

sence
10 years ago

why not simple use ?

#{o.orderNo}
#{o.productName}
#{o.price}
#{o.qty}

and stop repeating yourself 🙂