backend pagination and sorting from laravel database

resources/js/views/User/PaymentMethods.vue

@@ -1,7 +1,11 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
+
+            <!--Page title-->
             <FormLabel>{{ $t('user_payments.title') }}</FormLabel>
+
+            <!--Add payment method button-->
             <div class="page-actions">
                 <router-link :to="{name: 'CreatePaymentMethod'}">
                     <MobileActionButton icon="credit-card">
@@ -9,7 +13,11 @@
                     </MobileActionButton>
                 </router-link>
             </div>
-            <DatatableWrapper :paginator="false" :columns="columns" :data="PaymentMethods" class="table">
+
+            <!--Payment methods table-->
+            <DatatableWrapper :table-data="{data: PaymentMethods}" :paginator="false" :columns="columns" class="table">
+
+                <!--Table data content-->
                 <template slot-scope="{ row }">
                     <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
                         <td style="width: 300px">
@@ -24,11 +32,6 @@
                                 </div>
                             </span>
                         </td>
-                        <!--<td>
-                            <span class="cell-item">
-                                <ColorLabel :color="getCardStatusColor(row.data.attributes.status)">{{ getCardStatus(row.data.attributes.status) }}</ColorLabel>
-                            </span>
-                        </td>-->
                         <td>
                             <span class="cell-item">
                                 {{ row.data.attributes.exp_month }} / {{ row.data.attributes.exp_year }}
@@ -46,11 +49,15 @@
                         </td>
                     </tr>
                 </template>
+
+                <!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
+                    </InfoBox>
+                </template>
             </DatatableWrapper>
         </PageTabGroup>
-        <InfoBox v-else>
-            <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
-        </InfoBox>
     </PageTab>
 </template>
 
@@ -92,17 +99,12 @@
                     {
                         label: this.$t('rows.card.number'),
                         field: 'data.attributes.total',
-                        sortable: true
+                        sortable: false
                     },
-                    /*{
-                        label: this.$t('rows.card.status'),
-                        field: 'data.attributes.status',
-                        sortable: true
-                    },*/
                     {
                         label: this.$t('rows.card.expiration'),
                         field: 'data.attributes.total',
-                        sortable: true
+                        sortable: false
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
@@ -170,15 +172,15 @@
                         }
 
                         if (response.status == 200) {
-
                             this.defaultPaymentCard = response.data.default
 
                             this.PaymentMethods = response.data.others.data
                             this.PaymentMethods.push(response.data.default)
                         }
-
+                    }).finally(() => {
                         this.isLoading = false
-                    })
+                    }
+                )
             }
         },
         created() {