How to Align Header column with content column in table ?

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.

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

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

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?

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

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.

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.

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

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.

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 .