q-table on pagination Next flashes last page before showing next page

stuffy

This sounds weired but on clicking pagination Next, q-table flashes last page before showing the next page. This happens on fresh page load, once pages are traversed then it moves to next page smoothly.
Did someone come across this or have any suggestions looking at the below code?

        <q-table
          gridX
          :data="lists.data"
          :columns="columns"
          row-key="id"
          selection="none"
          :loading="tblLoading"
          loading-label="Loading lists"
          :pagination.sync="pagination"
          :rows-per-page-options="rowsPerPageOptions"
          @request="onRequest"
          binary-state-sort
          :selected.sync="selected"
          flat
          separator="none"
          rows-per-page-label="Show"
          hide-headerX
          color="primary"
          table-class="tblData"
          card-class="bg-white text-brand"
        >

      pagination: {
        sortBy: "id",
        descending: true,
        page: 1,
        rowsPerPage: 7,
        rowsNumber: 0,
        skip: 0
      },
      rowsPerPageOptions: [7, 10, 25, 50, 100],

    onRequest(requestProp) {
      this.tblLoading = true;
      let {
        page,
        rowsPerPage,
        rowsNumber,
        sortBy,
        descending
      } = requestProp.pagination;
      this.pagination = requestProp.pagination;
      const skip = (page - 1) * rowsPerPage;
      this.pagination.skip = skip;
      this.pagination.rowsPerPage = rowsPerPage;
      return this.findLists(this.listQuery())
        .then(response => {
                this.tblLoading = false;
                // set pagination
                this.pagination.rowsNumber = response.total;
                this.pagination.page = page;
                this.pagination.rowsPerPage = rowsPerPage;
                this.pagination.sortBy = sortBy;
                this.pagination.descending = descending;
                this.pagination.skip = skip;
              })
              .catch(e => {
               ...

s.molinari

Not sure it will help, but what happens, if you put rowsNumber to something like 7, instead of 0?

Scott

stuffy

Ahh, that seems to do the trick. Thank you.

One more thing, during the next page being fetched from the server the current page vanishes and shows a one liner loading ists. This kind of hinders the UI. Is there was way to show the curret page as it is (the loading/ progress bar under the row header is active as expected) till next page is loaded. Removing the loading-label doesn’t help.

s.molinari

I’m a bit lost on that problem (and its description).

Scott

metalsadman

@stuffy normally it will just show a loading indicator at qtable col headers, it doesnt clear the current table items until you set the new data, so you’re defintely doing something wrong. Provide a reproductio pen so we can help you more.

stuffy

@metalsadman thank you for looking into this.

Please find the link to codepen https://codepen.io/Stuffy1/pen/QWWOVrq?

stuffy

@metalsadman can give a suggestion on this as unable to find whats causing this issue …

metalsadman

@stuffy your reproduction code has many errors, pls fix those non related to your question first. take this one from docs as example. https://codepen.io/metalsadman/pen/xxxJKmJ?&editable=true&editors=101