From bebdfbfce532a94501f268c8d0f921b0d14de3a2 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 29 Apr 2024 14:46:11 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20paging?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/Main.vue    | 498 ++++++++++++++--------
 src/modules/03_retire/views/main.vue      | 378 ++++++++++------
 src/modules/09_scholarship/views/main.vue | 120 +++---
 3 files changed, 619 insertions(+), 377 deletions(-)

diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index 4df1182..ce7ce9d 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -1,211 +1,341 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar"
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-import { useCounterMixin } from "@/stores/mixin"
-import { useTransferDataStore } from "@/modules/02_transfer/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import Table from "@/components/Table.vue"
-
-const transferData = useTransferDataStore()
-const { statusText } = transferData
-const router = useRouter()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, messageError, showLoader, hideLoader } = mixin
-
-/**
- * ตั้งค่า pagination
- */
-const initialPagination = ref({
-	rowsPerPage: 0,
-})
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/02_transfer/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import Table from "@/components/Table.vue";
+const currentPage = ref<number>(1);
+const transferData = useTransferDataStore();
+const { statusText } = transferData;
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 /**
  * เพิ่มหัวข้อตาราง
  */
-const filter = ref<string>("")
-const rows = ref<any>([])
-const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "statustext"])
+const filter = ref<string>("");
+const rows = ref<any>([]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "date",
+  "position",
+  "noPos",
+  "level",
+  "salary",
+  "transfer",
+  "statustext",
+]);
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "no",
-		align: "left",
-		label: "ลำดับ",
-		sortable: true,
-		field: "no",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:5px;",
-	},
-	{
-		name: "date",
-		align: "left",
-		label: "วันที่",
-		sortable: true,
-		field: "date",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "position",
-		align: "left",
-		label: "ตำแหน่ง",
-		sortable: true,
-		field: "position",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "noPos",
-		align: "left",
-		label: "ตำแหน่งเลขที่",
-		sortable: true,
-		field: "noPos",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "level",
-		align: "left",
-		label: "อันดับ/ระดับ",
-		sortable: true,
-		field: "level",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "salary",
-		align: "left",
-		label: "เงินเดือน",
-		sortable: true,
-		field: "salary",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "transfer",
-		align: "left",
-		label: "หน่วยงานที่ขอโอนไป",
-		sortable: true,
-		field: "transfer",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "statustext",
-		align: "left",
-		label: "สถานะ",
-		sortable: true,
-		field: "statustext",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:10%;",
-	},
-])
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "noPos",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "noPos",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "อันดับ/ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "transfer",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "transfer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:10%;",
+  },
+]);
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-	await fecthListTransfer()
-})
+  await fecthListTransfer();
+});
 
 //นำข้อมูลมาแสดง
 const fecthListTransfer = async () => {
-	showLoader()
-	await http
-		.get(config.API.listUserTransfer())
-		.then((res: any) => {
-			let data = res.data.result
-			rows.value = data.map((e: any) => ({
-				id: e.id,
-				date: date2Thai(e.createdAt),
-				status: e.status,
-				statustext: statusText(e.status),
-				position: e.organizationPositionOld,
-				noPos: e.posNo,
-				level: e.positionLevel,
-				salary: e.salary,
-				transfer: e.organization,
-			}))
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
+  showLoader();
+  await http
+    .get(config.API.listUserTransfer())
+    .then((res: any) => {
+      let data = res.data.result;
+      rows.value = data.map((e: any) => ({
+        id: e.id,
+        date: date2Thai(e.createdAt),
+        status: e.status,
+        statustext: statusText(e.status),
+        position: e.organizationPositionOld,
+        noPos: e.posNo,
+        level: e.positionLevel,
+        salary: e.salary,
+        transfer: e.organization,
+      }));
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 /**
  * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
  */
 const clickAdd = async () => {
-	router.push(`/transfer/add`)
-}
+  router.push(`/transfer/add`);
+};
 
 /**
  * กดเพื่อย้อนกลับ
  */
 const clickBack = () => {
-	router.push(`/`)
-}
+  router.push(`/`);
+};
 </script>
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="clickBack" />
-				เรื่องขอโอน
-			</div>
-			<div class="col-12">
-				<q-card bordered class="q-pa-md">
-					<Table
-						style="max-height: 80vh"
-						:rows="rows"
-						:columns="columns"
-						:filter="filter"
-						:visible-columns="visibleColumns"
-						v-model:inputfilter="filter"
-						v-model:inputvisible="visibleColumns"
-						:pagination="initialPagination"
-						:inputShow="false"
-						:add="clickAdd"
-						:titleText="''"
-					>
-						<template #columns="props">
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/` + props.row.id)">
-								<q-td key="no" :props="props">
-									{{ props.rowIndex + 1 }}
-								</q-td>
-								<q-td key="date" :props="props">
-									{{ props.row.date }}
-								</q-td>
-								<q-td key="position" :props="props">
-									{{ props.row.position }}
-								</q-td>
-								<q-td key="noPos" :props="props">
-									{{ props.row.noPos }}
-								</q-td>
-								<q-td key="level" :props="props">
-									{{ props.row.level }}
-								</q-td>
-								<q-td key="salary" :props="props">
-									{{ props.row.salary }}
-								</q-td>
-								<q-td key="transfer" :props="props">
-									{{ props.row.transfer }}
-								</q-td>
-								<q-td key="statustext" :props="props">
-									{{ props.row.statustext }}
-								</q-td>
-							</q-tr>
-						</template>
-					</Table>
-				</q-card>
-			</div>
-		</div>
-	</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="clickBack"
+        />
+        เรื่องขอโอน
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <div class="q-pb-sm row">
+            <div>
+              <q-btn
+                size="14px"
+                flat
+                dense
+                color="blue"
+                @click="clickAdd"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+              </q-btn>
+            </div>
+            <q-space />
+            <div class="items-center q-gutter-sm" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs"
+              >
+                <template> </template>
+              </q-select>
+            </div>
+          </div>
+          <div>
+            <q-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="id"
+              class="custom-table2"
+              style="max-height: 80vh"
+              :rows="rows"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ rows.length }} รายการ
+                <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>
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    style="color: #000000; font-weight: 500"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    @click="router.push(`/transfer/` + props.row.id)"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
 </template>
-<style></style>
+<style scoped lang="scss">
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index 211b62f..1122298 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -1,172 +1,274 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar"
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-import { useCounterMixin } from "@/stores/mixin"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRestDataStore } from "@/modules/03_retire/store"
-import Table from "@/components/Table.vue"
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRestDataStore } from "@/modules/03_retire/store";
+import Table from "@/components/Table.vue";
 
-const RestData = useRestDataStore()
-const { statusText } = RestData
-const router = useRouter()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, messageError, showLoader, hideLoader } = mixin
+const RestData = useRestDataStore();
+const { statusText } = RestData;
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
  * เพิ่มหัวข้อตาราง
  */
-const rows = ref<any>([])
-const filter = ref<string>("")
-const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "statustext"])
+const rows = ref<any>([]);
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>([
+  "no",
+  "placeLeave",
+  "dateStartLeave",
+  "dateLeave",
+  "statustext",
+]);
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "no",
-		align: "left",
-		label: "ลำดับ",
-		sortable: true,
-		field: "no",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:5%;",
-	},
-	{
-		name: "placeLeave",
-		align: "left",
-		label: "สถานที่ยื่นขอลาออกจากราชการ",
-		sortable: true,
-		field: "placeLeave",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "dateStartLeave",
-		align: "left",
-		label: "วันที่ยื่นขอลาออกจากราชการ",
-		sortable: true,
-		field: "dateStartLeave",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "dateLeave",
-		align: "left",
-		label: "วันที่ขอลาออกจากราชการ",
-		sortable: true,
-		field: "dateLeave",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "statustext",
-		align: "left",
-		label: "สถานะ",
-		sortable: true,
-		field: "statustext",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:10%;",
-	},
-])
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5%;",
+  },
+  {
+    name: "placeLeave",
+    align: "left",
+    label: "สถานที่ยื่นขอลาออกจากราชการ",
+    sortable: true,
+    field: "placeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วันที่ยื่นขอลาออกจากราชการ",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "dateLeave",
+    align: "left",
+    label: "วันที่ขอลาออกจากราชการ",
+    sortable: true,
+    field: "dateLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:10%;",
+  },
+]);
 
 /**
  * ตั้งค่า pagination
  */
 const initialPagination = ref({
-	rowsPerPage: 0,
-})
+  rowsPerPage: 0,
+});
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(() => {
-	fectListleave()
-})
+  fectListleave();
+});
 
 //นำข้อมูลมาแสดง
 const fectListleave = async () => {
-	showLoader()
-	await http
-		.get(config.API.listUser())
-		.then((res: any) => {
-			let data = res.data.result
-			rows.value = data.map((e: any) => ({
-				id: e.id,
-				placeLeave: e.location,
-				dateStartLeave: date2Thai(e.sendDate),
-				dateLeave: date2Thai(e.activeDate),
-				status: e.status,
-				statustext: statusText(e.status),
-			}))
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
+  showLoader();
+  await http
+    .get(config.API.listUser())
+    .then((res: any) => {
+      let data = res.data.result;
+      rows.value = data.map((e: any) => ({
+        id: e.id,
+        placeLeave: e.location,
+        dateStartLeave: date2Thai(e.sendDate),
+        dateLeave: date2Thai(e.activeDate),
+        status: e.status,
+        statustext: statusText(e.status),
+      }));
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 /**
  * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มลาออก
  */
 const clickAdd = async () => {
-	router.push(`/retire/add`)
-}
+  router.push(`/retire/add`);
+};
 
 /**
  * กดเพื่อย้อนกลับ
  */
 const clickBack = () => {
-	router.push(`/`)
-}
+  router.push(`/`);
+};
 </script>
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="clickBack" />
-				ลาออก
-			</div>
-			<div class="col-12">
-				<q-card bordered class="q-pa-md">
-					<Table
-						style="max-height: 80vh"
-						:rows="rows"
-						:columns="columns"
-						:filter="filter"
-						:visible-columns="visibleColumns"
-						v-model:inputfilter="filter"
-						v-model:inputvisible="visibleColumns"
-						:pagination="initialPagination"
-						:inputShow="false"
-						:add="clickAdd"
-						:titleText="''"
-					>
-						<template #columns="props">
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/retire/` + props.row.id)">
-								<q-td key="no" :props="props">
-									{{ props.rowIndex + 1 }}
-								</q-td>
-								<q-td key="placeLeave" :props="props">
-									{{ props.row.placeLeave }}
-								</q-td>
-								<q-td key="dateStartLeave" :props="props">
-									{{ props.row.dateStartLeave }}
-								</q-td>
-								<q-td key="dateStartLeave" :props="props">
-									{{ props.row.dateStartLeave }}
-								</q-td>
-								<q-td key="statustext" :props="props">
-									{{ props.row.statustext }}
-								</q-td>
-							</q-tr>
-						</template>
-					</Table>
-				</q-card>
-			</div>
-		</div>
-	</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="clickBack"
+        />
+        ลาออก
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <div class="q-pb-sm row">
+            <div>
+              <q-btn
+                size="14px"
+                flat
+                dense
+                color="blue"
+                @click="clickAdd"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+              </q-btn>
+            </div>
+            <q-space />
+            <div class="items-center q-gutter-sm" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs"
+              >
+                <template> </template>
+              </q-select>
+            </div>
+          </div>
+          <div>
+            <q-table
+              flat
+              bordered
+              dense
+              row-key="id"
+              class="custom-table2"
+              style="max-height: 80vh"
+              :rows="rows"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ rows.length }} รายการ
+                <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>
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    style="color: #000000; font-weight: 500"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    @click="router.push(`/retire/` + props.row.id)"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
 </template>
 <style></style>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index 5ab249b..e24a317 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -80,7 +80,10 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 /** ดึงข้อมูล */
 function getData() {
   http
-    .get(config.API.developmentScholarship + `/user/${profilId.value}?year=${year.value}&type=${type.value}`)
+    .get(
+      config.API.developmentScholarship +
+        `/user/${profilId.value}?year=${year.value}&type=${type.value}`
+    )
     .then((res) => {
       rows.value = res.data.result;
     })
@@ -256,60 +259,67 @@ onMounted(async () => {
             </div>
           </q-toolbar>
 
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="id"
-            flat
-            bordered
-            :paging="true"
-            dense
-            hide-pagination
-            class="custom-table2"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
-          >
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="currentPage"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.id"
-                  @click="onEdit(props.row.id)"
-                >
-                  <div v-if="col.name == 'scholarshipYear'">
-                    {{ col.value ? col.value + 543 : "-" }}
-                  </div>
-                  <div v-else-if="col.name == 'scholarshipType'">
-                    {{ col.value ? convertType(col.value) : "-" }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </q-table>
+          <div>
+            <q-table
+              flat
+              bordered
+              dense
+              row-key="id"
+              class="custom-table2"
+              style="max-height: 80vh"
+              :rows="rows"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ rows.length }} รายการ
+                <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>
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    style="color: #000000; font-weight: 500"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    @click="onEdit(props.row.id)"
+                  >
+                    <div v-if="col.name == 'scholarshipYear'">
+                      {{ col.value ? col.value + 543 : "-" }}
+                    </div>
+                    <div v-else-if="col.name == 'scholarshipType'">
+                      {{ col.value ? convertType(col.value) : "-" }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
         </q-card>
       </div>
     </div>