Berikut adalah contoh componen pada zkoss
1. Tree
<hlayout width="100%">
<tree id="tree" width="400px" rows="8">
<treecols sizable="true">
<treecol label="Name" />
<treecol label="Description" />
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 1" />
<treecell label="Item 1 description" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2" />
<treecell label="Item 2 description" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1.1" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.1.2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.2" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.2.1" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="Item 3" />
</treechildren>
</tree>
</hlayout>
2. Tree Live Data
<zk>
<zscript>
import org.zkoss.zksandbox.tree.BinaryTreeModel;
BinaryTreeModel btm = new BinaryTreeModel(new ArrayList(new org.zkoss.zksandbox.BigList(1000)));
</zscript>
<tree id="tree" model="${btm}" vflex="1"/>
</zk>
3. Auxiliary Headers
<grid>
<auxhead>
<auxheader label="H1'07" colspan="6"/>
<auxheader label="H2'07" colspan="6"/>
</auxhead>
<auxhead>
<auxheader label="Q1" colspan="3"/>
<auxheader label="Q2" colspan="3"/>
<auxheader label="Q3" colspan="3"/>
<auxheader label="Q4" colspan="3"/>
</auxhead>
<columns>
<column label="Jan"/><column label="Feb"/><column label="Mar"/>
<column label="Apr"/><column label="May"/><column label="Jun"/>
<column label="Jul"/><column label="Aug"/><column label="Sep"/>
<column label="Oct"/><column label="Nov"/><column label="Dec"/>
</columns>
<rows>
<row>
<label value="1,000"/><label value="1,100"/><label value="1,200"/>
<label value="1,300"/><label value="1,400"/><label value="1,500"/>
<label value="1,600"/><label value="1,700"/><label value="1,800"/>
<label value="1,900"/><label value="2,000"/><label value="2,100"/>
</row>
<row>
<label value="1,500"/><label value="2,100"/><label value="1,200"/>
<label value="1,100"/><label value="2,400"/><label value="1,700"/>
<label value="1,500"/><label value="3,700"/><label value="1,800"/>
<label value="1,300"/><label value="2,000"/><label value="2,500"/>
</row>
</rows>
</grid>
Reference : https://www.zkoss.org/zksandbox/#g2