From df93a526fa74d69013fb759a408f84f9df4e87ce Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 26 Feb 2025 15:30:25 +0700
Subject: [PATCH] sort

---
 .../01_metadata/components/personal/01_Prefix.vue  | 11 ++++++-----
 .../01_metadata/components/personal/02_Rank.vue    |  9 +++++----
 .../01_metadata/components/personal/03_Gender.vue  |  9 +++++----
 .../components/personal/04_Relationship.vue        |  9 +++++----
 .../components/personal/05_BloodGroup.vue          |  9 +++++----
 .../components/personal/06_Religion.vue            |  5 ++++-
 .../components/personal/07_Province.vue            |  8 +++++---
 .../components/personal/08_EducationLevel.vue      |  5 ++++-
 .../components/personal/province/01_District.vue   |  9 +++++----
 .../personal/province/02_SubDistrict.vue           |  8 +++++---
 .../01_metadata/components/position/02_Type.vue    |  4 +++-
 src/modules/01_metadata/views/05_insignia.vue      |  2 +-
 src/modules/02_users/views/01_user.vue             | 14 +++++++-------
 .../02_users/views/02_rolesAndPermissions.vue      |  9 ++++++---
 src/modules/02_users/views/03_permissionsView.vue  | 14 +++++++-------
 src/modules/02_users/views/05_responsIbilities.vue | 14 +++++++-------
 .../02_users/views/page01_ManagementRoleUser.vue   |  9 ++++++---
 src/modules/05_command/views/salaryLists.vue       |  2 +-
 18 files changed, 87 insertions(+), 63 deletions(-)

