Put ellipsis ... on v-data-table

Question

I have a v-data-table with 5 columns, which some have predefined widths, and some don't. I'd like only one line of text maximum for each item and display "..." when the text exceeds 1 line.

<v-data-table
   dark
   :footer-props="{ 'items-per-page-options': [10, 25, -1] }"
   dense
   calculate-widths
   fixed-header
   height="498"
   :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>
    <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>

    <template #item.title2="{ item }">
      <a
         target="_blank"
         v-if="item.file != ''"
         class="links1"
         :href="item.file"
      >
        <span style="color:white"> {{ item.title }} </span>
      </a>
    </template>
  </v-data-table>

I looked through the CSS properties to do so and I found things like :

text-overflow: ellipsis;
white-space: nowrap; But it doesn't add the ... at the end of the lines and it also takes place beyond the widths applied to each columns so not all 5 columns are displayed on my panel.

Here's the headers in the data section

headers: [
    { text: "Source", value: "dataSource", width: "120px", class:"source-field"},
    { text: "News", value: "title2", width: "214px", class:"news-field"},
    { text: "Actors", value: "concernedActors", width: "242px" },
    { text: "Video", value: "video", width: "58px" },
    { text: "Publication", value: "publicationDate", width: "80px" },
  ],

And I tried this css but it won't work, the column news just goes bigger so that the entire text fits on 1 line.

th.news-field{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}

I would also love to make the hover darker on each line in the table

In addition to `text-overflow: ellipsis` and `white-space: nowrap` I believe you need to add `max-width` and `overflow: hidden` properties — yoduh, Sep 14 '22 at 14:37
Thank you ;) Although, I can't actually tell which column has which width because it's a vuetify component. I can't specify each width for each column except in the header (I don't know if that makes sense...) — Quentin, Sep 14 '22 at 14:51
Could you create a *runnable* [mcve] (on codesandbox.io or similar), with dummy data of similar length to what you have, where a solution could be tested? — tao, Sep 14 '22 at 17:56

tao · Accepted Answer · 2022-09-14T18:40:09.517

Here's a solution:

<template #item.foo="{ item }">
   <div class="ellipsis-wrapper">{{ item.foo }}</div>
</template>

#your-table td {
  position: relative;
}
#your-table td .ellipsis-wrapper {
  position: absolute;
  max-width: calc(100% - 1rem);
  line-height: calc(3rem - 1px); /* change this if needed */
  top: 0;
  left: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

But it creates another problem (easier to solve, IMHO): it takes the cell content out of the flow, therefore the table no longer calculates column width based on cells content (from the table's perspective, that column has no content) - so it relies on its header content (or on the provided width) to calculate the column width.

However, I believe making an "empty" column have a particular width (or a proportion from the table's width) is an easier to solve problem than your current one.

Demo: https://codepen.io/andrei-gheorghiu/pen/wvjoQXR

Put ellipsis ... on v-data-table

1 Answers1