Vuetable-2: How to sort with in api-mode = false

[egerb]

Hello!
Great plugin, but I confused in one thing - how to make it sort with custom query (I'm using axios for requests).
Or maybe I missed some event, that I can catch and run my own query?
Or somehow way to override method that makes sorting?
Just please tell me is there any way or I should overwrite source code?
@ratiw Thank you for any help.

[ratiw]

@egerb Vuetable never has sort functionality. It just presents the result as it received.

The sorting is always done by your API endpoint.

In API mode, Vuetable only send the specified key to your endpoint when the user clicks on table title.
In Data mode, Vuetable will call your predefined method specified in the data-manager prop with the information which column title was clicked, so you can do the sorting with whatever mechanism you want and returns the sorted result for it to display.

[egerb]

@ratiw Could you provide me with short example. Because if I do data-manager="myMethodName" - got error with message: Invalid prop: type check failed for prop "dataManager". Expected Function, got String.
If I do :data-manager="myMethodName" then got: Error in mounted hook: "TypeError: Cannot read property 'data' of undefined"
Thank you a lot.

[ratiw]

You have to use :data-manager="myMethodName", so Vue will not interpret it as a string.

Please also look at this example.

[egerb]

@ratiw Thanx for example. It really helped.
I think link for it should be included to lessons and docs.

[egerb]

For those who will got this issue, I've found solution by updating vuetables-2 to last version 1.7.2, I've got 1.7.1 instead and everything start working as should in
example .
Many thanx to @ratiw for explanation and patience.

[AngeloAnolin]

I am having issue while following the example posted.

My data declaration is as follows:

data () {
  return {
    tableData: {
      'data': [],
      'pagination': {
        'total': 200,
        'per_page': 50,
        'current_page': 1,
        'last_page': 4,
        'next_page_url': null,
        'prev_page_url': null,
        'from': 1,
        'to': 50
      }
    }
  }
}

The only difference I can see at the moment is that my data is being loaded after making an API get request in the mounted event of my component, using axios, and setting the data as:

var a = this
axios.get(apiUrl).then((response) => {
          a.tableData.data = response.data
          a.$refs.myTable.setData(a.tableData.data)
        }, (err) => {
          console.log(err)
        })

The vuetable is defined as:

<vuetable ref="myTable"
            :api-mode="false"
            :fields="tableFields"
            :data="tableData"
            data-path="data"
            pagination-path="pagination"
            :css="tableCss"
            :data-manager="dataManager">
          </vuetable>

If I commented out this line of code:

// a.$refs.myTable.setData(a.TableData.data)

Data does not appear on the table.

The error I am seeing in the console is:

vue.esm.js?efeb:571 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'data' of undefined"

[egerb]

Once you 've did in component :data="tableData", just update this variable and of course you could $refs.myTable.refresh or $refs.myTable.reload your table.
As I see you don't hve data here a.tableData.data = response.data or maybe you should use $set() method in that case.
To help you I need to see the whole script anyway.

[AngeloAnolin]

@egerb - I actually update the tableData variable, after getting the response from the axios api call:

axios.get(apiUrl).then((response) => {
  a.tableData.data = response.data
  a.$refs.myTable.setData(a.tableData.data)
  }, (err) => {
    console.log(err)
})

I did try as you suggested to reload or refresh the table after assigning the data to the variable tableData.data, via:

a.$refs.myTable.refresh()

• or -

a.$refs.myTable.reload()

but no data appears on my table.
Having this line shows the data though:

a.$refs.myTable.setData(a.tableData.data)

[ratiw]

Guys, please see this example.

[egerb]

Show your full code, please

[AngeloAnolin]

Thank you @ratiw for the latest example you have posted. That provides a better context of what code changes are required.

@egerb Thanks for the insight. The solution I came up with followed @ratiw's conventions.

[willjross]

Hello, I'm trying to implement sorting for local data as well, but when clicking on column headers I don't even see the console.log('dataManager:'.... from the dataManager method get called. Any idea what could be causing this? I'm not using pagination.

My instantiation:
:api-mode="false"
:data="localData"
:fields="fields"
:data-manager="dataManager"

[benghan95]

Hello, I'm trying to implement sorting for local data as well, but when clicking on column headers I don't even see the console.log('dataManager:'.... from the dataManager method get called. Any idea what could be causing this? I'm not using pagination.

My instantiation:

I have the exact same issue. I have added logging in the dataManager function and still it doesnt log anything when I toggle the column header. I can see the sorting icons are changing but it does nothing at all.

I'm using this version:
"vuetable-2": "^2.0.0-beta.4"