[Solved] QTable v1 sorting doesn't updates the pagination.descending

[sibelly]

Hey guys, I’m having this issue with the q-table component, that is that I can’t update my pagination info, more specific the descending prop (pagination.descending), it works at the first time, but when I click again on the column, doesn’t work anymore.

Here it is my git repo with a simple example that I reproduced.

I know by the docs that exists that @update:pagination -> function(newPagination) event. But I couldn’t make it to work properly, it even isn’t called.

I apreciate any help.

[CristalT]

Why did you setted sortBy property on created?
Did you tried by setting it on pagination table properties?

pagination: {
        page: 1,
        rowsNumber: 0,
        rowsPerPage: 0,
        sortBy:'title',
        descending: false
      }

Maybe there is a conflict with reactive properties.

[sibelly]

Oh… I got it… I did that to initialize the field… because in my real scenario I pass that information via props… because my table is a shared component you know.
Is something like below:

...
  props: {
    title: String,
    columns: {},
    modelInfo: {
      type: Object,
      default: () => ({
        model: String,
        action: String,
        getter: String,
        sortBy: String,
        descending: Boolean
      })
    }
  },
  created () {
    this.pagination.sortBy = this.modelInfo.sortBy ? this.modelInfo.sortBy : '_id'
    this.pagination.descending = this.modelInfo.descending ? this.modelInfo.descending : true
  },
...

But I removed the created call and the problem persists… the first click works on every diferent column… the problem is about the second click to change the ascto desc or vice versa on the same column.

[metalsadman]

@sibelly you should still define the complete pagination object props like what @CristalT shown above. also take a look at binary-state-sorting props https://forum.quasar-framework.org/topic/3389/solved-v1-table-sorting-strange-behaviour if you only want asc and desc sorting.
edit. looking at your repo you could also do update on your pagination before updating the other specific props within it.

...
onRequest (requestProp) {
       ...
           if (aux.page) {
              // update whole pagination object based on the props you passed in your request method first 
              this.pagination = requestProp.pagination
              // update other pagination props thereafter
              let total = aux.total_results
              let totalPages = aux.total_pages
              this.pagination.page = aux.page
              this.pagination.rowsPerPage = Math.round(total / totalPages)
              this.pagination.rowsNumber = aux.total_results
            }
...

[sibelly]

That line:

// update whole pagination object based on the props you passed in your request method first 
this.pagination = requestProp.pagination 

Was the missing piece… I made a test and let the pagination object incomplete and it works like a charm… I was just forgetting to actualize the descending value.
I updated my repo with the fixes if someone have some interested.
Working with quasar have been an enchanting experience… hope to retribute soon as I get more knowlodge.

I’m still with doubt about the calling of @update:pagination -> function(newPagination).
But for now my problem is solved. Thanks guys!

[metalsadman]

@sibelly glad it helped, btw the logic is actually present in their server side pagination example https://v1.quasar-framework.org/vue-components/table#Server-side-pagination%2C-filter-and-sorting. you don’t need to call @update yourself, as i understood it, the call is made internally when you set the pagination.sync props.

[sibelly]

Oh… that’s true about the documentation… Sometimes we need to read it again and again to get some details right…

        // don't forget to update local pagination object
        this.pagination.page = page
        this.pagination.rowsPerPage = rowsPerPage
        this.pagination.sortBy = sortBy
        this.pagination.descending = descending

I got it about the @update … I just thought that maybe we could override it with our logic you know ? Like the @request.

[metalsadman]

yes you can, all events exposed can be listened to https://codepen.io/metalsadman/pen/xezENj?editors=1011.