Refreshing data in table + add icon to call method

[bbogda]

I think about opportunity refresh my data. How to call method on demand

fetchData() {
      this.$http.get('v_sim.php').then(response => {
        this.list = response.body 
      }, response => { return 'error' })
    }

Maybe some simple solutions e.g. some icon similar to sortable in first header column? Or maybe is something similar in library?

Thanks for v2-table :+1:

And for QuickStart & Example give :100:

[dwqs]

call method on demand？？？more details?

[bbogda]

Something similar to : @sort-change="handleSortChange" - when click icon of 'sorting' then method handleSortChange() does it.

<template>
<v2-table :data="list" @sort-change="handleSortChange" @refresh-data="fetchData" >
<v2-table-column label="Id" prop="id" refresh ></v2-table-column>
<v2-table-column label="Rej" prop="rej" sortable ></v2-table-column>
 ...
</template>

e.g. @refresh-data="fetchData" - push icon of 'refresh' to get current data and display to table.

  data() {
    return {
      loading: false,
      list: []
    }
  },
  created() {
    this.fetchData()
  },
methods: {
    fetchData() {
      this.$http.get('v_sim.php').then(response => {
        this.list = response.body 
      }, response => { return 'error' })
    },
    handleSortChange({ prop, order }) {
      // Customize your sorting method. Maybe it will get data from server.
      this.loading = true
      const list = [].concat(this.list)
      list.sort((item1, item2) => {
        let val1 = ''
        let val2 = ''

        if (prop === 'walidacja' || prop === 'diagnoza' || prop === 'adres') {
          val1 = item1[prop]
          val2 = item2[prop]
          if (order === 'descending') {
            return val2 < val1 ? -1 : 1
          }
          return val1 < val2 ? -1 : 1
        }
      })
      setTimeout(() => {
        this.loading = false
        this.list = [].concat(list)
      }, 1000)
    }

[dwqs]

<template>
// Maybe you should put a button or a refresh icon to trigger fetchData outside the table
<button @click="fetchData">refresh</button>
<v2-table :data="list" @sort-change="handleSortChange">
<v2-table-column label="Rej" prop="rej" sortable ></v2-table-column>
 ...
</template>

I have no idea to put refresh icon inside v2-table. The data maybe can sort, so header columns should put sorting icon.

[bbogda]

Yeah I was thinking about it. It's not so elegant solution. And have problem with call method via 'dashboard-container' where table is one of piece panel-group element. But many thanks for reply.