Management of retrieved dataTable columns

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?

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>