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

This reverts commit 3e508afff5422ebbe986bd7bd36ecb2d8fccf8b1.
---
 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, 334 insertions(+), 559 deletions(-)
 delete mode 100644 src/components/TableD.vue

diff --git a/src/components/TableD.vue b/src/components/TableD.vue
deleted file mode 100644
index 69d8f5d..0000000
--- a/src/components/TableD.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<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 5d78ba9..6e90f59 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -33,11 +33,6 @@ 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 48e8f03..4df1182 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -1,278 +1,211 @@
 <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">
-          <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>
+	<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>
 </template>
 <style></style>
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index c00633e..211b62f 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -1,245 +1,172 @@
 <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">
-          <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>
+	<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>
 </template>
 <style></style>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index 9a9b6cc..5ab249b 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -80,10 +80,7 @@ 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;
     })
@@ -258,20 +255,34 @@ onMounted(async () => {
               />
             </div>
           </q-toolbar>
-          <d-table
+
+          <q-table
             ref="table"
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="name"
+            row-key="id"
             flat
             bordered
             :paging="true"
             dense
-            class="custom-header-table"
+            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">
@@ -298,7 +309,7 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-          </d-table>
+          </q-table>
         </q-card>
       </div>
     </div>