Table Header Alignment dependant of column Alignment

Vaadin 6 / 7 / 8 Framework UI
1

Hi

I can see that when I set the alignment of one property to right, for example (using table.setColumnAlignment(“myProperty”, Table.ALIGN_RIGHT)).
Both the columns content AND the header (column caption) move to the right.

How can I have an header alignment different from the datas below …? is it possible ?

(In fact I would like that all headers stay centered, whatever the columns alignment maybe)…

Thanks !

2

I don’t know how good workaround this is (maybe I get a few angry messages for suggesting this) but you could probably manipulate the header style with css.

doing something like this:

.myTable .v-table-caption-container{
  text-align:center;
}

You probably have to do something else. I suggest you change the alignment first in java and check the difference in the inline css of the header, and redo that in your theme. But be careful, changing some things in the css that you are not supposed to do can’t break quite a lot.

3

We’re not too far…

If I change the style sheet property with text-align : center
All column headers on which I did not define any specific alignment are centered.
But, if I set a column alignment to right, for example, all the column and the header content move to right…

It seems that when we define the column alignment, its text-alignment property is forced or redefined…?

4

Add the following CSS rule on your custom theme’s styles.css file:

.v-table-caption-container {
text-align:center;
}

.v-table-caption-container-align-center {
text-align:center;
}

…this will finally make your table header alignment “independent” of table.setColumnAlignment() calls.

You could also use “.v-table-caption-container-align-left{…}” or “.v-table-caption-container-align-right{…}” for making the headers caption left or right justified respectively.

5

I am using vaadin 18 and I would like that all headers stay centered. I did try as below but no effect achieved.

Any one any idea or solution on this issue?

nameColumn = gridProduct
                .addColumn(Product::name)
                .setSortable(true)
                .setHeader("NAME")
                .setKey("name")
                .setResizable(true).setAutoWidth(true);
        gridProduct.getColumnByKey("name").getElement().getStyle().set("text-align", "center");