Question

I have 13 columns in a table. When I display it in a <h:dataTable>, then it expands to a very wide area on the page.

Is there any way to minimize their width or to display some columns above and some columns below?

Answer 1

You can use h:dataTable‘s columnClasses attribute to set width of columns.

From the Java EE tutorial:

If columnClasses or rowClasses
specifies more than one style, the
styles are applied to the columns or
rows in the order that the styles are
listed in the attribute. For example,
if columnClasses specifies styles
list-column-center and
list-column-right and if the table has
two columns, the first column will
have style list-column-center, and the
second column will have style
list-column-right.

You can define styles for different widths and assign these styles to your columns. Here is an example:

<h:dataTable id="items"
    columnClasses="list-column-center, list-column-left,
         list-column-right, list-column-center">
  ...
</h:dataTable>

And in your css file:

.list-column-center{ width: 300px; }
.list-column-left{ width: 100px; }

If you want to display columns in rows you can use for example two datatables in a panelGrid:

<h:panelGrid columns="1">
  <h:dataTable value=#{myBean.myTable} var="item">
    <h:column>#{item.column1}</h:column>
    ...
  </h:dataTable>
  <h:dataTable value=#{myBean.myTable} var="item">
    <h:column>#{item.column2}</h:column>
    ...
  </h:dataTable>
</h:panelGrid>