ปรับ table

src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, computed } from "vue";
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -9,6 +10,17 @@ const props = defineProps({
     require: true,
   },
 });
+
+const total = computed(() => {
+  return props.row?.length;
+});
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 
 <template>
@@ -22,6 +34,7 @@ const props = defineProps({
     :rows-per-page-options="[10, 25, 50, 100]"
     virtual-scroll
     class="row col-12"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props" class="bg-grey-2">
@@ -40,6 +53,20 @@ const props = defineProps({
         </q-td>
       </q-tr>
     </template>
+
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ total }} รายการ
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </q-table>
 </template>