Simple expandable table with RichFaces

Expandable tables lets you click in a row to get more information about the particular record in this row. In this example, another rich:dataTable component is used to display details about one of the selected wonders.


Click on any [+]/[-] to expand/collapse any row:

JSF page:


WonderBean class:

public class WonderBean {
   private WonderService service;
   private Boolean show;

   public Boolean getShow() {
      return show;}
   public void setShow(Boolean show) { = show;
   public WonderService getService() {
	return service;
   public void setService(WonderService service) {
	this.service = service;
   public WonderBean() {
   public ArrayList getWonders() {
	return service.getList();

WonderService class:

public class WonderService {

   private ArrayList  list;

   public ArrayList getList() {
	return list;
   public void init () {
	list = new ArrayList ();
	list.add(new Wonder("Chichen Itza", "Mexico", ""));
	list.add(new Wonder("Christ the Redeemer", "Brazil", ""));
	list.add(new Wonder("Colosseum", "Italy", ""));
	list.add(new Wonder("Great Wall of China", "China", ""));
	list.add(new Wonder("Machu Picchu", "Peru", ""));
	list.add(new Wonder("Petra", "Jordan", ""));
	list.add(new Wonder("Taj Mahal", "India", ""));

   public WonderService() {

Wonder class:

public class Wonder implements{

   private String name;
   private Details details;

   public String getName() {
	return name;
   public void setName(String name) { = name;
   public Wonder(String name, String location, String imageUrl) {
	super(); = name;
	this.details = new Details (location, imageUrl);
   public Details getDetails() {
	return details;

JSF configuration file:



  1. davjo089 says:

    How does the:
    show and hide only specific wonders? As the Boolean value is on the WonderBean and not connected to a specific Wonder, would it not show and hide all wonders?

  2. max says:

    By default an AJAX request sent from a particular row will limit the updates to that row only. For example, if all are closed and you click on one, only that row will be processed and updated (opened). So the property doesn’t need to be connected to any particular Wonder, it’s used by all the rows at a time. All RichFaces data iteration components support this feature. If you need to update more than one row, then you can use ajaxKeys attribute ( Also available on all data iteration components. Hope this helps.

  3. Jochen says:

    Hi Max,

    Thanks for this tutorial. It works fine at my side!
    But I have a question: I don’t want the empty row when the details are collapsed. So what I’ve tried:

    This doesn’t seem to work 😦 … Can you help me out?

  4. Jochen says:

    Hmm, I cannot post the richfaces tags 🙂

  5. Jochen says:
    This code works (like yours), but I have an empty row when the row is collapsed.

    So, to “disable” the columnGroup, I tried this:

    But now, the row doesn’t expand any longer! 😦

  6. max says:

    a4j:outputPanel cannot be a direct child of rich:dataTable. It can only be used inside a facet.

  7. Navin says:

    I have the problem with this code if it’s two level nested dataTable. This means if each of the location of the wonder has further data with it.

  8. max says:

    @Navin: well, wouldn’t say it’s a problem. This particular example only shows one-level expand.

  9. Navin says:

    Max, my requirement is to use nested dataTables and of two-level expand. I find that innermost expand is not working at all.

  10. Rajasekhar says:

    I tried above code it there is one problem if i click on icon it is not expanding aswell as it is not giving any java script error.

    application on Apache tomcat 6.0
    Rich Faces 3.2
    Eclipde Galylio
    the above mention is development environment.

    can you please help me on this issue. urgent

  11. max says:

    It works for me.. try RichFaces version 3.3.x

  12. Rajasekhar says:

    I tried with RichFaces version 3.3.2 version still it is not working.
    Click on icon it is giving Object expected java script error.

    Please help me on this ASAP.

  13. max says:

    What is the exact error message, what browser are you using? Also, place a4j:log popup=”false” on a page and see if there are any errors in the log.

  14. Rajasekhar says:

    Hi it is working fine.
    Thanks a lot.

  15. Rajasekhar says:

    Header and values are displaying next to each other instead of next row

  16. Rajasekhar says:

    I am getting data from backent(Mainframes) now i have list of String objects.
    Using i am displaying the data but i need to make second colums as hyper link but i dont have control on particular column.because entaire list i am iterating at a time.

    How can i achieve this one please give the suggetions asap.

    tableHeader is the list it is coming from backend front end ppl dont know what it contains just we have to iterate and need to make second column as hyperlink

    Thnaks in advance.

  17. max says:

    You create a column using h:column (or rich:column) tag.

  18. siva says:

    Hi Max,

    Thanks for this tutorial. It works fine at my side!
    But I have a question: I don’t want the empty row when the details are collapsed.

  19. max says:

    @siva: I don’t know off the top of my head how to get rid of it. Check with Firebug which components generates that markup.

  20. M M Islam Chisty says:

    If you want to use pagination in both in your parent table and in your nested datatable, you will have to use rich:dataScroller, isn’t it? Givt it a try… see if it works at all … PRobably it will not work.

  21. max says:

    @M M: yes, you would need a data scroller. Try it, let me know if it works.

  22. Márcio Martins says:

    I had to make some adjustments… since it wasn´t retrieving only the respective wonder details:
    1. Put the Boolean attribute at the Wonder object (not the Wonderbean itself)
    2. Create a within the commandlink, setting the wonder object of the row to the bean where im going to retrieve the subtable
    3. Place a action in the commandlink =”#{WonderBean.getwonderdetails}”
    4. reRender the subtable

    thanks anyway.. it helped a lot

    1. Márcio Martins says:

      OBS: the step 2 was to be : Create a “f:setPropertyActionListener” 🙂

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.