How to Align Header column with content column in table ?

Vaadin 6 / 7 / 8 Framework UI
1

Hi Friends,

I am trying to align columns(content columns and header columns) in a table.
But my header column is not in same position with content column position.
I am not getting Please Help me.

Thanks in advance.

2

Hi,

could you please post a bit of your code or a screenshot of what exactly is your problem? In general you can do the following to align columns and their headers:

yourTable.setColumnAlignment("yourPropertyId", Table.ALIGN_CENTER);

There are values for left, right and center alignment.

-tepi

3

Actually i am fetching content of table from database and i am displaying the header of table with the help of addContainerProperty.

table.addContainerProperty(“full name”, String.class, null);-----displaying header

datalist = mymethod();-----this method fetch the data from database

for( string abc : datalist){
table.additem(abc);—displying data in table
}

but columns of header and content columns is not align both are diffrent

4

Oh, I misunderstood you the first time, sorry about that. This misalignment of header and row columns should definitely not happen. If it does, it’s most likely a vaadin bug. Could you still answer a few questions:

  • Does this happen on multiple browsers or e.g. just IE?
  • Which Vaadin version are you using?
  • Is it a stand-alone Vaadin application or are you running it under a portal environment?
  • Do you have any own theming/styling?
5

Hi everybody, just an “add-on”, because I have (almost) the same problem…

So in fact I have this problem, ONLY on Generated columns with labels. If you have a look at the image attached

You see :
the first column : raw data, using default alignment
second column (customer_name) : raw data, but centered : Ok
third column : a generated column (used to format a date, so cobnerted to a label), normally ‘centered’. But as you can see. Only the header is centered, the column remains left aligned…
12744.png

6

Hi,

I think what you’re seeing is a separate issue. The reason for your issue is most likely that Labels are by default 100% wide, so they take up the whole column width → column alignment does not help.

Try calling setSizeUndefined() for your Labels when you generate them. This should fix your issue.

7

Another thing (for performance). If you’re just showing basic labels in your generated column, you should just return the formatted String directly from your ColumnGenerator’s generateCell -method. This way you avoid the whole Label width issue and also the content will be lighter.

Another way to do this is to overwrite the
formatPropertyValue(Object rowId, Object colId, Property<?> property)
 method of the Table and do your formatting there; just remember to check for the correct column ID.

8

Thanks…for reply…i have solved this issues with the help of css layout.

9

Hi, I faced the same problem, I managed it with pure css, just added this to my css file:

.v-table-table .v-table-cell-content{
padding: 0 5px !important;
}

maybe this isnt universal solution for all vaadin versions, but for me it fits very nice.

10

Vladimir Tekel:
Hi, I faced the same problem, I managed it with pure css, just added this to my css file:

.v-table-table .v-table-cell-content{
padding: 0 5px !important;
}

maybe this isnt universal solution for all vaadin versions, but for me it fits very nice.

this works for me .