ทะเบียนประวัติ == > TableSort

src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue

@@ -142,6 +142,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 /** เปิด dialog */
 function openDialogEdit() {
@@ -690,9 +693,9 @@ onMounted(() => {
           :rows="rowsHistory"
           flat
           bordered
-          :paging="true"
           dense
           :visible-columns="visibleColumnsHistory"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">

src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue

@@ -126,6 +126,18 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const visibleColumns = ref<String[]>([
   "level",
@@ -134,10 +146,10 @@ const visibleColumns = ref<String[]>([
   "refCommandNo",
   "refCommandDate",
   "date",
+  "lastUpdatedAt",
 ]);
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 const edit = ref<boolean>(false); //สถานะการแก้ไข
@@ -447,7 +459,6 @@ onMounted(() => {
     :rows="rows"
     :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
   >
     >

src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue

@@ -139,9 +139,8 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
 });
 
 /** fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย*/
@@ -245,10 +244,8 @@ watch(modal, (status) => {
           dense
           :columns="columns"
           :rows="rows"
-          :paging="true"
-          :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          v-model:pagination="historyPagination"
+          v-model:pagination="pagination"
         >
           >
           <template v-slot:header="props">

src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue

@@ -48,10 +48,7 @@ const profileId = ref<string>(
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 const rowsTotal = ref<ResponseTotalObject[]>([]);
 const id = ref<string>("");
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
+
 const mode = ref<string>("table");
 const filterKeyword = ref<string>("");
 
@@ -129,7 +126,9 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -156,6 +155,18 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const visibleColumns = ref<String[]>([
   "no",
@@ -164,8 +175,13 @@ const visibleColumns = ref<String[]>([
   "numLeave",
   "status",
   "reason",
+  "lastUpdatedAt",
 ]);
 
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
+
 const statusLeave = (val: string) => {
   switch (val) {
     case "waitting":
@@ -415,14 +431,13 @@ async function getData() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data.map((item: DataLeave) => ({
+        ...item,
         id: item.id,
         typeLeave: item.leaveType.name,
         code: item.leaveType.refCommandDate,
         dateStartLeave: item.dateLeaveStart,
         dateEndLeave: item.dateLeaveEnd,
         numLeave: item.leaveDays,
-        status: item.status,
-        reason: item.reason,
         typeLeaveId: item.leaveTypeId,
       }));
       rowsMain.value = rows.value;
@@ -533,9 +548,7 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :grid="mode === 'card'"
-    :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
   >
     >

src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue

@@ -95,7 +95,9 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -159,8 +161,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdatedAt",
 ]);
 const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** function fetch ข้อมูลประวัติการแก้ไขการลา */
@@ -298,9 +299,7 @@ watch(modal, (status) => {
           dense
           :columns="columns"
           :rows="rows"
-          :paging="true"
           v-model:pagination="historyPagination"
-          :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
         >
           >

src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue

@@ -135,6 +135,18 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const visibleColumns = ref<String[]>([
   "dateStart",
@@ -143,10 +155,10 @@ const visibleColumns = ref<String[]>([
   "reference",
   "refCommandNo",
   "refCommandDate",
+  "lastUpdatedAt",
 ]);
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** เปิด dialog */
@@ -296,7 +308,7 @@ async function uploadProfile(id: string) {
     )
     .then(async (res) => {
       uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
-      await uploadFileURL(uploadUrl.value, fileUpload.value,id);
+      await uploadFileURL(uploadUrl.value, fileUpload.value, id);
     })
     .catch((err) => {
       messageError($q, err);
@@ -308,7 +320,7 @@ async function uploadProfile(id: string) {
  * @param uploadUrl Path อัปโหลดไฟล์
  * @param file ไฟล์เอกสาร
  */
-async function uploadFileURL(uploadUrl: string, file: any,id:string) {
+async function uploadFileURL(uploadUrl: string, file: any, id: string) {
   await axios
     .put(uploadUrl, file, {
       headers: {
@@ -326,7 +338,7 @@ async function uploadFileURL(uploadUrl: string, file: any,id:string) {
     });
 }
 
-async function isUploadFn(id:string) {
+async function isUploadFn(id: string) {
   await http
     .patch(config.API.profileNewDutyByDutyId(id, empType.value), {
       isUpload: fileUpload.value ? true : false,
@@ -479,8 +491,6 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :grid="mode === 'card'"
-    :paging="true"
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
     v-model:pagination="pagination"
   >

src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue

@@ -135,8 +135,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdatedAt",
 ]);
 const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
@@ -240,9 +239,7 @@ watch(modal, (status) => {
           dense
           :columns="columns"
           :rows="rows"
-          :paging="true"
           v-model:pagination="historyPagination"
-          :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
         >
           >

src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue

@@ -55,6 +55,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -65,6 +67,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posNo",
@@ -74,6 +78,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -83,6 +89,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refCommandNo",
@@ -92,6 +100,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "refCommandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -104,6 +114,23 @@ const columns = ref<QTableProps["columns"]>([
     format(val, row) {
       return row.status ? "ใช้งาน" : "-";
     },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<String[]>([
@@ -113,7 +140,11 @@ const visibleColumns = ref<String[]>([
   "position",
   "refCommandNo",
   "status",
+  "lastUpdatedAt",
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 /** Dialog*/
 const isStatusEdit = ref<boolean>(false);
@@ -310,9 +341,8 @@ onMounted(() => {
     dense
     :columns="columns"
     :rows="rows"
-    :paging="true"
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     >
     <template v-slot:header="props">

src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPosHistory.vue

@@ -40,6 +40,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -50,6 +52,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posNo",
@@ -59,6 +63,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -68,6 +74,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -80,6 +88,8 @@ const columns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -89,6 +99,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -99,6 +111,8 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<String[]>([
@@ -111,8 +125,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdatedAt",
 ]);
 const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
@@ -202,9 +215,7 @@ watch(modal, (status) => {
           dense
           :columns="columns"
           :rows="rows"
-          :paging="true"
           v-model:pagination="historyPagination"
-          :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
         >
           >

src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue

@@ -58,6 +58,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "agency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateStart",
@@ -68,6 +70,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -78,6 +82,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandNo",
@@ -87,6 +93,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "document",
@@ -96,6 +104,20 @@ const columns = ref<QTableProps["columns"]>([
     field: "document",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<String[]>([
@@ -104,8 +126,13 @@ const visibleColumns = ref<String[]>([
   "dateEnd",
   "commandNo",
   "document",
+  "lastUpdatedAt",
 ]);
 
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
+
 /** Dialog*/
 const isStatusEdit = ref<boolean>(false);
 const isUpload = ref<boolean>(false);
@@ -405,9 +432,8 @@ onMounted(() => {
     dense
     :columns="columns"
     :rows="rows"
-    :paging="true"
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     >
     <template v-slot:header="props">

src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernmentHistory.vue

@@ -39,6 +39,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "agency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateStart",
@@ -49,6 +51,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -59,6 +63,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandNo",
@@ -68,6 +74,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "document",
@@ -77,6 +85,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "document",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -86,6 +96,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -96,6 +108,8 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<String[]>([
@@ -108,8 +122,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdatedAt",
 ]);
 const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue

@@ -68,6 +68,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "amount",
@@ -78,6 +82,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionSalaryAmount",
@@ -88,6 +96,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "mouthSalaryAmount",
@@ -98,6 +110,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
   {
@@ -115,6 +131,10 @@ const baseColumns = ref<QTableProps["columns"]>([
         ? row.posNo
         : "-";
     },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionName",
@@ -124,6 +144,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionType",
@@ -133,6 +157,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -151,6 +179,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandName",
@@ -160,6 +190,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refCommandNo",
@@ -174,6 +206,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "remark",
@@ -183,6 +217,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const columns = computed(() => {
@@ -211,8 +247,7 @@ const visibleColumns = ref<string[]>([
   "remark",
 ]);
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "",
 });
 
 const formDataSalary = reactive<FormSalaryNew>({
@@ -729,9 +764,7 @@ onMounted(() => {
     dense
     :columns="columns"
     :rows="rows"
-    :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
   >
     <template v-slot:header="props">

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue

@@ -42,6 +42,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "amount",
@@ -52,6 +56,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionSalaryAmount",
@@ -62,6 +70,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "mouthSalaryAmount",
@@ -72,6 +84,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "oc",
@@ -81,6 +97,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "oc",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionName",
@@ -90,6 +108,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posNo",
@@ -106,6 +126,8 @@ const baseColumns = ref<QTableProps["columns"]>([
         ? row.posNo
         : "-";
     },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLine",
@@ -115,6 +137,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionLine",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionPathSide",
@@ -124,6 +148,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionPathSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionType",
@@ -133,6 +159,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -151,6 +179,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutive",
@@ -160,6 +190,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutiveSide",
@@ -169,6 +201,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionExecutiveSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "salaryClass",
@@ -178,6 +212,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "salaryClass",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandName",
@@ -187,6 +223,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refCommandNo",
@@ -201,6 +239,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "remark",
@@ -210,6 +250,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -219,6 +261,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -229,6 +273,8 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
@@ -265,20 +311,14 @@ const columns = computed(() => {
   return baseColumns.value;
 });
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** function fetch ข้อมูลประวัติการแก้ไข*/
 function fetchListHistory() {
   showLoader();
   http
-    .get(
-      config.API.profileListSalaryHistoryNew(
-        salaryId.value,
-        empType.value
-      )
-    )
+    .get(config.API.profileListSalaryHistoryNew(salaryId.value, empType.value))
     .then((res) => {
       rows.value = res.data.result;
       rowsMain.value = res.data.result;
@@ -364,9 +404,7 @@ watch(
           dense
           :columns="columns"
           :rows="rows"
-          :paging="true"
           v-model:pagination="pagination"
-          :rows-per-page-options="[10, 20, 50, 100]"
           :visible-columns="visibleColumns"
         >
           <template v-slot:header="props">