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>

Answer 2

You should use a panelGrid when you know the number of rows and columns that you want to display, you have to define all the child components yourself (manually, the panelGrid will not add any rows/collumns by itself) and the panelGrid will arrange them. DataGrid on the other hand is used when you have a data structure (like a collection) with an indetermined size, then you just have to specify the columns you want to print and the dataGrid will iterate over that collection creating a row for each entry.

Answer 3

The dataTable is a model-driven data output component. For every row in your model, the component can set the state of its children for every phase of the JSF lifecycle. This behaviour is beneficial or detrimental depending on what you're trying to achieve.

By contrast, the panelGrid is just a layout control.

The difference is (very) roughly analogous to the difference between JTable and JPanel.