Closed HDShabe closed 2 years ago
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 }">
</template>
`
tbody: [ { slot: 'enabled', },
And data.enabled contained my formatted html.
Hopefully this ends up helping someone else!
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.
Hi @DevChahinAarbiou , you can set tbody with or without slot
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>';
}
}
],
// ...
};
}
};
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.
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.