how to create table with different types of rows with jsf, icefaces, java and html

Explanation
Imaging you have table with complex data. Every row is responsible for different type.
For example, subtotals, totals, remarks...
We all know 'dataTable' component. Its about show some table with some data. Most programmers found the 'h:dataTable' component hard to customize, difficult to understand and to maintain
Especially in this case, its difficult and even if you will succeed, it difficult to maintain.
There are a lot of 'custom' or 'extended' implementations, that lock you to specific vendor or library.
We need more flexibility and simplicity. Adding new type should me simple and quick.

New to Java, JSF, Icefaces? Here is some links to start with:
Why and when use ICEFACES?
First steps with jsf and java

We use simplest HTML tags, together with "ui:repeat" tag, which loops on 'tr' element.
Then, we use ui:fragment tag, different for each type. Its like big 'switch' statement
fragment from TableWithDifferentTypesOfRows.jspx

	<table> 
		<caption>table with different types of rows</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
		</tr> 
		<ui:repeat value="#{tableWithDifferentTypesOfRowsBean.rows}" var="row"> 
			<ui:fragment rendered="#{row.class.simpleName == 'ManWithPhone'}"> 
			<tr> 
				<td><ice:outputText value="#{row.name}" /></td> 
				<td><ice:outputText value="#{row.phone}" /></td> 
			</tr> 
			</ui:fragment> 
			<ui:fragment rendered="#{row.class.simpleName == 'String'}"> 
			<tr> 
				<td colspan="2"><ice:outputText value="#{row}" /></td> 
			</tr> 
			</ui:fragment> 
		</ui:repeat> 
	</table> 

This is main entry point. Its referenced by 'tableWithDifferentTypesOfRowsBean' from faces-config.xml
com.gpost.jsfexamples.tableWithDifferentTypesOfRows.TableWithDifferentTypesOfRowsBean

package com.gpost.jsfexamples.tableWithDifferentTypesOfRows;

import java.util.ArrayList;
import java.util.List;

import com.gpost.jsfexamples.tableWithDeleteOnClick.ManWithPhone;

/*
* Java class for example 'table with different types of rows'
* referenced as 'tableWithDifferentTypesOfRowsBean' from faces-config.xml, 
* used in 'TableWithDifferentTypesOfRows.jspx'
*/
public class TableWithDifferentTypesOfRowsBean{
	List<Object> rows = null;
	
	public List<Object> getRows() {
		if (rows == null) {
			rows = new ArrayList();
			// create same sample data...
			rows.add(new ManWithPhone("Gary", "1234-6767"));
			rows.add("recently changed");
			rows.add("iphone fun");
			rows.add(new ManWithPhone("Bob", "5678-4553"));
			rows.add(new ManWithPhone("John", "5698-4333"));
		}
		return rows;
	}
} // end of class

This class defines data in row.
com.gpost.jsfexamples.tableWithDifferentTypesOfRows.ManWithPhone

package com.gpost.jsfexamples.tableWithDifferentTypesOfRows;

public class ManWithPhone {
	public ManWithPhone(String name, String phone) {
		super();
		this.name = name;
		this.phone = phone;
	}

	String name;
	
	String phone;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}
}

part of faces-config.xml

<managed-bean>
 <managed-bean-name>tableWithDifferentTypesOfRowsBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithDifferentTypesOfRows.TableWithDifferentTypesOfRowsBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>

</managed-bean>

conclusion
As we saw in this example, you can create perfect table with different types of rows using simple html/css, then add some binding to your java beans and you get very flexible, easily customizable data table without complexity of 'h:dataTable' component.