diff --git a/src/modules/01_metadata/components/personal/01_Prefix.vue b/src/modules/01_metadata/components/personal/01_Prefix.vue
index 272d4311..fb1978e1 100644
--- a/src/modules/01_metadata/components/personal/01_Prefix.vue
+++ b/src/modules/01_metadata/components/personal/01_Prefix.vue
@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
- * Table
- */
+/** Table*/
 const TABLE_COLUMNS = [
   {
     name: "prefix",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "prefix",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -230,10 +231,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -276,7 +277,7 @@ onMounted(async () => {
           </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
-          {{ col.value }}
+          {{ col.value ?? "-" }}
         </q-td>
       </q-tr>
     </template>
diff --git a/src/modules/01_metadata/components/personal/02_Rank.vue b/src/modules/01_metadata/components/personal/02_Rank.vue
index fb43f6ed..dd8583f6 100644
--- a/src/modules/01_metadata/components/personal/02_Rank.vue
+++ b/src/modules/01_metadata/components/personal/02_Rank.vue
@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
- * Table
- */
+/** Table*/
 const columns = [
   {
     name: "rank",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "rank",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +228,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/03_Gender.vue b/src/modules/01_metadata/components/personal/03_Gender.vue
index 33b39b1d..d29a6a0d 100644
--- a/src/modules/01_metadata/components/personal/03_Gender.vue
+++ b/src/modules/01_metadata/components/personal/03_Gender.vue
@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
- * Table
- */
+/** Table*/
 const columns = [
   {
     name: "gender",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "gender",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +228,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/04_Relationship.vue b/src/modules/01_metadata/components/personal/04_Relationship.vue
index a2e4dad9..f5dfe02b 100644
--- a/src/modules/01_metadata/components/personal/04_Relationship.vue
+++ b/src/modules/01_metadata/components/personal/04_Relationship.vue
@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
- * Table
- */
+/** Table*/
 const columns = [
   {
     name: "relationship",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "relationship",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +228,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/05_BloodGroup.vue b/src/modules/01_metadata/components/personal/05_BloodGroup.vue
index 4ddb228f..96023294 100644
--- a/src/modules/01_metadata/components/personal/05_BloodGroup.vue
+++ b/src/modules/01_metadata/components/personal/05_BloodGroup.vue
@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
- * Table
- */
+/** Table*/
 const columns = [
   {
     name: "bloodGroup",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "bloodGroup",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -226,10 +227,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/06_Religion.vue b/src/modules/01_metadata/components/personal/06_Religion.vue
index e5a91ebd..cd150de3 100644
--- a/src/modules/01_metadata/components/personal/06_Religion.vue
+++ b/src/modules/01_metadata/components/personal/06_Religion.vue
@@ -71,6 +71,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "religion",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +230,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/07_Province.vue b/src/modules/01_metadata/components/personal/07_Province.vue
index 62f24abe..1fb84b5e 100644
--- a/src/modules/01_metadata/components/personal/07_Province.vue
+++ b/src/modules/01_metadata/components/personal/07_Province.vue
@@ -18,9 +18,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
- * Teble
- */
+/** Teble*/
 const columns = [
   {
     name: "name",
@@ -73,6 +71,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const filterKeyword = ref<string>(""); // คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -242,6 +243,7 @@ onMounted(async () => {
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/08_EducationLevel.vue b/src/modules/01_metadata/components/personal/08_EducationLevel.vue
index d74c02fd..be31fb7b 100644
--- a/src/modules/01_metadata/components/personal/08_EducationLevel.vue
+++ b/src/modules/01_metadata/components/personal/08_EducationLevel.vue
@@ -80,6 +80,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -241,10 +244,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/province/01_District.vue b/src/modules/01_metadata/components/personal/province/01_District.vue
index a1c10e00..8913ca4b 100644
--- a/src/modules/01_metadata/components/personal/province/01_District.vue
+++ b/src/modules/01_metadata/components/personal/province/01_District.vue
@@ -25,9 +25,7 @@ const {
   dialogRemove,
 } = useCounterMixin();
 
-/**
- * Table
- */
+/** Table*/
 const columns = [
   {
     name: "name",
@@ -80,6 +78,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const id = ref<string>(route.params.id as string); // id จังหวัด
 const filterKeyword = ref<string>(""); //คำค้นหา
@@ -288,10 +289,10 @@ onMounted(async () => {
         row-key="name"
         flat
         bordered
-        :paging="true"
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue b/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
index a27e0ad2..f667cc06 100644
--- a/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
+++ b/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
@@ -25,9 +25,7 @@ const {
   dialogRemove,
 } = useCounterMixin();
 
-/**
- * Table
- */
+/** Table*/
 const columns = [
   {
     name: "name",
@@ -92,6 +90,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const id = ref<string>(route.params.id as string); // เขต/อำเภอ
 const rows = ref<FormSubDistrict[]>([]); // ข้อมูลรายการแขวง/ตำบล
@@ -298,6 +299,7 @@ onMounted(async () => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
diff --git a/src/modules/01_metadata/components/position/02_Type.vue b/src/modules/01_metadata/components/position/02_Type.vue
index fe8b35db..ea3f35cb 100644
--- a/src/modules/01_metadata/components/position/02_Type.vue
+++ b/src/modules/01_metadata/components/position/02_Type.vue
@@ -48,7 +48,9 @@ const 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: "createdAt",
diff --git a/src/modules/01_metadata/views/05_insignia.vue b/src/modules/01_metadata/views/05_insignia.vue
index 5faecca8..9fec6436 100644
--- a/src/modules/01_metadata/views/05_insignia.vue
+++ b/src/modules/01_metadata/views/05_insignia.vue
@@ -80,7 +80,7 @@ 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" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
diff --git a/src/modules/02_users/views/01_user.vue b/src/modules/02_users/views/01_user.vue
index 60b7534b..a2f5bddb 100644
--- a/src/modules/02_users/views/01_user.vue
+++ b/src/modules/02_users/views/01_user.vue
@@ -44,7 +44,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: (row) =>
       (currentPage.value - 1) * pageSize.value + rows.value.indexOf(row) + 1,
     headerStyle: "font-size: 14px",
@@ -54,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "username",
     align: "left",
     label: "ชื่อผู้ใช้งาน",
-    sortable: true,
+    sortable: false,
     field: "username",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -63,7 +63,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "email",
     align: "left",
     label: "อีเมล",
-    sortable: true,
+    sortable: false,
     field: "email",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -72,7 +72,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "firstname",
     align: "left",
     label: "ชื่อ",
-    sortable: true,
+    sortable: false,
     field: "firstname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -81,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastname",
     align: "left",
     label: "นามสกุล",
-    sortable: true,
+    sortable: false,
     field: "lastname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -90,7 +90,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "role",
     align: "left",
     label: "สิทธิ์",
-    sortable: true,
+    sortable: false,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     field: (row) => {
@@ -102,7 +102,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "enabled",
     align: "left",
     label: "สถานะการใช้งาน",
-    sortable: true,
+    sortable: false,
     field: "enabled",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
diff --git a/src/modules/02_users/views/02_rolesAndPermissions.vue b/src/modules/02_users/views/02_rolesAndPermissions.vue
index 7a0bdb76..e8c0c2fd 100644
--- a/src/modules/02_users/views/02_rolesAndPermissions.vue
+++ b/src/modules/02_users/views/02_rolesAndPermissions.vue
@@ -36,8 +36,8 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
-    field: (row) => rows.value.indexOf(row) + 1,
+    sortable: false,
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -226,7 +226,10 @@ onMounted(() => {
         <template v-slot:body="props">
           <q-tr :props="props">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
+              <div v-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
diff --git a/src/modules/02_users/views/03_permissionsView.vue b/src/modules/02_users/views/03_permissionsView.vue
index 9716266b..ccaf097c 100644
--- a/src/modules/02_users/views/03_permissionsView.vue
+++ b/src/modules/02_users/views/03_permissionsView.vue
@@ -170,7 +170,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionName",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -179,7 +179,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionField",
     align: "left",
     label: "สายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -188,7 +188,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posTypeName",
     align: "left",
     label: "ประเภทตำเเหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -197,7 +197,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posLevelName",
     align: "left",
     label: "ระดับตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -206,7 +206,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posExecutiveName",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "posExecutiveName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -215,7 +215,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionExecutiveField",
     align: "left",
     label: "ด้านทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "positionExecutiveField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -224,7 +224,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionArea",
     align: "left",
     label: "ด้าน/สาขา",
-    sortable: true,
+    sortable: false,
     field: "positionArea",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
diff --git a/src/modules/02_users/views/05_responsIbilities.vue b/src/modules/02_users/views/05_responsIbilities.vue
index 529a3d8b..e1b75d0d 100644
--- a/src/modules/02_users/views/05_responsIbilities.vue
+++ b/src/modules/02_users/views/05_responsIbilities.vue
@@ -164,7 +164,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionName",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -173,7 +173,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionField",
     align: "left",
     label: "สายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -182,7 +182,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posTypeName",
     align: "left",
     label: "ประเภทตำเเหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -191,7 +191,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posLevelName",
     align: "left",
     label: "ระดับตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -200,7 +200,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posExecutiveName",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "posExecutiveName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -209,7 +209,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionExecutiveField",
     align: "left",
     label: "ด้านทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "positionExecutiveField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -218,7 +218,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionArea",
     align: "left",
     label: "ด้าน/สาขา",
-    sortable: true,
+    sortable: false,
     field: "positionArea",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
diff --git a/src/modules/02_users/views/page01_ManagementRoleUser.vue b/src/modules/02_users/views/page01_ManagementRoleUser.vue
index 6165146f..6dbe385f 100644
--- a/src/modules/02_users/views/page01_ManagementRoleUser.vue
+++ b/src/modules/02_users/views/page01_ManagementRoleUser.vue
@@ -32,8 +32,8 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
-    field: (row) => rows.value.indexOf(row) + 1,
+    sortable: false,
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -185,7 +185,10 @@ onMounted(async () => {
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
+              <div v-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
diff --git a/src/modules/05_command/views/salaryLists.vue b/src/modules/05_command/views/salaryLists.vue
index e94e9012..47084315 100644
--- a/src/modules/05_command/views/salaryLists.vue
+++ b/src/modules/05_command/views/salaryLists.vue
@@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "isActive",
     align: "center",
     label: "สถานะการใช้งาน",
-    sortable: false,
+    sortable: true,
     field: "isActive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",