Hello,
i’m having Trouble with long column-names. In the Screenshot provided you see the column-names which are quite long, so i set the css to white-space: normal; to enable line breaking in the header.
Now there’s the Problem with the lines since they only cover the whole height of the header only when the corresponding text is in two or more lines.
Is there a possibilty to expand it to the full size? Or do you have an other solution to the long column names?
Hi,
Table header isn’t intended to break words. Border is applied to v-table-caption-container which has height related to text inside it.
Regards,
Gleb
Hello Gleb,
thanks for your reply. Do you have a suggestion as to how to deal with my problem:
We have this table with a lot of columns, which have just int values but the headers are pretty long. So we thought it would be best to make the headlines Break so we can display as much information as possible, without loosing track of what’s displayed.
We also thought about tilting the header 90° but that didn’t workout aswell.
Regards,
Paul
Hi,
As an option, you can style headers with text-overflow: ellipsis;:
Alternatively, if you don’t need the grouping functionality, i.e. don’t use GroupTable, I would recommend taking a look at the DataGrid component which has the headerRowHeight attribute that makes it safer to use white-space: normal;.
Regards,
Gleb
Thanks for your suggestions, i will look into it.
Regards,
Paul
Hi
Here running in the same problem. I have set line breaks in column headers containing several words with the following code.
for(Table.Column<?> column : financialMovementsTable.getColumns()) {
String caption = column.getCaption().replaceAll("\\s+","\n");
column.setCaption(caption);
}But it does not work out of the box, so the css rule white-space: normal is needed. If I set it manually using chrome dev tools, it is working (see below for the 2nd column).
Where should I set in the code this rule ? There is no (e.g) Table.Column.Header object to set a style, and I don’t think that table.addStyleName is appropriate.
**
**
Regards
Michael
HI,
Actually, It is. Add a custom stylename to a table and the following implementation should do the trick:
.my-table .v-table-caption-container {
white-space: normal;
}
Regards,
Gleb
Hi Gleb,
Thanks for the tip.
It works actually a bit differently than I was expecting : the line break appears only if the column header is not large enough and not systematically.
That’s fine in most case. But I can remark that for a table with a lot of columns, the algorithm computing columns length seems to provide more space for the first columns than for the last ones.
Look at the group table below, it does not use settings so column widths are always computed automatically.
The second column (a date) seems to have been given sensibly more width space than other columns on the outmost right, other dates specifically. It is visible because it does not wrap its text.
I was more expecting something like below.
Long story short, is there a style that would systematically take the linebreak into acount, in order to have the result of the last picture ?
Regards
Michael
Hi,
In order to give all columns the same amount of space, I’d recommend using the expandRatio attribute. If you set it to 1 for every column, then they will be the same width.
Regards,
Gleb
