Tying to style Vuetify data table so that sorting arrows are always on the same line as header - not under?

Question

In the Vuetify data table, when the header is long, the sorting arrows appear under the header. I am trying to get the sorting arrows in the header to always appear on the same line as the header.

Here is my data table:

<v-data-table
      :headers="headers"[![enter image description here][2]][2]
      :items="truncatedRows"
      :items-per-page="5"
      class="elevation-1"
 ></v-data-table>

What I'm getting:

What I'd like no matter the length of the headers:

Answer 1

.v-data-table-header th {
  white-space: nowrap;
}

https://github.com/vuetifyjs/vuetify/issues/10164

Answer 2

In the headers Array item's object, you can add a width value, e.g width: 6rem.

You could also add another key/value pair here to add a custom CSS class via class: 'my-header-name'. This would allow you to further customize the display, such as using display: flex; align-items: center which works kind of nicely depending upon your expectations.

Utilizing and experimenting with these methods, you should be able to get close to what you are looking for.