Question 392534 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I truncate v-data-table column content by using cellProps?

I created following data table:

<script setup lang="ts">
const headers: any = [
  {
    title: 'Title',
    key: 'title',
    cellProps: {
      class: ['my-bold-class']
    }
  }
  ...
]

const items = [...]
</script>

<template>
  <v-data-table
    :headers
    :items
  ></v-data-table>
</template>

Now I want to truncate the title column content if it exceeds 200px, therefore I did this:

const headers: any = [
  {
    title: 'Title',
    key: 'title',
    cellProps: {
      class: ['my-bold-class', 'text-truncate']
    },
    width: '200' // I'd have used maxWidth instead, but it doesn't seem to work
  }
  ...
]

Based on the documentation, text-truncate only works on display: block or display: inline-block items, therefore I did this:

cellProps: {
  class: ['my-bold-class', 'text-truncate', 'd-block']
}

And this is the result:
enter image description here

As you can see the title column is no more vertically centered. How can I fix it?

P.S. I also noticed that headers can also have a nowrap attribute, like this:

const headers = [
  {
    ...
    nowrap: true
  }
]

but I don’t really know how to use it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution which doesn't require passing any styles/classes at all, only Vuetify's power. It's possible to pass to each header item nowrap: true and a max width (I don't know why it doesn't work with width), like this:

    const headers: any = [
  {
    title: 'Title',
    key: 'title',
    cellProps: {
      class: 'my-bold-class'
    },
    maxWidth: '430',
    nowrap: true
  }
  ...
]

    If the title exceeds 430px it will be truncated and ellipsis will be shown (you can see it in action here).


  2. 0

    Changing the display property of a table cell does not make a lot of sense, because it’s supposed to be displayed as a table cell (display: table-cell). In fact, the spec is a bit blurry around whether or if the browser should allow other display values on table cells (because it interferes with the way columns widths and row heights are calculated and influence each other). If a single cell has any other value for display the results for rendering the table become unpredictable and you might experience performance issues.

    That’s why on a number of mobile devices and in some browsers the display property on <td>s is completely ignored.

    The go-to method for what you’re trying to achieve is to wrap the cell contents inside a div wrapper with d-block text-truncate classes, instead of applying them to the <td> element. You’ll end up with a more consistent behavior cross-browser cross-device.

    Example:

    <template>
  <v-data-table v-bind="{ headers, items }">
    <template #item.title="{ value }">
      <div 
        class="d-block text-truncate"
        v-text="value" 
      />
    </template>
  </v-data-table>
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search