How can I make a vue-good-table automatically go to the next page every 5 seconds?

Question

Here is an example of a vue-good-table from one of the tutorial they have, but I want to be able to make it go to the next page every 5 seconds and then when at the end restart back at pg1. How would it be possible to do this?

HTML:

<div id="app">
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{ enabled: true, perPage: 5}"
:search-options="{ enabled: true}"> 
</vue-good-table>                  
</div>

JS:

new Vue({
  el: '#app',
  data() {
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
        { id:7, name:"Jane", age: 24, createdAt: '2013-09-21' },
        { id:8, name:"Susan", age: 16, createdAt: '2013-10-31', score: 0.03343 },
      ],
    };
  },
});

https://jsfiddle.net/aks9800/57a2a4ce/

Answer 1

Updated Fiddle : https://jsfiddle.net/4hfrtL5q/

Set pagination in data

pagination: {
        enabled: true,
        perPage: 3,
        setCurrentPage: 1
      }

pass pagination-options props to component.

  <vue-good-table :columns="columns" :rows="rows" :pagination-options="pagination" :search-options="{ enabled: true}">

setinterval for 5 secs to update pagination.setCurrentPage in mounted

  mounted() {

    setInterval(() => {
      let count = this.rows.length,
        perpage = this.pagination.perPage,
        currentpage = this.pagination.setCurrentPage
        this.pagination.setCurrentPage = count / perpage > currentpage ? currentpage + 1 : 1
    }, 5000)
  },