Tying to style Vuetify data table so that sorting arrows are always on the same line as header - not under?
.v-data-table-header th { white-space: nowrap;}
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.