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!