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

v-data-table-header api
vuetify v-data-table example
vuetify data-table header color
vuetify v-data-table header
vuetify v-data-table column width
vuetify data-table filter
vuetify data-table example
v-table vuetify

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?

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>

Dynamically building a table using vuetifyJS data table, <v-data-table :headers="headers" :items="myDataObject" I cannot get your question but i am assuming that you want to create a vuetify table. <script> export default { data () { return { headers: [ { text: 'Dessert (100g  The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection. The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the

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>

v-data-table: add header parameter to control visibility · Issue #1548 , Vuetify already offers classes to do so, which can easily be applied in the table i. v-data-table: add header parameter to control visibility #1548 v-for="header in props.headers" :key="header.text" :class="[ 'column sortable',  The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection.

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

Data table component, The standard data-table will by default render your data as simple rows. template script See 'v-data-table-header' API for more information no-data-text. type. Thanks for helping with the issue. @tforssander, how do I use the current dev branch, I tried with the github link, but when I am starting the server, it couldnt find dist/nuxt.

Vuetify v-data-table header drag&drop move, v-for="header in props.headers". 16. :key="header.text". 17. :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination. Between each not-last-child row of a v-data-table a line is being printed by default. I would like to modify the css to change that line, e.g. remove it. Originally, in the developer console the css

Vuetify: Achieve multiple filtering in the Data table component, The element Data table (VDataTable) does not support more than a simple filtering. This is that it only allows you to add a text field that filters rows HTML; Babel <template slot="headers" slot-scope="props"> <tr> <th v-for="header in false; Vue.use(MultiFiltersPlugin); // <-- THIS new Vue({ render: h  The v-data-iterator component is used for displaying data, and shares a majority of its functionality with the v-data-table component. Features include sorting, searching, pagination, and selection.

Build Dynamic Data Table in Vue.js 2+ with Vuetify, A data table organizes information using column and rows, and a "vuetify/dist/​vuetify.min.css"; Vue.use(Vuetify); new Vue({ render: h to be placed inside your Vue component and should wrap the table tag. v-slot:default> <thead> <tr> <th class="text-left">Name</th> <th Fixed Header Table Example. Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips. Get Started Github. Intro to Vuetify from Vue Mastery on Vimeo. Available at Vuemastery.com. Enter full screen. Exit full screen.

Comments
  • how to achieve this with vuetify version v-data-table?
  • @shashiverma I'll look at it, but it seems that this question must be updated due to broken links that should be pointing at old documentation. Either the question link should be updated to support only old versions or the question itself could be used as a reference both for old and new versions. Thanks for the heads-up! ;D
  • Well this works, but I got a "'props' is defined but never used."