Vuetify v-data-table , how to render header text in HTML?

i found a solution for your problem:

 <template v-slot:item.description="{item}">
   <div v-html="item.description"></div>
 </template>

Just replace description with your attribute in your object :

Object:

And here the image of the object data-table

Have a look at the Vuetify example of the header slot. It has the means to complete your task.

Below here there is a copy from the exact part, just replace the {{ header.text }} usage with Vue's solution using raw HTML to force HTML string rendering. It will look like something like this <span v-html="header.text"></span>.

<template slot="headers" slot-scope="props">
  <tr>
    <th>
      <v-checkbox
        :input-value="props.all"
        :indeterminate="props.indeterminate"
        primary
        hide-details
        @click.native="toggleAll"
      ></v-checkbox>
    </th>
    <th
      v-for="header in props.headers"
      :key="header.text"
      :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
      @click="changeSort(header.value)"
    >
      <v-icon small>arrow_upward</v-icon>
      {{ header.text }}
    </th>
  </tr>
</template>