How to align headers on Vuetify v-data-table

Question

I have a weird problem with my header on my table, some titles are align to the top but others don´t, i tried everything even align: 'left', but it did not work out, here is a picture of my problem

And my code is this:

*Table:

<v-data-table :headers="header_data" :items="finalData" :search="search" u/click:row="showAlert">
                <template v-slot:item.aum="{ item }">
                    {{formatNumber(item.aum)}}
                </template>
            </v-data-table>

And the data for the header:

header_data: [
                { text: 'Name', value: 'fund', align: 'start' },
                { text: 'Ticker', value: 'ticker', align: 'start' },
                { text: 'Asset Class', value: 'assetclass', align: 'start' },
                { text: 'Provider', value: 'issuer', align: 'start' },
                { text: 'Geographic Focus', value: 'region', align: 'start' },
                { text: 'Investment focus', value: 'focus', align: 'start' },
                { text: 'AUM (USD)', value: 'aum', align: 'start' },
            ]

Thanks!

Answer 1

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.

Answer 2

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.