Solution 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.

Solution 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.

Problem :

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

enter image description here

And my code is this:


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

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' },



Comment posted by DeathInWhite

It Worked!, i just put a width prop on one of the headers, thanks