<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
	<f:subview id="DataTableID">
		<h:form>
			
				<rich:dataTable id="dataTableID" var="dataTableID"
					value="#{dataTable.mounths}" rowKeyVar="key" styleClass="table"
					captionClass="caption" rowClasses="rowa,rowb,rowc rowcc"
					headerClass="header" footerClass="footer"
					onRowClick="alert('row #{key}')" rendered="#{dataTable.rendered}" align="#{dataTable.align}" bgcolor="#{dataTable.bgcolor}"
					border="#{dataTable.border}" columnsWidth="#{dataTable.columnsWidth}" width="#{dataTable.width}" title="DataTableTite">
					<f:facet name="caption">
						<h:outputText value="caption" />
					</f:facet>
					<f:facet name="header">
						<rich:columnGroup columnClasses="cola, colb ,rowc rowcc">
							<rich:column rowspan="2" rendered="#{dataTable.r2rendered}">
								<h:outputText value="2-row head" />
							</rich:column>
							<h:column rendered="#{dataTable.r2rendered}">
								<h:outputText value="head in UIColumn" />
							</h:column>
							<rich:column breakBefore="true">
								<h:outputText value="2-d row head" />
							</rich:column>
						</rich:columnGroup>
					</f:facet>
					<f:facet name="footer">
						<h:outputText value="table foot" />
					</f:facet>
					<rich:columnGroup>
						<rich:column id="mounth" styleClass="column" rowspan="2"
							headerClass="cheader" footerClass="cfooter">
							<f:facet name="header">
								<h:outputText value="mounth" />
							</f:facet>
							<f:facet name="footer">
								<h:outputText value="-//-" />
							</f:facet>
							<h:outputText value="#{dataTableID.mounth}" />
						</rich:column>
						<rich:column styleClass="column" headerClass="cheader"
							footerClass="cfooter" rendered="#{dataTable.r2rendered}">
							<f:facet name="header">
								<h:outputText value="mounth" />
							</f:facet>
							<f:facet name="footer">
								<h:outputText value="-//-" />
							</f:facet>
							<h:outputText value="#{dataTableID.town}" />
						</rich:column>
					</rich:columnGroup>
					<rich:column styleClass="column" headerClass="cheader"
						footerClass="cfooter" rendered="#{dataTable.r2rendered}">
						<h:outputText value="#{dataTableID.day}" />
					</rich:column>
					<rich:subTable id="detail" var="detail" value="#{dataTableID.detail}">
						<rich:column id="name">
							<h:outputText value="#{detail.name}" />
						</rich:column>
						<rich:column id="qty" rendered="#{dataTable.r2rendered}">
							<h:outputText value="#{detail.qty}" />
						</rich:column>
					</rich:subTable>
					<rich:column id="total" styleClass="total" colspan="2">
						<h:outputText value="#{dataTableID.total}" />
					</rich:column>
				</rich:dataTable>

				<h:panelGrid columns="2">
					<h:outputText value="Align:"></h:outputText>
					<h:selectOneMenu value="#{dataTable.align}">
						<f:selectItem itemLabel="center" itemValue="*center" />
						<f:selectItem itemLabel="left" itemValue="*left" />
						<f:selectItem itemLabel="right " itemValue="*right" />
						<a4j:support event="onclick" reRender="dataTableID"></a4j:support>
					</h:selectOneMenu>
								
					<h:outputText value="Border: "></h:outputText>
					<h:inputText value="#{dataTable.border}">
						<a4j:support event="onchange" reRender="dataTableID"></a4j:support>
					</h:inputText>

					<h:outputText value="Columns Width: "></h:outputText>
					<h:inputText value="#{dataTable.columnsWidth}">
						<a4j:support event="onchange" reRender="dataTableID"></a4j:support>
					</h:inputText>

					<h:outputText value="Width: "></h:outputText>
					<h:inputText value="#{dataTable.width}">
						<a4j:support event="onchange" reRender="dataTableID"></a4j:support>
					</h:inputText>

					<h:outputText value="Background Colour"></h:outputText>
					<h:selectOneMenu value="#{dataTable.bgcolor}">
						<f:selectItem itemLabel="aqua" itemValue="aqua" />
						<f:selectItem itemLabel="blue" itemValue="blue" />
						<f:selectItem itemLabel="fuchsia" itemValue="fuchsia" />
						<f:selectItem itemLabel="gray" itemValue="gray" />
						<f:selectItem itemLabel="lime" itemValue="lime" />
						<f:selectItem itemLabel="maroon" itemValue="maroon" />
						<f:selectItem itemLabel="purple" itemValue="purple" />
						<f:selectItem itemLabel="red" itemValue="red" />
						<f:selectItem itemLabel="silver" itemValue="silver" />
						<f:selectItem itemLabel="teal" itemValue="teal" />
						<f:selectItem itemLabel="yellow" itemValue="yellow" />
						<f:selectItem itemLabel="white" itemValue="white" />
						<a4j:support event="onclick" reRender="dataTableID"></a4j:support>
					</h:selectOneMenu>

					<h:outputText value="rendered:" />
					<h:selectBooleanCheckbox value="#{dataTable.rendered}"
						onclick="submit();" />

					<h:outputText value=" row 2 rendered" />
					<h:selectBooleanCheckbox value="#{dataTable.r2rendered}"
						onclick="submit();" />
				</h:panelGrid>
			
		</h:form>
	</f:subview>

