title: Server side pagination with firestore in vuetify
body: <p>I am working on project where i want to paginate data from a collection,The collection contains thousands of record,So obysly in that case i can not go through with datatable which renders all the data at first request so the reading could will be affected to the billing.I looked in vuetify js datatable which is quite good for the project but I am not getting idea that how will it work with the firestore. I want to load first 10 records and when click on next button then next 10 record should be loaded using offset or something.</p>
  
  <p>If you want to look my way i am using this example of vuetify <a href="https://codepen.io/pen/?&amp;editors=101" rel="noreferrer">https://codepen.io/pen/?&amp;editors=101</a></p>
  
  <p>Template Code:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;div&gt;
        &lt;v-data-table
          :headers="headers"
          :items="desserts"
          :pagination.sync="pagination"
          :total-items="totalDesserts"
          :loading="loading"
          class="elevation-1"
        &gt;
          &lt;template slot="items" slot-scope="props"&gt;
            &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
          &lt;/template&gt;
        &lt;/v-data-table&gt;
      &lt;/div&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Vuejs code:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data () {
      return {
        totalDesserts: 0,
        desserts: [],
        loading: true,
        pagination: {},
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' }
        ]
      }
    },
    watch: {
      pagination: {
        handler () {
          this.getDataFromApi()
            .then(data =&gt; {
              this.desserts = data.items
              this.totalDesserts = data.total
            })
        },
        deep: true
      }
    },
    mounted () {
      this.getDataFromApi()
        .then(data =&gt; {
          this.desserts = data.items
          this.totalDesserts = data.total
        })
    },
    methods: {
      getDataFromApi () {
        this.loading = true
        return new Promise((resolve, reject) =&gt; {
          const { sortBy, descending, page, rowsPerPage } = this.pagination
  
          let items = this.getDesserts()
          const total = items.length
  
          if (this.pagination.sortBy) {
            items = items.sort((a, b) =&gt; {
              const sortA = a[sortBy]
              const sortB = b[sortBy]
  
              if (descending) {
                if (sortA &lt; sortB) return 1
                if (sortA &gt; sortB) return -1
                return 0
              } else {
                if (sortA &lt; sortB) return -1
                if (sortA &gt; sortB) return 1
                return 0
              }
            })
          }
  
          if (rowsPerPage &gt; 0) {
            items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
          }
  
          setTimeout(() =&gt; {
            this.loading = false
            resolve({
              items,
              total
            })
          }, 1000)
        })
      },
      getDesserts () {
        return [
          {
            value: false,
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            value: false,
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            value: false,
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            value: false,
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            value: false,
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            value: false,
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            value: false,
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            value: false,
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            value: false,
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            value: false,
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    }
  })
  </code></pre>
  
  <p>Here i want to use <code>getDesserts()</code> method to load my data from firestore using limit and offset.</p>