At the moment, my data is being displayed in one table.
https://i.sstatic.net/C1mmY.png
What I am looking to achieve is having a separate table for each code. For example, all instances of Code 1 should be in one table, Code 2 in another table, and so on. This is the current code I am using to display the table:
<template>
<div class="panel-con">
<ui-basic-table
ref="table"
:store="table.store"
:apiUrl="table.apiUrl"
:dataKey="table.dataKey"
:columns="table.columns"
:loadOnMount="true"
>
</ui-basic-table>
</template>
export default {
name: 'area-cost',
data() {
return {
}
},
computed:{
table(){
var table = {
apiUrl: this.$api.areacost.resource,
dataKey: this.$api.areacost.plural_key,
store:{
namespace:'AreaCost',
mutation:'set',
},
columns: [
{ name: 'area_id', label:'Code',width:40},
{ name: 'expected_cost', label: 'Target', width: 40 , format:'number' },
{ name: 'created_date',label:'Date',width:40, type:'text',format:'date'},
],
actions: [
{name: 'viewitem', label: '', icon: 'search', icon_color:
'primary',routelink:{}}
],
}
return table;
},
},
}
Is it possible to achieve this in any way?
UPDATE
<div class="panel-con">
<div v-for="(value, index) in areas" :key="index" >
{{ value.label }}
<ui-basic-table
ref="table"
:store="table.store" //tried :store="table.store[value.label]" or :store="table.store[index]"
:apiUrl="table.apiUrl"
:dataKey="table.dataKey"
:columns="table.columns"
:loadOnMount="true"
:searchparam="value.key"
>
</ui-basic-table>
<br/>
</div>
</div>