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>

Just replace description with your attribute in your 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">
      v-for="header in props.headers"
      :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
      <v-icon small>arrow_upward</v-icon>
      {{ header.text }}