fix : style & resposive

src/views/MyPackage/List.vue

@@ -52,9 +52,6 @@
                                 <td class="title font-weight-light">
                                     {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
                                 </td>
-                                <td class="title font-weight-light">
-                                    {{ item.user ? item.user.name : '' | text_20_letter }}
-                                </td>
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="title font-weight-light">{{ item.status }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
@@ -134,7 +131,7 @@
                 <v-divider/>
                 <div class="text-xs-center" v-if="lastPage > 1">
                     <v-pagination color="black" v-model="currentPage" :length="lastPage"
-                                  :total-visible="6"></v-pagination>
+                                  :total-visible="6"/>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
@@ -158,37 +155,12 @@ import toast from "@/services/global/toast.service";
 export default {
     data: () => ({
         headers: [
-            {
-                sortable: true,
-                text: "Package ID",
-                value: "Package ID"
-            },
-            {
-                sortable: true,
-                text: "Name",
-                value: "name"
-            },
-            {
-                sortable: true,
-                text: "Hospital",
-                value: "Hospital"
-            },
-            {
-                sortable: true,
-                text: "Description",
-                value: "description"
-            },
-            {
-                sortable: true,
-                text: "Status",
-                value: "status"
-            },
-            {
-                sortable: false,
-                text: "Action",
-                value: "action",
-                align: "left"
-            }
+            {sortable: false, text: "Package ID", value: "Package ID"},
+            {sortable: false, text: "Name", value: "name"},
+            {sortable: false, text: "Hospital", value: "Hospital"},
+            {sortable: false, text: "Description", value: "description"},
+            {sortable: false, text: "Status", value: "status"},
+            {sortable: false, text: "Action", value: "action", align: "center"}
         ],
         filter: {
             name: '',
@@ -218,8 +190,8 @@ export default {
             if (result && result.status == 200) {
                 const {data, meta} = result.data;
                 this.items = data;
-                this.currentPage = meta.current_page;
-                this.lastPage = meta.last_page;
+                this.currentPage = meta? meta.current_page : 1;
+                this.lastPage =meta? meta.last_page : 1;
             }
             this.loadMedicalCenters();
         },