Reduce or increase v-data-table columns sizes

Viewed 23

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.

This is what my table looks like

0 Answers
Related