แก้ pagination ของ TableHistory

src/components/TableHistory.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog :model-value="modal" persistent>
-    <q-card style="min-width: 70vw;">
+    <q-card style="min-width: 70vw">
       <q-form ref="myForm">
         <div class="row items-center q-pa-sm">
           <div class="row">
@@ -89,8 +89,7 @@
             :virtual-scroll-sticky-size-start="48"
             dense
             :pagination-label="paginationLabel"
-            :pagination="initialPagination"
+            v-model:pagination="pagination"
-            :rows-per-page-options="[0]"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -104,6 +103,17 @@
             <template #body="props">
               <slot v-bind="props" name="columns"></slot>
             </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                color="grey-8"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
           </q-table>
         </div>
         <q-separator />
@@ -112,9 +122,10 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, computed } from "vue";
 import type { Pagination } from "@/modules/01_metadata/interface/index/Main";
 
+const rows = ref<any>([]);
 const attrs = ref<any>(useAttrs());
 const filterRef = ref<any>(null);
 // const history = ref<string>("");
@@ -123,6 +134,17 @@ const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const pagesNumber = computed(() => {
+  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
+});
+
 const props = defineProps({
   tittle: String,
   inputfilter: String,