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:

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