paging

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>
+  

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")

src/modules/02_transfer/views/Main.vue

@@ -1,34 +1,43 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar"
+import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue"
+import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar"
+import { useQuasar } from "quasar";
-import { useRouter } from "vue-router"
+import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin"
+import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/02_transfer/store"
+import { useTransferDataStore } from "@/modules/02_transfer/store";
-import http from "@/plugins/http"
+import http from "@/plugins/http";
-import config from "@/app.config"
+import config from "@/app.config";
-import Table from "@/components/Table.vue"
+import Table from "@/components/Table.vue";
 
-const transferData = useTransferDataStore()
+const transferData = useTransferDataStore();
-const { statusText } = transferData
+const { statusText } = transferData;
-const router = useRouter()
+const router = useRouter();
-const $q = useQuasar()
+const $q = useQuasar();
-const mixin = useCounterMixin()
+const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 
 /**
  * ตั้งค่า pagination
  */
 const initialPagination = ref({
   rowsPerPage: 0,
-})
+});
 
 /**
  * เพิ่มหัวข้อตาราง
  */
-const filter = ref<string>("")
+const filter = ref<string>("");
-const rows = ref<any>([])
+const rows = ref<any>([]);
-const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "statustext"])
+const visibleColumns = ref<String[]>([
+  "no",
+  "date",
+  "position",
+  "noPos",
+  "level",
+  "salary",
+  "transfer",
+  "statustext",
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -102,22 +111,22 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:10%;",
   },
-])
+]);
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-	await fecthListTransfer()
+  await fecthListTransfer();
-})
+});
 
 //นำข้อมูลมาแสดง
 const fecthListTransfer = async () => {
-	showLoader()
+  showLoader();
   await http
     .get(config.API.listUserTransfer())
     .then((res: any) => {
-			let data = res.data.result
+      let data = res.data.result;
       rows.value = data.map((e: any) => ({
         id: e.id,
         date: date2Thai(e.createdAt),
@@ -128,81 +137,139 @@ const fecthListTransfer = async () => {
         level: e.positionLevel,
         salary: e.salary,
         transfer: e.organization,
-			}))
+      }));
     })
     .catch((e: any) => {
-			messageError($q, e)
+      messageError($q, e);
     })
     .finally(() => {
-			hideLoader()
+      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" />
+        <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
+          <div class="q-pb-sm row">
-						style="max-height: 80vh"
+            <div>
-						:rows="rows"
+              <q-btn
-						:columns="columns"
+                size="14px"
-						:filter="filter"
+                flat
-						:visible-columns="visibleColumns"
+                dense
-						v-model:inputfilter="filter"
+                color="blue"
-						v-model:inputvisible="visibleColumns"
+                @click="clickAdd"
-						:pagination="initialPagination"
+                icon="mdi-plus"
-						:inputShow="false"
-						:add="clickAdd"
-						:titleText="''"
               >
-						<template #columns="props">
+                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/` + props.row.id)">
+              </q-btn>
-								<q-td key="no" :props="props">
+            </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 }}
-								</q-td>
+                  </div>
-								<q-td key="date" :props="props">
+                  <div v-else>
-									{{ props.row.date }}
+                    {{ col.value }}
-								</q-td>
+                  </div>
-								<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>
+          </d-table>
         </q-card>
       </div>
     </div>

src/modules/03_retire/views/main.vue

@@ -1,27 +1,33 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar"
+import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue"
+import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar"
+import { useQuasar } from "quasar";
-import { useRouter } from "vue-router"
+import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin"
+import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http"
+import http from "@/plugins/http";
-import config from "@/app.config"
+import config from "@/app.config";
-import { useRestDataStore } from "@/modules/03_retire/store"
+import { useRestDataStore } from "@/modules/03_retire/store";
-import Table from "@/components/Table.vue"
+import Table from "@/components/Table.vue";
 
-const RestData = useRestDataStore()
+const RestData = useRestDataStore();
-const { statusText } = RestData
+const { statusText } = RestData;
-const router = useRouter()
+const router = useRouter();
-const $q = useQuasar()
+const $q = useQuasar();
-const mixin = useCounterMixin()
+const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 
 /**
  * เพิ่มหัวข้อตาราง
  */
-const rows = ref<any>([])
+const rows = ref<any>([]);
-const filter = ref<string>("")
+const filter = ref<string>("");
-const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "statustext"])
+const visibleColumns = ref<String[]>([
+  "no",
+  "placeLeave",
+  "dateStartLeave",
+  "dateLeave",
+  "statustext",
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -68,29 +74,29 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:10%;",
   },
-])
+]);
 
 /**
  * ตั้งค่า pagination
  */
 const initialPagination = ref({
   rowsPerPage: 0,
-})
+});
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(() => {
-	fectListleave()
+  fectListleave();
-})
+});
 
 //นำข้อมูลมาแสดง
 const fectListleave = async () => {
-	showLoader()
+  showLoader();
   await http
     .get(config.API.listUser())
     .then((res: any) => {
-			let data = res.data.result
+      let data = res.data.result;
       rows.value = data.map((e: any) => ({
         id: e.id,
         placeLeave: e.location,
@@ -98,72 +104,139 @@ const fectListleave = async () => {
         dateLeave: date2Thai(e.activeDate),
         status: e.status,
         statustext: statusText(e.status),
-			}))
+      }));
     })
     .catch((e: any) => {
-			messageError($q, e)
+      messageError($q, e);
     })
     .finally(() => {
-			hideLoader()
+      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" />
+        <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
+          <div class="q-pb-sm row">
-						style="max-height: 80vh"
+            <div>
-						:rows="rows"
+              <q-btn
-						:columns="columns"
+                size="14px"
-						:filter="filter"
+                flat
-						:visible-columns="visibleColumns"
+                dense
-						v-model:inputfilter="filter"
+                color="blue"
-						v-model:inputvisible="visibleColumns"
+                @click="clickAdd"
-						:pagination="initialPagination"
+                icon="mdi-plus"
-						:inputShow="false"
-						:add="clickAdd"
-						:titleText="''"
               >
-						<template #columns="props">
+                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/retire/` + props.row.id)">
+              </q-btn>
-								<q-td key="no" :props="props">
+            </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 }}
-								</q-td>
+                  </div>
-								<q-td key="placeLeave" :props="props">
+                  <div v-else>
-									{{ props.row.placeLeave }}
+                    {{ col.value }}
-								</q-td>
+                  </div>
-								<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>
+          </d-table>
         </q-card>
       </div>
     </div>

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>
-
+          <d-table
-          <q-table
             ref="table"
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="id"
+            row-key="name"
             flat
             bordered
             :paging="true"
             dense
-            hide-pagination
+            class="custom-header-table"
-            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">
@@ -309,7 +298,7 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-          </q-table>
+          </d-table>
         </q-card>
       </div>
     </div>