0

Right now I can display data but they're all in one table.

enter image description here

What I want somehow is that, every Code, there should be one table. like All code 1 should have in separate table, all code 2 in separate table and so on.. This is my code in displaying 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 this possible 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> 

2 Answers2

0

Sure. Make a computed that returns a list of unique codes. Make a separate store for each code. Then iterate like:

<template>
  <div v-for="code in uniqueCodes" :key="code">
    <div class="panel-con">
        <ui-basic-table
            ref="table"
            :store="table.store[code]"
            :apiUrl="table.apiUrl"
            :dataKey="table.dataKey"
            :columns="table.columns"
            :loadOnMount="true"
            >
        </ui-basic-table>
    </div>
  </div
<template>

I made some assumptions about how your data and table work. Even if this isn't quite right, I hope the idea is clear.

Roy J
  • 42,522
  • 10
  • 78
  • 102
  • What do you mean by `uniqueCodes`? How did you generate it? –  Apr 09 '18 at 14:42
  • You would make a computed that looks at the codes (`area_id`s) n your data and generated a unique list of them. See https://stackoverflow.com/questions/1960473/get-all-unique-values-in-an-array-remove-duplicates – Roy J Apr 09 '18 at 15:36
  • Weew. Gotta try this out, am having trouble pulling out `area_id`s :S –  Apr 09 '18 at 16:02
  • Can you please see this one problem of mine, https://stackoverflow.com/questions/49746188/got-undefined-when-accessing-a-vue-component its my issue when accessing my `area_id`s. Maybe you can give some insights to it. Thanks –  Apr 10 '18 at 10:32
  • Please see my updated question, I've tried your suggestions, but still can't make it work. The values of `{{ value.label }}` are already the `area_id` but when I insert in store (as seen above) it still doesn't filter by `area_id`. Thanks. –  Apr 16 '18 at 12:31
0

Split your data by their codes into separate arrays, example:

new Vue({
  el: "#app",
  data: {
    someData: [
        {
        code: 1,
        name: 'test1'
      },
      {
        code: 2,
        name: 'test2'
      },
      {
        code: 2,
        name: 'test3'
      },
      {
        code: 1,
        name: 'test4'
      },
      {
        code: 1,
        name: 'test5'
      },
      {
        code: 3,
        name: 'test6'
      }
    ]
  },
  computed: {
    tables() {
      let tabs = {};
      this.someData.forEach((el, i) => (i = parseInt(el.code), tabs[i] ? tabs[i].push(el) : (tabs[i] = [el])));
      return tabs;
    }
  }
})

https://jsfiddle.net/eywraw8t/24880/

dziraf
  • 3,607
  • 1
  • 16
  • 22
  • Can this handle up until how many numbers of unique code values? not just 3 codes? –  Apr 09 '18 at 14:45
  • IS there any way you can consolidate it with my code above? –  Apr 09 '18 at 15:44