Vue.js - search sort table with an image field - vue.js

Question

I have a Vue.js component/view that shows the data as follows:
<tbody v-for="item in items">
<tr>
<td width="15%"><img :src="item.image"></td>
<td width="50%">{{item.name}}</td>
<td>{{item.purchasedate | moment(" MMMM Do YYYY") }}</td>
<td>${{item.price}}</td>
<td>Item destination link</td>
</tr>
</tobdy>
The data is powered by a simple axios get call that returns the items array. I need to implement a search and sort function. I have tried several out of box components. Including out of box components available on NPM e.g. vue-good-table, vue-table-component, and grid-component. There are two issues I am facing with these
1. The image cannot be displayed and it only returns the URL
2. Date cannot be formatted - I am using moment.js for that.
I would like to sort by name, price, and purchasedate while displaying the image. Any suggestions?

Answer 1

with vue-good-table,you can set column option like this:
columns: [
{
label: 'photo',
field: 'photo',
html: true
},
{
label: 'Name',
field: 'name',
filterOptions: {
enabled: true,
},
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
formatFn: v=>moment(v).format(" MMMM Do YYYY")
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
and data like this:
rows: [
{ id:1,photo:"/static/logo.png", name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
{ id:2,photo:"/static/logo.png", name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3,photo:"/static/logo.png", name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4,photo:"/static/logo.png", name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5,photo:"/static/logo.png", name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6,photo:"/static/logo.png", name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
{ id:7,photo:"/static/logo.png", name:"Jane", age: 24, createdAt: '20111031' },
{ id:8,photo:"/static/logo.png", name:"Susan", age: 16, createdAt: '2013-10-31', score: 0.03343 },
].map(o=>({
...o,
photo:`<img width="80" height="80" src="${o.photo}"/>`
}))
and the result is: