title: How to implement Quasar q-table with server-side pagination?
body: <p>I am trying to implement server-side pagination for a Quasar QTable, using Vuex and Django Rest Framework as the backend. I am struggling to interpret the documentation for my use case. Currently, I can get the correct number of pages and the first page of results, but the rows-per-page value and the pagination itself does not work. The Quasar docs say there is an @request  event but I'm unsure how to incorporate this into my code.</p>
  <p>What am I please missing to make this work?</p>
  <pre><code>**Vue**
  
  &lt;template&gt;
  &lt;q-table
    title=&quot;Matches&quot;
    :rows=&quot;matches.results&quot;
    :columns=&quot;columns&quot;
    v-model:pagination=&quot;pagination&quot;
    row-key=&quot;id&quot;
  &gt;
    &lt;template v-slot:body-cell-actions=&quot;props&quot;&gt;
      &lt;q-td :props=&quot;props&quot;&gt;
        &lt;router-link class=&quot;action-links&quot; :to=&quot;{ name: 'Match', params: { id: props.row.id } }&quot;&gt;Details&lt;/router-link&gt;
      &lt;/q-td&gt;
    &lt;/template&gt;
  &lt;/q-table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from 'vuex'
  
  export default {    
    data() {
      return {
        columns: [
          { name: 'team', label: 'Team', align: 'left', field: 'team', sortable: true, required: true },
          { name: 'date', label: 'Date', align: 'left', field: 'formatted_date', sortable: true },
          { name: 'actions', label: 'Actions', align: 'left', field: '' }
        ]
      }
    },
    mounted() {
      this.$store.dispatch('matches/getMatches')
    },
    computed: {
      ...mapState({
        matches: state =&gt; state.matches.matches,
        pagination: state =&gt; state.matches.pagination
      })
    },
    methods: {}
  }
  &lt;/script&gt;
  </code></pre>
  <p>.</p>
  <pre><code>**Vuex**
  
  import { api } from 'boot/axios'
  
  export const state = {
    matches: [],
    pagination: {
      sortBy: 'desc',
      descending: false,
      page: 1,
      rowsPerPage: 1,
      rowsNumber: 0
    }
  }
  
  export const mutations = {
    SET_MATCHES(state, matches) {
      state.matches = matches
      state.pagination.rowsNumber = matches.count
    }
  
  export const actions = {
    getMatches({ commit }) {
      api
        .get(`/api/v1/matches/?page=${state.pagination.page}`)
        // returns object like this:
        // {
        //    count: 6,
        //    next: &quot;http://localhost:8000/api/v1/matches/?page=3&quot;,
        //    previous: null,
        //    results: [...]
        // }
        .then(response =&gt; {
          commit('SET_MATCHES', response.data)
        })
    }
  </code></pre>
  <p>.</p>
  <pre><code>**Backend**
  
  class MatchPagination(PageNumberPagination):
      page_size = 2
  
  class MatchViewSet(viewsets.ModelViewSet):
      serializer_class = MatchSerializer
      queryset = Match.objects.all()
      pagination_class = MatchPagination
  </code></pre>