I have a v-data-table with 5 columns. What I'd like is columns whose widths can increase and decrease as the users want. To maybe have arrows on the top of the columns to change the widths manually. Does anyone know if it's possible ?
Here's what my v-data-table looks like.
<v-data-table
dark
:footer-props="{ 'items-per-page-options': [10, 25, -1] }"
dense
calculate-widths
fixed-header
height="490"
:headers="headers"
hide-default-header
:items="res"
sort-by="publicationDate"
:sortDesc="sortVal"
>
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th v-for="h in headers" :class="h.class"
:key="h.text"
>
<span>{{h.text}}</span>
</th>
</tr>
</thead>
</template>
<!-- VIDEO column -->
<template #item.video="{ item }">
<a
target="_blank"
v-if="item.video != ''"
class="links1 video-icon"
:href="item.video"
>
<v-btn dark icon>
<v-icon class="ic1">
mdi-movie
</v-icon>
</v-btn>
</a>
</template>
<!-- ACTORS column -->
<template #item.concernedActors="{ item }">
<div class="actors-column ellipsis">
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white">
{{ item.concernedActors }}
</span>
</a>
</div>
</template>
<!-- NEWS column -->
<template #item.title2="{ item }">
<div class="news-column ellipsis">
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white">
{{ item.title }}
</span>
</a>
</div>
</template>
<!-- SOURCE column -->
<template #item.dataSource="{ item }">
<div class="source-column ellipsis">
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white">
{{ item.dataSource }}
</span>
</a>
</div>
</template>
I really don't know (and don't care) how that would look I'm not a graphist but does anyone have a lead on this ? It would be way appreciated.
