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

Question

Vuetify documentation suggests to pass an object array for headers that has a text attribute like so:

[{
    text: string;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

But if you pass:

[{
    text: string = "<div>Foo</div><div>Bar</div>;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

It won't render the HTML (it'll escape the text).

So, how do I render HTML?

Answer 1

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

Answer 2

Something to note if you're on an updated version is that

<template slot="headers" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>

is now

<template slot="header" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>

The version i'm testing in is v2.2.8 but it was probably changed in v2

Answer 3

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>

Answer 4

You would need to use the headers template slot instead of passing them as a prop:

  <template slot="headers" slot-scope="props">
    <th><div>Foo</div><div>Bar</div></th>
  </template>