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

src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue

@@ -157,6 +157,10 @@ const columns = ref<QTableColumn[]>([
     field: "positionEmployeeGroupId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionEmployeeLineId",
@@ -166,6 +170,10 @@ const columns = ref<QTableColumn[]>([
     field: "positionEmployeeLineId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionEmployeePositionId",
@@ -175,6 +183,10 @@ const columns = ref<QTableColumn[]>([
     field: "positionEmployeePositionId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "employeeOc",
@@ -184,6 +196,10 @@ const columns = ref<QTableColumn[]>([
     field: "employeeOc",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "employeeTypeIndividual",
@@ -193,6 +209,10 @@ const columns = ref<QTableColumn[]>([
     field: "employeeTypeIndividual",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "employeeWage",
@@ -202,6 +222,10 @@ const columns = ref<QTableColumn[]>([
     field: "employeeWage",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "employeeMoneyIncrease",
@@ -211,6 +235,10 @@ const columns = ref<QTableColumn[]>([
     field: "employeeMoneyIncrease",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "employeeMoneyAllowance",
@@ -220,6 +248,10 @@ const columns = ref<QTableColumn[]>([
     field: "employeeMoneyAllowance",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "employeeMoneyEmployee",
@@ -229,6 +261,10 @@ const columns = ref<QTableColumn[]>([
     field: "employeeMoneyEmployee",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "employeeMoneyEmployer",
@@ -238,18 +274,26 @@ const columns = ref<QTableColumn[]>([
     field: "employeeMoneyEmployer",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
@@ -257,6 +301,10 @@ const columns = ref<QTableColumn[]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<String[]>([
@@ -270,9 +318,12 @@ const visibleColumns = ref<String[]>([
   "employeeMoneyAllowance",
   "employeeMoneyEmployee",
   "employeeMoneyEmployer",
-  "createdFullName",
-  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 function onClickHistory() {
   showLoader();
@@ -630,8 +681,8 @@ onMounted(() => {
           dense
           :columns="columns"
           :rows="rows"
-          :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/Employee/02_Employment.vue

@@ -46,32 +46,44 @@ const columns = ref<QTableProps["columns"]>([
     name: "date",
     align: "left",
     label: "วันที่จ้าง",
-    sortable: false,
+    sortable: true,
     field: "date",
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "command",
     align: "left",
     label: "คำสั่งจ้าง",
-    sortable: false,
+    sortable: true,
     field: "command",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
@@ -79,14 +91,25 @@ 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
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
   "date",
   "command",
-  "createdFullName",
-  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
+const pagination = ref({
+  sortBy: "",
+});
+const paginationHistory = ref({
+  sortBy: "lastUpdatedAt",
+});
+
 const modalEmployment = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const employmentId = ref<string>("");
@@ -301,9 +324,9 @@ onMounted(() => {
       :columns="columns?.slice(0, 2)"
       :rows="rows"
       row-key="dateEmployment"
-      :paging="true"
       dense
       :visible-columns="visibleColumns"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -488,8 +511,8 @@ onMounted(() => {
           dense
           :columns="columns"
           :rows="rowsHistory"
-          :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
+          v-model:pagination="paginationHistory"
         >
           >
           <template v-slot:header="props">
@@ -512,8 +535,6 @@ onMounted(() => {
       </q-card-section>
 
       <q-separator />
-
-      <q-card-actions align="right"> </q-card-actions>
     </q-card>
   </q-dialog>
 </template>