Creating multirow table headers

Question

I have a table where my column headers are set with the following instruction :

table.setColumnHeader

I wonder how can I create multilevel table headers like on this page?

Answer 1

In Vaadin7 you can set the table header height dynamically by adding following CSS rule to your theme:

  .v-table-header-wrap {
    height: auto;
  }

The only think is that the column separator is not set to 100% of the header row height ...

Answer 2

A look into the TreeTable component may help you : Vaadin sampler

Regards, Éric.

Answer 3

As of Vaadin 6.7.3, this is currently not possible using the stock Vaadin table component.

There is a Trac issue raised for changing this for Vaadin 7. See https://vaadin.com/forum/-/message_boards/view_message/900369 for more details.

Depending on your requirements, you could hide the table component's header and try to simulate the header (by using a HorizontalLayout, generating your own headers and listening to column resize events); alternatively, you could simply generate your own HTML <table></table> and assign it to a label component.

Answer 4

To make a header only of a table use setPageLength(0); this will eliminate the table body and show only the header. Then create another table with a header and your data and combine these 2 in a layout :) It's a cool trick, be sure to match the ratio's of first header with the second's table header.