VitorLuizC/vue-data-tablee

Html on cell value ?

Geminii opened this issue · 3 comments

Geminii commented

Hi,
Thanks a lot for your work.
I try to use html option into cell value but not works. Do you implement it ?

cols: [
        {
          label: "Name",
          field: "name",
          html: true
        },
rows: [
        {
          name: "<span class='test'></span> Hey !"
        }
]

I defined an html property on my column, but it show <span class='test'></span> like a string and not interprate in html render.
Thanks for your answer.

abensur commented

@Geminii, I've done that using slot-scope

<vue-data-tablee
  :cols="cols"
  :rows="perks">
  <template slot="row" slot-scope="{ row }">
    <td class="c-table-cell -content" v-html="formatContact(row.contact)" />
    <td class="c-table-cell -content" v-html="formatCategories(row.categories)" />
  </template>
</c-table>
  • 👍1
VitorLuizC commented

With your props would be something like

<template>
  <vue-data-tablee 
    :cols="[ { label: 'HTML Stuff' }, { label: 'Name' } ]"
    :rows="[ { message: '<span class=\'test\'></span> Hey !', name: 'Geminii' } ]"
  >
    <template slot="row" slot-scope="{ row }">
      <td v-html="row.message"></td>
      <td><i class="icon-user"></i> {{ row.name }}</td>
    </template>
  </vue-data-tablee>
</template>
Geminii commented

@abensur @VitorLuizC Thanks for your help.
Works perfectly with template slot ;)

Don't think to use this and focus on html property ...

  • 👍1