Ajuste de layout

src/components/Table/index.vue

@@ -1,14 +1,16 @@
 <template>
   <q-card class="q-pa-md" flat bordered>
     <q-table
+      :key="key + '-' + pagination.perPage"
       :title="title"
       :rows="rows"
       :columns="columns"
       :row-key="rowKey"
       :loading="loading"
+      :pagination="{ rowsPerPage: pagination.perPage, page: pagination.page }"
+      :rows-per-page-options="[10, 25, 50, 100]"
       flat
       bordered
-      virtual-scroll
       hide-pagination
     >
       <template v-slot:loading>
@@ -21,7 +23,19 @@
     </q-table>
 
     <div class="row q-mt-md">
-      <div class="col-8 flex justify-end">
+      <div class="col-2 flex items-center">
+        <q-select
+          filled
+          v-model="pagination.perPage"
+          :options="[10, 25, 50, 100]"
+          emit-value
+          map-options
+          :disable="loading || rows.length === 0"
+          @update:model-value="updatePagination({ perPage: $event })"
+        />
+      </div>
+
+      <div class="col-8 flex justify-center">
         <q-pagination
           v-model="pagination.page"
           color="primary"
@@ -29,11 +43,11 @@
           :max="pagination.totalPages"
           :disable="loading"
           input
-          @update:model-value="updatePagination"
+          @update:model-value="updatePagination({ page: $event })"
         />
       </div>
 
-      <div class="col-4 flex justify-end items-center">
+      <div class="col-2 flex justify-end items-center">
         <span class="text-grey-5">Total: {{ pagination.total }}</span>
       </div>
     </div>
@@ -46,6 +60,10 @@ import has from "lodash/has";
 export default {
   name: "Table",
   props: {
+    key: {
+      type: String,
+      default: "table-clipperia",
+    },
     columns: {
       type: Array,
       required: true,
@@ -87,8 +105,17 @@ export default {
   },
   emits: ["update:pagination"],
   methods: {
-    updatePagination(page) {
-      this.$emit("update:pagination", { ...this.pagination, page });
+    updatePagination({ page, perPage }) {
+      const newPagination = { ...this.pagination };
+
+      if (page) {
+        newPagination.page = page;
+      }
+      if (perPage) {
+        newPagination.perPage = perPage;
+      }
+
+      this.$emit("update:pagination", newPagination);
     },
   },
 };