Vuetify Data Table: Ellipsis overflow for specific columns

Question

I have a basic data-table like this:

<v-data-table
  :headers="headers"
  :items="documents"
  :items-per-page="10"
  :loading="loading"
  :search="search"
  :footer-props="footer_props"
  :single-select="true"
  v-model="selected"
  item-key="artifactID"
  class="elevation-1"
  style="width: 100%; align-content: center;"
  height="45vh"
  fixed-header
  show-select
>
  <v-progress-linear 
    slot="progress" 
    color="blue" 
    indeterminate
  />
  <v-alert 
    slot="no-results" 
    :value="true" 
    color="error" 
    icon="warning"
  >
    Your search for "{{ search }}" found no results.
  </v-alert>
</v-data-table>

It has 4 columns, and one more column generated automatically to the left for single-select. I managed to define the width of each column by defining the width of the headers.

I want to make the contents of the cells of specific columns to truncate with ellipsis when the length of the text exceeds the width specified for the header.

It tried to use the item.name slot and a div with defined CSS style, something like this:

<template v-slot:item.rawDataFile.fileName="{ item }">
  <div 
    v-on="on"
    style="white-space: nowrap; width:100%;"
  >
    <span style="display: inline-block; overflow: hidden; text-overflow: ellipsis; width:100%;">
      {{ item.rawDataFile.fileName }}
    </span>
  </div>
</template>

But it didn't work. Instead of truncating, when the text is really long, it instead increases the width of the column, which is exactly the opposite of what I want. And if I specify something like 50%, the width of the column will still be expanded as if the text was not truncated but the text itself will be truncated at 50%, making it look really weird.

Is there a way for me to keep the column width fixed to the width specified for the headers and have the text truncate when exceeding this width instead of going to the next line like how the data table seems to behave by default and if possible, do this only to specific columns?

Answer 1

It should work if you set a max-width the same as the width defined in the headers...

    <template v-slot:item.rawDataFile.fileName="{ item }">
        <div class="text-truncate" style="max-width: 130px;">
           {{ item.rawDataFile.fileName }}
        </div>
    </template>

See the item.address slot template in this example: https://codeply.com/p/rudOI4zo5D