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

  • 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.

  • 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,
            descending: false

    Maybe there is a conflict with reactive properties.

  • 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.

  • @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

  • 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! 😉

  • @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.

  • 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.

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

Log in to reply