I'm trying to restrict the width of the Video title column in my headers by using the width: '30%' property. However, despite setting this value, the column width still exceeds the specified percentage. I also attempted using maxWidth: '30%', but unfortunately, it didn't solve the problem. Any suggestions on how I can achieve this?
<v-data-table
:loading="loading"
:headers="headers"
:items="rankedItems"
:server-items-length="itemCount"
:disable-sort="true"
:hide-default-footer="true"
class="elevation-1"
>
<template #item.rank="{ item }">
#{{ item.rank }}
</template>
<template #item.user="{ item }">
<user-chip
:uid="item.uid"
:nickname="item.name"
:avatar-url="item.avatar"
/>
</template>
<template #item.value="{ item }">
{{ $n(item.value) }}
</template>
<template #item.gv="{ item }">
{{ $n(item.gv) }}
</template>
<template #item.title="{ item }">
<v-chip
:to="{ name: 'videoPlay', params: { id: item.vid } }"
target="_blank"
outlined
label
>
{{ item.title }}
</v-chip>
</template>
</v-data-table>
computed: {
headers () {
return [
{ text: '', value: 'rank', width: '20%' },
{ text: 'Name', value: 'user', width: '30%' },
{ text: 'Video title', value: 'title', width: '30%' },
{ text: 'value', value: 'gv', width: '20%' },
]
},
},