Vuetify - wrap header text on v-data-table

Question

I am trying hard to get the header text wrapped on a v-data-table component. I tried applying a style to the component - any style that I apply to the tbody elements within the table are being applied. However, I could not get any custom style working for the header (thead element). Please help.

For example, if I have a header such this, how do I wrap it?

{ text: Calories - Very Long Column Name Here which needs to be wrapped to the next line, value: 'calories' , align: 'center',}

Please see this code pen link

Thanks, Vilas

You can add class property on your header object (inside headers array), class is then applied to header. Docs says you can also add width, but seems like it's not working? — Traxo

sunwarri0r sunwarri0r · Accepted Answer · 2019-02-07T11:03:11

You can control width in the headers props. It is an array of objects that each describe a header column. See the example below for a definition of all properties.

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}

But there is a bug, which will hopefully be fixed in the next version, so it doesn't work under all circumstances, especially not if you are using it inside a v-flex.

Also percantage (width: '100%') works better than e.g. width: '300px', at least for me.

Vuetify - wrap header text on v-data-table

1 Answers