The JSF framework makes it easy to display tabular data to the user. The HtmlDataTable component abstracts many of the details involved in rendering a data set as HTML. For this reason, it is perhaps the most powerful standard JSF component.
As JSF is based on the Model-View-Controller pattern, it mandates a clear separation of concerns: the data structures and entities of our application are the "Models", the backing beans of our application are the "Controllers", and the UI components and JSF pages that constitute our presentation layer are the "Views".
The HtmlDataTable component is a good example of how JSF implements the MVC pattern. The<h:dataTable> tag renders this component as an HTML table and provides a nice adapter between the presentation and business tiers of our application. The JSF expression language in our JSF page is the glue that binds these two layers together.
The JSF HtmlDataTable component is a very basic data table component. We will see in later chapters a number of more specialized versions of this component included in third-party JSF component libraries that provide more full-featured data grid implementations, enabling advanced features such as column sorting, pagination, drag-and-drop, and more. For now, let's examine the basic functionality of the standard JSF HTML data table component.
The<h:dataTable> tag adopts a column-based approach to define the HTML table structure. This example shows how to render a list of customers as an HTML table using the<h:dataTable> tag.
<h:dataTable value="#{customerBean.customerList}" var="customer" rowClasses="row-even,row-odd" columnClasses="left-aligned,left-aligned,centered, left-aligned" border="2" cellpadding="5" cellspacing="2" rows="8">
<h:column>
<f:facet name="header">
<h:outputText value="Full Name" />
</f:facet>
<h:outputText value="#{customer.fullName}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Birth Date" />
</f:facet>
<h:outputText value="#{customer.birthDate}">
<f:convertDateTime type="date" dateStyle="medium" />
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Phone Number" />
</f:facet>
<h:outputText value="#{customer.phoneNumber}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Country of Origin" />
</f:facet>
<h:outputText value="#{customer.countryOfOrigin.name}" />
</h:column>
</h:dataTable>
