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

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>