Raw HTML within data table cell

[HDShabe]

Hi,

I'm porting an old html datatable into a BalmUI Datatable, for which a cell can have some text that's normally decorated and some that's decorated with the following.

text-decoration: line-through;

In the old datatable this is achieved by the innerhtml of the table cell being populated with the following (example)

<td><span class="before">false</span> <span class="after">true</span></td>

Is there a way to input raw html into a datatable cell as above to produce the same results?

Cheers.

[HDShabe]

Solved this one myself, I ended up using datatable slots to just print out the html I needed, I hadn't thought of this solution as I'd only previously used slots to render other BalmUI controls out into datatable cells.

<template #enabled="{ data }"> <div v-html="data.enabled"/> </template>

tbody: [ { slot: 'enabled', },

And data.enabled contained my formatted html.

Hopefully this ends up helping someone else!

[ChahinDB7]

Solved this one myself, I ended up using datatable slots to just print out the html I needed, I hadn't thought of this solution as I'd only previously used slots to render other BalmUI controls out into datatable cells.

<template #enabled="{ data }"> <div v-html="data.enabled"/> </template>

tbody: [ { slot: 'enabled', },

And data.enabled contained my formatted html.

Hopefully this ends up helping someone else!

I don't really understand how I would put it in my scenario.

This is my code

  <ui-table
    v-model="selectedRows"
    :data="data"
    :thead="thead"
    :tbody="tbody"
    :default-col-width="200"
    :fullwidth="fullWidth"
    :row-checkbox="rowCheckbox"
    :selected-key="selectedKey"
    class="data-table-balm-ui"
    :class="{'is-dark-mode': darkMode }"
  >
    <template #enabled="{ data }">
      <div v-html="data.enabled" />
    </template>
    <template v-if="hasActionButton" #actions="{ data }">
      <ui-icon v-if="showInfo" v-tooltip="'Show more info'" class="action-button" @click="action(data, 'info')">
        description
      </ui-icon>
      <ui-icon v-if="showEdit" v-tooltip="'Edit this trade'" class="action-button" @click="action(data, 'edit')">
        edit
      </ui-icon>
      <ui-icon v-if="showDelete" v-tooltip="'Delete this trade'" class="action-button" @click="action(data, 'delete')">
        delete
      </ui-icon>
      <ui-icon v-if="showUpload" v-tooltip="'Upload a file'" class="action-button" @click="action(data, 'upload')">
        upload
      </ui-icon>
    </template>   
    <div v-if="hasPagination">
      <ui-pagination
        v-model="page"
        :total="2"
        show-total
        @change="onPage"
      />
    </div>
  </ui-table>

And my tbody

tbody: [ {
        field: 'Symbol',
        width: 150,
        slot: 'enabled',
        fn: data => {
          return data.Symbol + "<span>test</span>"
        }
      }
]

This lead to no success. The column is empty. The div is generated though only the value not.

[elf-mouse]

Hi @DevChahinAarbiou , you can set tbody with or without slot

1. without slot (default usage)

   <ui-table :data="data" :thead="thead" :tbody="tbody"></ui-table>

   export default {
     data() {
       return {
         tbody: [
           {
             field: 'Symbol',
             fn: (data) => {
               return data.Symbol + '<span>test</span>';
             }
           }
         ],
         // ...
       };
     }
   };

2. with slot (custom usage)

   <ui-table :data="data" :thead="thead" :tbody="tbody">
     <template #enabled="{ data }">
       <div v-html="data.Symbol" />
     </template>
   </ui-table>

   export default {
     data() {
       return {
         tbody: [
           {
             field: 'Symbol',
             slot: 'enabled'
           }
         ]
       };
     }
   };

Hope it helps you.