doc/dev/plugins/flex-objects/app/list/components/Table.vue

<template>
    <div>
        <vuetable ref="vuetable"
                  :css="css.table"
                  :fields="store.fields || []"
                  :searchFields="store.searchFields || []"
                  :sortOrder="store.sortOrder"
                  :multi-sort="true"

                  :api-mode="true"
                  :api-url="store.api"
                  :per-page="perPage"
                  :append-params="extraParams"
                  pagination-path="links.pagination"
                  :show-sort-icons="true"
                  @vuetable:pagination-data="onPaginationData"
                  @vuetable:loading="onVuetableLoading"
                  @vuetable:load-success="onVueTableLoadSuccess"
        />

        <div class="flex-list-pagination">
            <vuetable-pagination-info ref="paginationInfo"
                                      :info-template="store.paginationInfo"
                                      :info-no-data-template="store.emptyResult"
                                      :css="css.paginationInfo"
            />
            <vuetable-pagination ref="pagination"
                                 :css="css.pagination"
                                 @vuetable-pagination:change-page="onChangePage"
            />
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vuetable from 'vuetable-2/src/components/Vuetable.vue';
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination.vue";
    import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue';
    import VuetableCssConfig from "../VuetableCssConfig.js";

    import set from 'lodash/set';
    import unset from 'lodash/unset';

    export default {
        props: ['store', 'value'],
        components: {Vuetable, VuetablePagination, VuetablePaginationInfo},
        data: () => ({
            css: VuetableCssConfig,
            perPage: 10,
            data: [],
            extraParams: {}
        }),
        created() {
            this.perPage = this.store.perPage;
            this.data = Object.values(this.store.data);
        },
        mounted() {
            this.$refs.vuetable.setData(this.store.data);
            this.$events.$on('filter-set', event => this.onFilterSet(event));
            this.$events.$on('filter-reset', event => this.onFilterReset());
            this.$events.$on('filter-perPage', event => this.onFilterPerPage(event));
        },
        methods: {
            onPaginationData(paginationData) {
                this.$refs.pagination.setPaginationData(paginationData);
                this.$refs.paginationInfo.setPaginationData(paginationData);
            },
            onFilterSet (filterText) {
                set(this.extraParams, 'filter', filterText);
                Vue.nextTick(() => this.$refs.vuetable.refresh());
            },
            onFilterReset () {
                unset(this.extraParams, 'filter');
                Vue.nextTick(() => this.$refs.vuetable.refresh());
            },
            onFilterPerPage (limit) {
                // console.log('onFilterPerPage', limit, this.store.data);
                this.perPage = limit || this.$refs.paginationInfo.tablePagination.total;
                // this.$refs.vuetable.perPage = limit;
                Vue.nextTick(() => this.$refs.vuetable.refresh());
            },
            onChangePage(page) {
                this.$refs.vuetable.changePage(page);
            },
            onVuetableLoading() {
                this.$emit('input', true);
            },
            onVueTableLoadSuccess() {
                this.$emit('input', false);
            }
        }
    }
</script>