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 in header_data
• Add a fixed width in header_data where appropriate
• Utilize the header or header.<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.