Berikut adalah contoh componen pada zkoss
4. Grid with grouping
<zk>
<zscript>
import org.zkoss.zksandbox.*;
Comparator asc = new RowLabelComparator(true),
dsc = new RowLabelComparator(false);
</zscript>
<grid>
<columns sizable="true">
<column label="Brand" sortAscending="${asc}" sortDescending="${dsc}" hflex="2"/>
<column label="Processor Type" hflex="1"/>
<column label="Memory (RAM)" hflex="1"/>
<column label="Price" hflex="1"/>
<column label="Hard Drive Capacity" hflex="1"/>
</columns>
<rows>
<group label="Dell"/>
<row>
<label style="padding-left:15px" value="Dell E4500 2.2GHz"/>
<label value="Intel Core 2 Duo"/>
<label value="2GB RAM"/>
<label value="$261.00" style="color:green"/>
<label value="500GB"/>
</row>
<row>
<label style="padding-left:15px" value="XP-Pro Slim Dell-Inspiron-530-s"/>
<label value="Intel Core 2 Duo"/>
<label value="2GB RAM"/>
<label value="$498.93" style="color:green"/>
<label value="500GB"/>
</row>
<row>
<label style="padding-left:15px" value="Dell P4 3.2 GHz"/>
<label value="Intel Pentium 4"/>
<label value="4GB RAM"/>
<label value="$377.99" style="color:green"/>
<label value="500GB"/>
</row>
<group label="Compaq"/>
<row>
<label style="padding-left:15px" value="Compaq SR5113WM"/>
<label value="Intel Core Duo"/>
<label value="1GB RAM"/>
<label value="$279.00" style="color:green"/>
<label value="160GB"/>
</row>
<row>
<label style="padding-left:15px" value="Compaq HP XW4200"/>
<label value="Intel Pentium 4"/>
<label value="4GB RAM"/>
<label value="$980" style="color:green"/>
<label value="500GB"/>
</row>
<groupfoot spans="5">
<label value="This a summary about Compaq Desktop PCs"/>
</groupfoot>
</rows>
</grid>
</zk>
5. Grid Live Grouping
<zk>
<zscript>
import org.zkoss.zksandbox.*;
LiveGroupRenderer renderer = new LiveGroupRenderer();
</zscript>
<zscript>
String[][][] datas = new String[][][]{
new String[][] {
// Today
new String[]{"1","[zk1 - Help] RE: Bandbox Autocomplete Problem","2008/11/18 10:16:27","16KB"},
new String[]{"2","[zk1 - Help] RE: Bandbox Autocomplete Problem","2008/11/18 10:14:27","18KB"},
new String[]{"3","[zk1 - Help] RE: Databinding with radiogroups","2008/11/18 09:47:27","12KB"},
new String[]{"4","[zk1 - Help] RE: It's not possible to navigate a listbox' ite","2008/11/18 09:35:27","12KB"},
new String[]{"5","[zk1 - Help] RE: ZK problem in dynamic menu","2008/11/18 08:37:27","12KB"},
new String[]{"6","[zk1 - Help] RE: FileUpload","2008/11/18 08:27:57","14KB"},
new String[]{"7","[zk1 - Help] RE: Datebox format","2008/11/18 06:27:31","11KB"},
new String[]{"8","[zk1 - Help] RE: Datebox format","2008/11/18 06:17:22","12KB"},
new String[]{"9","[zk1 - Help] FileUpload","2008/11/18 05:07:25","11KB"},
new String[]{"10","[zk1 - Help] FileUpload","2008/11/18 05:07:25","11KB"},
new String[]{"11","[zk1 - Help] FileUpload","2008/11/18 05:07:25","11KB"},
new String[]{"12","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},
new String[]{"13","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},
new String[]{"14","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},
new String[]{"15","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},
new String[]{"16","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/18 04:31:12","14KB"},
},
new String[][] {
// Yesterday
new String[]{"1","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 19:44:17","39KB"},
new String[]{"2","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 19:42:17","35KB"},
new String[]{"3","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 19:40:17","26KB"},
new String[]{"4","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 18:14:17","27KB"},
new String[]{"5","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 17:05:17","18KB"},
new String[]{"6","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 16:44:17","19KB"},
new String[]{"7","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},
new String[]{"8","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},
new String[]{"9","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},
new String[]{"10","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},
new String[]{"11","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 13:26:37","14KB"},
new String[]{"12","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 13:26:37","14KB"},
new String[]{"13","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 13:26:37","14KB"},
new String[]{"14","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 10:41:33","14KB"},
new String[]{"15","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 10:14:27","14KB"},
},
new String[][] {
new String[]{"1","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/15 04:31:12","14KB"},
new String[]{"2","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/15 04:31:12","14KB"},
new String[]{"3","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/15 04:31:12","14KB"},
new String[]{"4","[zk1 - Help] RE: Times_Series Chart help","2008/11/15 03:26:37","14KB"},
new String[]{"5","[zk1 - Help] RE: Times_Series Chart help","2008/11/15 03:26:37","14KB"},
new String[]{"6","[zk1 - Help] RE: Times_Series Chart help","2008/11/15 03:26:37","14KB"},
new String[]{"7","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 12:41:33","14KB"},
new String[]{"8","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 02:41:33","14KB"},
new String[]{"9","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 02:41:33","14KB"},
new String[]{"10","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 02:41:33","14KB"},
new String[]{"11","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},
new String[]{"12","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},
new String[]{"13","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},
new String[]{"14","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},
}
};
GroupsModel model = new SimpleGroupsModel(datas,new String[]{"Date: Today", "Date: Yesterday", "Date: Last Week"});
</zscript>
<grid id="lb1" vflex="1" model="${model}" rowRenderer="${renderer}">
<columns sizable="true">
<column width="80px" label="From"/>
<column label="Subject"/>
<column width="150px" label="Received"/>
<column width="50px" label="Size"/>
</columns>
</grid>
</zk>
6. Grid with Paging
<zk>
Paging can be supported to locate at three position: Top, Bottom, and Both.
<radiogroup
onCheck="grid.pagingPosition = self.selectedItem.label;">
<radio label="top" />
<radio label="bottom" checked="true" />
<radio label="both" />
</radiogroup>
<separator/>
<button label="Change Paging Mold">
<attribute name="onClick">
grid.pagingChild.mold = "os".equals(grid.pagingChild.mold) ? "default" : "os";
</attribute>
</button>
<grid id="grid" mold="paging" pageSize="5">
<columns>
<column label="Index"/>
<column label="Head 1"/>
<column label="Head 2" align="center"/>
<column label="Head 3" align="right"/>
</columns>
<rows>
<row>
1
<listbox mold="select">
<listitem label="AB"/>
<listitem label="CD"/>
</listbox>
<datebox/>
<textbox rows="3"/>
</row>
<row>
2
<label value="A11"/>
<label value="A12"/>
<label value="A13"/>
</row>
<row>
3
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup>
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/>
</radiogroup>
</row>
<row>
4
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup orient="vertical">
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/>
</radiogroup>
</row>
<row>
5
<listbox mold="select">
<listitem label="AB"/>
<listitem label="CD"/>
</listbox>
<datebox/>
<textbox rows="3"/>
</row>
<row>
6
<label value="A11"/>
<label value="A12"/>
<label value="A13"/>
</row>
<row>
7
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup>
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/>
</radiogroup>
</row>
<row>
8
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup orient="vertical">
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/>
</radiogroup>
</row>
</rows>
</grid>
</zk>
Reference : https://www.zkoss.org/zksandbox/#g2