From 3e508afff5422ebbe986bd7bd36ecb2d8fccf8b1 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 29 Apr 2024 10:56:15 +0700
Subject: [PATCH] paging

---
 src/components/TableD.vue                 |  91 +++++
 src/main.ts                               |   5 +
 src/modules/02_transfer/views/Main.vue    | 421 +++++++++++++---------
 src/modules/03_retire/views/main.vue      | 349 +++++++++++-------
 src/modules/09_scholarship/views/main.vue |  27 +-
 5 files changed, 559 insertions(+), 334 deletions(-)
 create mode 100644 src/components/TableD.vue

diff --git a/src/components/TableD.vue b/src/components/TableD.vue
new file mode 100644
index 0000000..69d8f5d
--- /dev/null
+++ b/src/components/TableD.vue
@@ -0,0 +1,91 @@
+<template>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      v-model:pagination="pagination"
+    >
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ attrs.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-for="(_, slot) in slots" v-slot:[slot]="scope">
+        <slot :name="slot" v-bind="scope || {}" />
+      </template>
+    </q-table>
+  </template>
+  <script setup lang="ts">
+  import { ref, useAttrs, useSlots } from "vue";
+  const attrs = ref<any>(useAttrs());
+  const slots = ref<any>(useSlots());
+  
+  const props = defineProps({
+    paging: {
+      type: Boolean,
+      defualt: false,
+    },
+  });
+  
+  
+  const pagination = ref({
+    sortBy: "desc",
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+  
+  const paginationLabel = (start: string, end: string, total: string) => {
+    if (props.paging == true)
+      return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
+    else return start + "-" + end + " ใน " + total;
+  };
+  </script>
+  
+  <style lang="scss">
+  .icon-color {
+    color: #4154b3;
+  }
+  .custom-header-table {
+    height: auto;
+    .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;
+      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>
+  
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 6e90f59..5d78ba9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -33,6 +33,11 @@ app.component(
 	defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
 )
 
+app.component(
+	"d-table",
+	defineAsyncComponent(() => import("@/components/TableD.vue"))
+  );
+
 app.config.globalProperties.$http = http
 
 app.mount("#app")
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index 4df1182..48e8f03 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -1,211 +1,278 @@
 <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"
+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
+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,
-})
+  rowsPerPage: 0,
+});
 
 /**
  * เพิ่มหัวข้อตาราง
  */
-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"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </div>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filter"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            :rows-per-page-options="[10, 25, 50, 100]"
+          >
+            <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="router.push(`/transfer/` + props.row.id)"
+                >
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card>
+      </div>
+    </div>
+  </div>
 </template>
 <style></style>
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index 211b62f..c00633e 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -1,172 +1,245 @@
 <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 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"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </div>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filter"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            :rows-per-page-options="[10, 25, 50, 100]"
+          >
+            <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="router.push(`/retire/` + props.row.id)"
+                >
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </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..9a9b6cc 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;
     })
@@ -255,34 +258,20 @@ onMounted(async () => {
               />
             </div>
           </q-toolbar>
-
-          <q-table
+          <d-table
             ref="table"
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="id"
+            row-key="name"
             flat
             bordered
             :paging="true"
             dense
-            hide-pagination
-            class="custom-table2"
+            class="custom-header-table"
             :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">
@@ -309,7 +298,7 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-          </q-table>
+          </d-table>
         </q-card>
       </div>
     </div>