Line Breaks in Table Header

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.
grafik
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.
grafik
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;:
Screenshot 2020-05-25 at 10.02.09

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