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

Answer 1

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.