Format output row data in Vue Good Table - vue.js

Question

I've built a Vue.js component. I have a vue-good-table, where it fetches data from the server. I need to format the output data. Now the data comes with numbers. For example: it's show number 1 as a value. Instead of "1" it has to be ITEM1, for 2 - ITEM2 and so on.
<vue-good-table
:columns="columns"
:rows="formattedItems"
:paginate="true"
:lineNumbers="true">
</vue-good-table>
<script type="text/javascript">
import config from '../main.js'
import moment from 'moment'
export default {
components: {
},
data(){
return {
items: [],
columns: [
{
label: 'Number',
field: 'number',
type: 'String',
filterable: true,
placeholder: 'Number'
},
{
label: 'Name',
field: 'name',
type: 'String',
filterable: true,
placeholder: 'Name'
},
{
label: 'Validity Date',
field: 'validitydate',
type: 'String',
filterable: true,
placeholder: 'dd/mm/yyyy'
},
{
label: 'Authority',
field: 'authority',
type: 'String',
filterable: true,
placeholder: 'Authority'
},
{
label: 'Status',
field: 'status',
type: 'String',
filterable: true,
placeholder: 'Status'
},
{
label: 'Structure',
field: 'structure',
type: 'String',
filterable: true,
placeholder: 'Structure'
},
{
label: 'Type',
field: 'type',
type: 'String',
filterable: true,
placeholder: 'Type'
},
{
label: 'National',
field: 'isnational',
type: 'String',
filterable: true,
placeholder: 'National'
},
],
json_meta: [
[{
"key": "charset",
"value": "utf-8"
}]
]
}
},
methods: {
computed: {
formattedItems () {
if (!this.items || this.items.length === 0) return []
return this.items.map(item => {
return {
...item,
validitydate: item.validitydate === null ? null :
moment(item.validitydate).format('DD/MM/YYYY')
}
})
}
}
}
</script>
I need to do it for columns Authority, Status, Structure, Type and National.
For Authority: 1 - ITEM1, 2 - ITEM2, 3 - ITEM3
For Status: 1 - Status1, 2 - Status2, 3 - Status3
And so on.
Update:
I was wondering for using Map as a way to make it. However, I am not very sure how.

Answer 1

vue-good-table supports a column proprty called formatFn where you can format the data before it shows up on the column.
// in your columns
{
label: 'Authority',
field: 'authority',
type: 'String',
filterable: true,
placeholder: 'Authority',
formatFn: this.formatAuthority,
}
// in your methods
methods: {
formatAuthority(value) {
return `ITEM ${value}`;
}
}
you can see the documentation here:
https://xaksis.github.io/vue-good-table/guide/configuration/column-options.html#formatfn