Hierarchy table

index

<zk>
  <window xmlns="http://www.zkoss.org/2005/zul" 
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
          xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul.xsd " 
          apply="pkg$.FamilyController">
          <include id="familiesTable" src="familyTable.zul" families="${$composer.families}"/>
  </window>
</zk>

controller

import java.util.ArrayList;

import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Include;

public class FamilyController extends GenericForwardComposer {
	ArrayList<Family> families;
	Include familiesTable;

	public FamilyController() {

	}

	public ArrayList<Family> getFamilies() {
		System.out.println("Get families");
		if(families == null){
			System.out.println("Families list created");
			families = new ArrayList<Family>();	
			ArrayList<FamilyMember> members;

			members = new ArrayList<FamilyMember>();
			members.add(new FamilyMember("Floare", "Female", new Integer(43)));
			members.add(new FamilyMember("Attila", "Male", new Integer(23)));
			members.add(new FamilyMember("Otto", "Male", new Integer(23)));
			families.add(new Family("Aknai", members));


			families.add(new Family("Jonson"));

			members = new ArrayList<FamilyMember>();
			members.add(new FamilyMember("Marge", "Female", new Integer(44)));
			members.add(new FamilyMember("Homer", "Male", new Integer(45)));
			members.add(new FamilyMember("Bart", "Male", new Integer(12)));
			members.add(new FamilyMember("Lisa", "Female", new Integer(11)));
			families.add(new Family("Simpson", members));
		}
		return families;
	}

	public void setFamilies(ArrayList<Family> families) {
		this.families = families;
	}

	public void changeExpanded(Family fam){
		System.out.println("change expanded");
		fam.setExpanded(!fam.isExpanded());
		familiesTable.invalidate();
	}
}


import java.util.ArrayList;

public class Family {
	String familyName;
	boolean expanded = false;
	ArrayList<FamilyMember> members = new ArrayList<FamilyMember>();

	public Family(String familyName, ArrayList<FamilyMember> members) {
		this.familyName = familyName;
		if(members != null) this.members = members;
	}
	public Family(String familyName) {
		this(familyName, null);
	}
	public String getFamilyName() {
		return familyName;
	}
	public void setFamilyName(String familyName) {
		this.familyName = familyName;
	}
	public boolean isExpanded() {
		return expanded;
	}
	public void setExpanded(boolean expanded) {
		this.expanded = expanded;
	}
	public ArrayList<FamilyMember> getMembers() {
		return members;
	}
	public void setMembers(ArrayList<FamilyMember> members) {
		this.members = members;
	}
	public int getCount(){
		return members.size();
	}
}

familyTable and detail

<grid xmlns="http://www.zkoss.org/2005/zul" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul.xsd" 
	apply="pkg$.FamilyController"
	oddRowSclass="non-odd">
	<columns>
		<column label="" width="50px"/>
		<column label="Family name"/>
		<column label="Family members count"/>
	</columns>
	<rows>
		<zk forEach="${families}">
			<row sclass='${forEachStatus.index % 2 != 0 ? "z-grid-odd" : ""}'>
				<custom-attributes family="${each}"/>
				<cell rowspan="${each.expanded && each.count != 0 ? 2 : 1}">
					<button if="${family.count != 0}" onClick="$composer.changeExpanded(family)" label='${family.expanded ? "-" : "+"}'/>
				</cell>
				<cell>
					<label value="${family.familyName}"/>
				</cell>
				<cell>
					<label value="${family.count}"/>
				</cell>
			</row>
			<row if="${each.expanded && each.count != 0}" sclass='${forEachStatus.index % 2 != 0 ? "z-grid-odd" : ""}'>
				<cell colspan="2">
					<include src="familyDetail.zul" family="${each}"/>
				</cell>
			</row>
		</zk>
	</rows>
</grid>


<grid xmlns="http://www.zkoss.org/2005/zul" 
	  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	  xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul.xsd ">
	<columns>
		<column label="Name"/>
		<column label="Gender"/>
		<column label="Age"/>
	</columns>
	<rows>
		<row forEach="${family.members}">
			<custom-attributes member="${each}"/>
			<cell>
				<label value="${member.name}"/>
			</cell>
			<cell>
				<label value="${member.gender}"/>
			</cell>
			<cell>
				<label value="${member.age}"/>
			</cell>
		</row>
	</rows>
</grid>