JSF: h:dataTable vs h:panelGrid

Question

In JSF, h:dataTable and h:panelGrid both create html table-tags.

What is the difference between both?

When to use one or the other?

Answer 1

As it names indicates h:dataTable is used mostly for displaying a table containing data from some of the models in your application. Here is an usage example.

<h:dataTable value="#{dataTableBean.items}" var="item">
    <h:column>
        <f:facet name="header" >
            <h:outputText value="Item Category"/>
        </f:facet>    
        <h:outputText value="#{item.category}"/>
    </h:column>
</h:dataTable>

The h:panelGrid is used mostly for layout and placing of elements purpose. Here is an usage example.

<h:panelGrid id="panel" columns="2" border="1">
    <h:outputText value="First Name:" />
    <h:inputText id="first" value="#{backingBean.user.firstName}" />
    <h:outputText value="Last Name:" />
    <h:inputText id="last" value="#{backingBean.user.lastName}" />
</h:panelGrid>