QTable multiple filters with pagination: clicking on pagination links destroy filter/query string

[raphaels__44554]

Hello,

This is my first time using quasar. I am trying to implement multiple filters with QData table. I have been able to implement filtering without much effort, however, I do not think my implementation is right as clicking on the next page destroys all of the filters and the request that is being sent to the server does not have the query parameters corresponding to the filters applied. My setup is as follows:

<q-table
      row-key="id"
      :grid="$q.screen.lt.sm"
      :data="data"
      :columns="columns"
      :loading="loading"
      :pagination.sync="pagination"
      :filter="filter"
      @row-click="onRowClick"
      @request="onRequest"
    >
<template v-slot:top-row>
        <q-tr>
          <q-td style="width:200px">
            <q-input 
              v-model="customerNumberFilter" 
              maxlength="7" 
              placeholder="Customer Number"
              @keyup.enter="applyFilter()"
              >
            </q-input>
          </q-td>

          <q-td class="text-right">
          </q-td>
          <q-td>
            <q-select
              label="Status"
              v-model="filters.status"
              :options="statusOptions"
              map-options
            />
          </q-td>
                    <q-td>
          </q-td>

          <q-td class="text-right">
            <q-btn outline color="primary" label="Apply" @click="applyFilter()" />
          </q-td>
                    
        </q-tr>
      </template>
...
applyFilter(){
let params = {
        per_page: rowsPerPage, page: page,
      }
params[`filter[customerNumber]`]= 'someVal'
params[`filter[status]`]= 'someVal'
try {
        let results = await this.$axios.get(this.url, { params })  
        this.data = results.data.data
        this.addParamsToHistory( params )
        this.updatePagination(results.data.meta)
      } catch (error) {
        this.toast('Could not get the list!', true)
      }
    },
    addParamsToHistory(params) {
      this.$router.replace({path: this.$route.path,
        query: {...params }
      }).catch(err => {
          // added coz of Navigation Duplicate error
      })
    },
    updatePagination (pagination) {
      this.pagination.page = pagination.current_page
      this.pagination.rowsPerPage = pagination.per_page
      this.pagination.rowsNumber = pagination.total
    },
}

A typical url with filters applied would be:

requests?per_page=15&page=1&total=true&filter[customerNumber]=someValue

AND when pagination link is clicked, filters are removed and the original request request remains

requests?per_page=15&page=1&total=true

If someone could point me in the right direction.

Thanks you!

[dobbel]

@raphaels__44554

Here’s a Quasar table like component with multi filters and pagination(will remember the filter value):

quasar-qgrid:
https://quasar-qgrid.netlify.app/examples
https://github.com/AlexcastroDev/quasar-qgrid