Can a custom column be added with a calculated value for each row? For example, if col 1 has the value "3" and col 2 has the value "5", then I want a dynamic col 3 with a sum value of 8.
I am utilizing Vue Tabulator. Below is my Table.vue component.
<template>
<div v-if="tabledata" class="w-full p-3 border border-gray-200 shadow-xl rounded-lg mt-10">
<VueTabulator id="usersData" v-model="tabledata" :options="options" />
</div>
</template>
<script>
export default {
data(){
return{
tabledata: [
{
"name": "Hron",
"lvl2": 5,
"lvl3": 0,
"score": 5
},
{
"name": "Zhr",
"lvl2": 2,
"lvl3": 1,
"score": null
},
{
"name": "Mang",
"lvl2": 4,
"lvl3": 1,
"score": null
}
],
options: {
layout:"fitColumns",
columns: [
{title:"S#", formatter:"rownum", width:70, align:"center", responsive:3},
{title:"Name", field:"name", minWidth:150},
{title:"Lvl 2", field:"lvl2", sorter:"number", align:"center", formatter:"money", formatterParams:{precision:false}, bottomCalc:"sum", minWidth:80},
{title:"Lvl 3", field:"lvl3", sorter:"number", align:"center", formatter:"money", formatterParams:{precision:false}, bottomCalc:"sum", minWidth:80},
{title:"Score", field:"score", sorter:"number", align:"center", formatterParams:{precision:true}, bottomCalc:"avg"}
]
}
}
}
}
</script>
The desired output inside the table should look like this:
[
{
"name": "Hron",
"lvl2": 5,
"lvl3": 0,
"score": 5
},
{
"name": "Zhr",
"lvl2": 2,
"lvl3": 1,
"score": 3
},
{
"name": "Mang",
"lvl2": 4,
"lvl3": 1,
"score": 5
}
]
I have checked the documentation but couldn't find any relevant information.
Thank you