Wsrtjtyk

I'm using the vue-table-2 component : https://github.com/matfish2/vue-tables-2 and I'm struggling to make it work as I want.

I have an API (using API Platform) which is already making all the pagination works. So when I fetch for the first time my list of companies it gives the first ten results + the total rows. I store all of this in my vuex store and I am able to display the list in my table (with useVuex false or true so I don't really understand how this parameter works). The issue is I cannot paginate because I only got ten results and can't get the total rows count to change so I do not get the pagination element at the bottom and can't bind something to it to fetch the other pages later.

Since I'm pretty new to VueJs I can't figure out how this should work with my API. Here is my code so far:

My DataTable element :

<v-client-table name="company" :columns="columns" :data="companies" :options="options" :theme="theme" id="dataTable">

          <b-button slot="actions" slot-scope="props" variant="secondary" size="sm" class="btn-pill">Edit</b-button>

</v-client-table>

And my script :

<script>

import Vue from 'vue'

import { ClientTable, Event } from 'vue-tables-2'

import { mapGetters } from 'vuex'



Vue.use(ClientTable)



export default {

  name: 'DataTable',

  components: {

    ClientTable,

    Event,

  },

  data: function() {

    return {

      columns: ['name', 'actions'],

      options: {

        headings: {

          name: 'Name',

          actions: 'Actions',

        },

        sortable: ['name'],

        filterable: ['name'],

        sortIcon: {

          base: 'fa',

          up: 'fa-sort-asc',

          down: 'fa-sort-desc',

          is: 'fa-sort',

        },

        pagination: {

          chunk: 5,

          edge: false,

          nav: 'scroll',

        },

      },

      useVuex: true,

      theme: 'bootstrap4',

      template: 'default',

    }

  },

  computed: {

    ...mapGetters({

      companies: 'companyModule/companies',

      totalCompanies: 'companyModule/totalCompanies',

    }),

  },

}

</script>

This is in my component loading the data where I specify how many items per page I want my api to send me and the page I want:

created() {

    this.$store.dispatch('companyModule/FETCH_COMPANIES', {

      page: 1,

      nbItemPerPage: 10,

    })

  },

My store looks like this:

import ApiService from '@/services/APIService'



export const companyModule = {

  strict: true,

  namespaced: true,

  state: {

    companies: ,

    totalCompanies: 0,

  },

  getters: {

    companies: state => state.companies,

    totalCompanies: state => state.totalCompanies,

  },

  mutations: {

    SET_COMPANIES(state, data) {

      state.companies = data.companies

      state.totalCompanies = data.totalCompanies

    },

  },

  actions: {

    FETCH_COMPANIES(context, payload) {

      payload.entity = 'companies'

      return ApiService.get(payload).then(data => {

        context.commit('SET_COMPANIES', data)

      })

    },

  },

}

When I received my data, I stored everything in my companies state and for now I'm storing everything I'm getting from my API and this looks like this :

{

      "@id": "/api/admin/companies/1",

      "@type": "Company",

      "id": 1,

      "name": "Test Company",

} 

Thanks in advance for your help !