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

src/modules/10_registry/02_Government/05_Actposition.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -34,6 +34,7 @@ const visibleColumns = ref<String[]>([
   "posNo",
   "position",
   "status",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -83,10 +84,25 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
   },
+  {
+    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 pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
@@ -144,7 +160,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sortable: true,
     field: "status",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -224,6 +240,7 @@ onMounted(async () => {
   getData();
 });
 </script>
+
 <template>
   <!-- v-if="mode" -->
   <div class="col-12">
@@ -273,6 +290,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -352,6 +370,7 @@ onMounted(async () => {
     :columns="columnsHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;