เพิ่ม pagination

src/modules/03_recruiting/views/01_compete/Detail.vue

@@ -18,7 +18,9 @@
       <q-menu>
         <q-list style="min-width: 100px">
           <q-item clickable v-close-popup @click="downloadExam()">
-            <q-item-section class="text-blue">ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section>
+            <q-item-section class="text-blue"
+              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
+            >
           </q-item>
           <q-item clickable v-close-popup @click="downloadPassExam()">
             <q-item-section class="text-primary"
@@ -99,12 +101,23 @@
           </q-tr>
         </template>
       </Table>
+      <div class="row justify-center q-mt-md">
+        <q-pagination
+          v-model="pagination.page"
+          color="grey-8"
+          :max="pagesNumber"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </div>
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -312,6 +325,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const pagesNumber = computed(() => {
+  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
+});
+
 onMounted(async () => {
   loaderPage(false);
   await fetchData();