How to align headers on Vuetify v-data-table
I didn't want to have to set a fixed width, so as an example of how to fix this with CSS:
.v-data-table-header th {
white-space: nowrap;
}
Credit this comment.
This is usually caused by the inclusion of the sortable
icon (sortable
is on by default), possibly in conjunction with not setting a width
. Each are properties that can be set in, your case, header_data
.
You could:
- Remove sorting where it isn't needed with
sortable: false
inheader_data
- Add a fixed
width
inheader_data
where appropriate - Utilize the
header
orheader.<name>
slots (e.g. to wrap the text and icon in a div and use some of the built-in CSS flexbox related classes) - Create some custom CSS
The first two options are easiest, provided you're content with the constraints they provide. The custom slot option, i.e. header.<name>
(see the docs in the slots section of the API) is pretty easy to implement, even on a cell by cell basis.