JSF portlet example using datatable

This is also a good feature of JSF in which we are using datatable tag of JSF html tab library. You can find this tag on Palette portion. For implementing into webpage, you just need to drag this from palette and drop this in cursor position of webpage.

You will get the default code in webpage and there is no need to provide loop for table items. This tag manages all the list items according to the prototype provided by us.
Only one thing you need to keep in mind the value field in datatable tag which makes a call for perInfoAll method from syncExLoginManagedBean and the var field is the name of the table through which we can fetch the table items.
In datatable tag, facet tag provides the header of table and outputText provides the text value in data table.

<hx:dataTableEx border="0" cellpadding="2" cellspacing="0"
columnClasses="columnClass1" headerClass="headerClass"
footerClass="footerClass" rowClasses="rowClass1, rowClass2"
id="tableEx1" styleClass="dataTableEx" value="#{syncExLoginManagedBean.perInfoAll}" var="item">

<f:facet name="header">
<h:outputText value="This is 'SyncEx data Table' demo" />
</f:facet>
               
<hx:columnEx id="columnEx1">
<f:facet name="header">
<h:outputText id="text1" styleClass="outputText" value="ID"></h:outputText>
</f:facet>
<h:outputText value="#{item.id}"></h:outputText>
</hx:columnEx>
               
<hx:columnEx id="columnEx2">
<f:facet name="header">
<h:outputText id="text2" styleClass="outputText" value="Name"></h:outputText>
</f:facet>
<h:outputText value="#{item.name}"></h:outputText>
</hx:columnEx>
               
<hx:columnEx id="columnEx3">
<f:facet name="header">
<h:outputText id="text3" styleClass="outputText" value="Phone"></h:outputText>
</f:facet>
<h:outputText value="#{item.phone}"></h:outputText>
</hx:columnEx>
               
<hx:columnEx id="columnEx4">
<f:facet name="header">
<h:outputText id="text4" styleClass="outputText" value="City"></h:outputText>
</f:facet>
<h:outputText value="#{item.city}"></h:outputText>
</hx:columnEx>
               
<f:facet name="footer">
 <h:outputText value="The End" />
</f:facet>
</hx:dataTableEx>