diff --git a/src/modules/07_insignia/components/3_result/TabDocuments.vue b/src/modules/07_insignia/components/3_result/TabDocuments.vue
index 3da85d51c..c53a43636 100644
--- a/src/modules/07_insignia/components/3_result/TabDocuments.vue
+++ b/src/modules/07_insignia/components/3_result/TabDocuments.vue
@@ -17,7 +17,14 @@ import type {
 /** use*/
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { success, messageError, hideLoader, dialogConfirm, showLoader } = mixin;
+const {
+  success,
+  messageError,
+  hideLoader,
+  dialogConfirm,
+  showLoader,
+  onSearchDataTable,
+} = mixin;
 
 /**
  * props
@@ -36,6 +43,7 @@ const filterKeyword = ref<string>(""); //คำค้นหา
 
 /** คอลัมน์ตาราง*/
 const rows2 = ref<DataDocuments[]>([]);
+const rowsMain = ref<DataDocuments[]>([]);
 const colums2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -58,13 +66,6 @@ const colums2 = ref<QTableProps["columns"]>([
     field: "annotation",
     sortable: true,
   },
-  {
-    name: "file",
-    align: "left",
-    label: "ไฟล์เอกสาร",
-    field: "file",
-    sortable: false,
-  },
 ]);
 const visibleColumnsReference = ref<String[]>([
   "no",
@@ -90,6 +91,7 @@ async function getRequest() {
           file: item.pathName,
         });
       });
+      rowsMain.value = rows2.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -113,7 +115,8 @@ function save() {
         dataAppend.append("File", fileUpload.value);
         await http
           .put(config.API.requestDocNote(props.roundId as string), dataAppend)
-          .then(() => {
+          .then(async () => {
+            await getRequest();
             success($q, "บันทึกข้อมูลสำเร็จ");
           })
           .catch((e) => {
@@ -126,7 +129,6 @@ function save() {
 
             // reset เพื่อไม่ให้ฟอร์มแจ้งเตือ validate หลังบันทึกเสร็จแล้วล้างค่าฟิลด์ต่างๆ
             myForm.value.reset();
-            getRequest();
             hideLoader();
           });
       });
@@ -134,13 +136,6 @@ function save() {
   });
 }
 
-/**
- * function  resetFilter
- */
-function resetFilterRef() {
-  filterKeyword.value = "";
-}
-
 const pagination = ref({
   sortBy: "filename",
   descending: true,
@@ -148,6 +143,13 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+function serchDataTable() {
+  rows2.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    colums2.value ? colums2.value : []
+  );
+}
 /**hook*/
 onMounted(async () => {
   await getRequest();
@@ -217,48 +219,42 @@ onMounted(async () => {
           </q-form>
         </q-card>
         <div class="row col-12">
-          <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilterRef"
-              />
-            </template>
-          </q-input>
+          <div class="col-12 row">
+            <q-space />
+            <div class="row q-col-gutter-sm">
+              <q-input
+                standout
+                dense
+                v-model="filterKeyword"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.pervent="serchDataTable"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
 
-          <q-select
-            v-model="visibleColumnsReference"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="colums2"
-            option-value="name"
-            
-            style="min-width: 140px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
+              <q-select
+                v-model="visibleColumnsReference"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="colums2"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
+          </div>
         </div>
         <div class="col-12 q-pt-sm">
           <d-table
             :columns="colums2"
             :rows="rows2"
-            :filter="filterKeyword"
             row-key="fileName"
             :visible-columns="visibleColumnsReference"
             v-model:pagination="pagination"
@@ -268,6 +264,7 @@ onMounted(async () => {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
+                <q-th auto-width />
               </q-tr>
             </template>
 
diff --git a/src/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue b/src/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue
index 0bf3c88ee..82a884174 100644
--- a/src/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue
+++ b/src/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue
@@ -24,7 +24,14 @@ import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.v
 const router = useRouter();
 const DataStore = useAllocateDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+  onSearchDataTable,
+} = mixin;
 
 const attrs = ref<any>(useAttrs());
 const $q = useQuasar(); //ใช้ noti quasar
@@ -32,6 +39,7 @@ const route = useRoute();
 
 /** ข้อมูล Table*/
 const rows = ref<ResponseAllocate[]>([]);
+const rowsMain = ref<ResponseAllocate[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -104,9 +112,7 @@ const stat = ref({
   remain: 0, //จำนวนเครื่องราช ฯ คงเหลือ
 });
 
-/**
- * funcion เรียกข้อมูล stat
- */
+/** funcion เรียกข้อมูล stat*/
 async function fetchDashboard() {
   await http
     .get(config.API.insigniaManageOrgDashboard(id.value))
@@ -122,11 +128,8 @@ async function fetchDashboard() {
     });
 }
 
-/**
- * funcion เรียกข้อมูลรายชื่อ หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ ตริตาภรณ์มงกุฎไทย ()
- */
+/** funcion เรียกข้อมูลรายชื่อ หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ ตริตาภรณ์มงกุฎไทย ()*/
 async function fetchListData() {
-  // showLoader();
   await http
     .get(config.API.insigniaManageOrg(id.value))
     .then((res) => {
@@ -137,18 +140,14 @@ async function fetchListData() {
         allocate: e.allocate,
         remain: e.remain,
       }));
+      rowsMain.value = rows.value;
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      // hideLoader();
     });
 }
 
-/**
- * funcion เรียกข้อมูลหน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์
- */
+/** funcion เรียกข้อมูลหน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์*/
 async function fetchOrgList() {
   http
     .get(config.API.activeOrganization)
@@ -173,16 +172,12 @@ async function fetchOrgList() {
     });
 }
 
-/**
- * funcion ย้อนกลับหน้าจัดสรรเครื่องราชอิสริยาภรณ์
- */
+/** funcion ย้อนกลับหน้าจัดสรรเครื่องราชอิสริยาภรณ์*/
 function backHistory() {
   router.push(`/insignia/allocate`);
 }
 
-/**
- * funcion closePopup
- */
+/** funcion closePopup*/
 function close() {
   modal.value = false;
   modalEdit.value = false;
@@ -278,10 +273,14 @@ function clickAdd() {
 /** ค้นหาในตาราง*/
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
 
 /** Hook*/
 onMounted(async () => {
@@ -332,9 +331,10 @@ onMounted(async () => {
       </div>
     </div>
   </q-card>
+
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row q-col-gutter-sm">
-      <div class="row col-12 q-col-gutter-sm">
+      <div class="row col-12">
         <div>
           <q-btn
             @click="clickAdd()"
@@ -348,49 +348,42 @@ onMounted(async () => {
           </q-btn>
         </div>
         <q-space />
+        <div class="row q-col-gutter-sm">
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            @keydown.enter.pervent="serchDataTable"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
 
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          style="min-width: 140px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
+        </div>
       </div>
+
       <div class="col-12">
         <d-table
           ref="table"
           :columns="columns"
           :rows="rows"
-          :filter="filterKeyword"
           row-key="id"
           flat
           bordered
diff --git a/src/modules/07_insignia/views/03_ResultMain.vue b/src/modules/07_insignia/views/03_ResultMain.vue
index 979f6b022..2164b9252 100644
--- a/src/modules/07_insignia/views/03_ResultMain.vue
+++ b/src/modules/07_insignia/views/03_ResultMain.vue
@@ -8,27 +8,22 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
- * import Typฃ
- */
+/** import Type*/
 import type { QTableProps, QInput } from "quasar";
 import type {
   OptionData,
   DataPerson,
+  DataRecord,
 } from "@/modules/07_insignia/interface/index/Main";
 import type { ResponseRound } from "@/modules/07_insignia/interface/response/Main";
 
-/**
- * import Components
- */
+/** import Components*/
 import DialogHeader from "@/components/DialogHeader.vue";
 import Dialogbody from "@/modules/07_insignia/components/3_result/DialogReceive_Return.vue"; //รับ-คืนเครื่องราชฯ
 import DialogForm from "@/modules/07_insignia/components/3_result/DialogResults.vue"; //บันทึกผล
 import fileUploadview from "../components/3_result/TabDocuments.vue";
 
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const DataStore = useResultDataStore();
 const mixin = useCounterMixin();
@@ -39,11 +34,10 @@ const {
   hideLoader,
   messageError,
   success,
+  onSearchDataTable,
 } = mixin;
 
-/**
- * ตัวแปร
- */
+/** ตัวแปร*/
 const tab = ref<string>(""); //Tab รายการ
 const selectRound = ref<string>(""); //รอบการเสนอขอ
 const selectRoundOption = ref<OptionData[]>([]); //รายการรอบการเสนอขอ
@@ -63,9 +57,8 @@ const dateCheckReceive = ref<string>(); //วันที่รับ
 const dateCheckReturn = ref<string>(); //วันที่คืน
 const dataModal = ref<DataPerson>(); //ช้อมูลที่ต้องการ
 
-/**
- * ข้อมูล Tabla
- */
+/** ข้อมูล Tabla*/
+const rowsMain = ref<DataRecord[]>([]);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
@@ -243,9 +236,7 @@ const visibleColumns = ref<String[]>([
   "address",
 ]);
 
-/**
- *function เรียกรอบการเสนอขอพระราชทานเครื่องราช
- */
+/** function เรียกรอบการเสนอขอพระราชทานเครื่องราช*/
 async function fecthRound() {
   showLoader();
   await http
@@ -269,9 +260,7 @@ async function fecthRound() {
     });
 }
 
-/**
- * function เรียกประเภทเครื่องราช
- */
+/** function เรียกประเภทเครื่องราช*/
 async function fecthInsignia() {
   await http
     .get(config.API.insigniaOrg)
@@ -284,9 +273,7 @@ async function fecthInsignia() {
     });
 }
 
-/**
- * function เรียกระดับเครื่องราช
- */
+/** function เรียกระดับเครื่องราช*/
 async function fecthInsigniaType() {
   await http(config.API.insigniaTypeOrg)
     .then(async (res) => {
@@ -300,9 +287,7 @@ async function fecthInsigniaType() {
     });
 }
 
-/**
- * function เลือกประเภทเครื่องราช
- */
+/** function เลือกประเภทเครื่องราช*/
 function selectorInsignia() {
   fecthlistInsignia();
 }
@@ -318,9 +303,7 @@ function selectorRound(round: string) {
   fecthlistInsignia();
 }
 
-/**
- * function เรียกรายชื่อบันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ
- */
+/** function เรียกรายชื่อบันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ */
 async function fecthlistInsignia() {
   showLoader();
   let data = {
@@ -332,7 +315,8 @@ async function fecthlistInsignia() {
     .post(config.API.noteSearch(), data)
     .then(async (res) => {
       let data = await res.data.result;
-      DataStore.fetchlistinsignia(data);
+      await DataStore.fetchlistinsignia(data);
+      rowsMain.value = DataStore.rows;
     })
     .catch((err) => {
       messageError($q, err);
@@ -377,25 +361,19 @@ function uploadFile(event: any, action: string) {
   }
 }
 
-/**
- * function ปิด popup ทั้งหมด
- */
+/** function ปิด popup ทั้งหมด*/
 function close() {
   modal.value = false;
   ModalDialog.value = false;
 }
 
-/**
- * function เปิด popup บันทึกผล เพิ่มคน
- */
+/** function เปิด popup บันทึกผล เพิ่มคน*/
 function addData() {
   modal.value = true;
   action.value = "addData";
 }
 
-/**
- * function  เปิด popup บันทึกผล แก้ไขข้อมูล
- */
+/** function  เปิด popup บันทึกผล แก้ไขข้อมูล*/
 function editData(data: DataPerson) {
   personId.value = data.id;
   profileType.value = data.profileType;
@@ -403,11 +381,12 @@ function editData(data: DataPerson) {
   modal.value = true;
 }
 
-/**
- * ข้อมูล ไฟล์
- */
+/** ข้อมูล ไฟล์*/
 const modelPerview = ref<boolean>(false);
+const filterPreview = ref<string>("");
 const rowspreview = ref<any[]>([]);
+const rowspreviewMain = ref<any[]>([]);
+
 const typepreview = ref<string>("");
 const fileInsignia = ref<any>(null);
 
@@ -449,6 +428,8 @@ function perviewfile(event: any, actionType: string) {
           typepay: e.typePayment,
           address: e.address,
         }));
+
+        rowspreviewMain.value = rowspreview.value;
         modelPerview.value = true;
       })
       .catch((err) => {
@@ -462,13 +443,11 @@ function perviewfile(event: any, actionType: string) {
 
 function closeDialogPerview() {
   modelPerview.value = false;
+  filterPreview.value = "";
+  rowspreview.value = [];
+  rowspreviewMain.value = [];
 }
 
-const resetFilter = () => {
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
 /**
  * function เปิด popup รับ-คืนเครื่องราชฯ
  * @param data ข้อมูลที่ต้องการแก่้ไข
@@ -539,12 +518,29 @@ const paginationLabel = (start: number, end: number, total: number) => {
   else return start + "-" + end + " ใน " + total;
 };
 
+function serchDataTable() {
+  DataStore.rows = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function serchDataTableDailog() {
+  rowspreview.value = onSearchDataTable(
+    filterPreview.value,
+    rowspreviewMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * callback function จำทำงานเมื่อ tab มีการเปลี่ยนแปลง
  */
 watch(tab, () => {
   if (tab.value !== "doc") {
     DataStore.rows = [];
+    rowsMain.value = [];
     DataStore.insignia = "";
     fecthlistInsignia();
     insigniaTypeOption.value = DataStore.insigniaOp.filter(
@@ -735,19 +731,13 @@ onMounted(() => {
                 v-model="filter"
                 ref="filterRef"
                 outlined
-                debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
                 class="q-ml-sm"
+                @keydown.enter.pervent="serchDataTable"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -879,7 +869,6 @@ onMounted(() => {
             :rows="DataStore.rows"
             :columns="columns"
             :visible-columns="visibleColumns"
-            :filter="filter"
             row-key="name"
             :pagination-label="paginationLabel"
             v-model:pagination="pagination"
@@ -979,32 +968,67 @@ onMounted(() => {
 
   <!-- ยืนยันรายการข้อมูล -->
   <q-dialog v-model="modelPerview" persistent>
-    <q-card style="min-width: 80vw">
+    <q-card style="min-width: 80%">
       <DialogHeader tittle="ยืนยันรายการข้อมูล" :close="closeDialogPerview" />
-      <q-card-section class="q-pt-none">
-        <d-table
-          :rows="rowspreview"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :filter="filter"
-          row-key="name"
-        >
-          <template v-slot:body-cell="props">
-            <q-td :props="props">
-              <div v-if="props.col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else>
-                {{ props.value ? props.value : "-" }}
-              </div>
-            </q-td>
-          </template>
-        </d-table>
+      <q-separator />
+      <q-card-section>
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="row col-12">
+            <q-space />
+            <div class="row q-col-gutter-sm">
+              <q-input
+                dense
+                outlined
+                v-model="filterPreview"
+                label="ค้นหา"
+                @keydown.enter.pervent="serchDataTableDailog"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <d-table
+              :rows="rowspreview"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              row-key="name"
+            >
+              <template v-slot:body-cell="props">
+                <q-td :props="props">
+                  <div v-if="props.col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else>
+                    {{ props.value ? props.value : "-" }}
+                  </div>
+                </q-td>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
-      <q-card-actions align="right" class="text-primary">
+      <q-separator />
+
+      <q-card-actions align="right">
         <q-btn
           unelevated
-          dense
           color="public"
           label="บันทึก"
           @click="uploadFile(fileInsignia, typepreview)"
diff --git a/src/modules/07_insignia/views/04_AllocateMain.vue b/src/modules/07_insignia/views/04_AllocateMain.vue
index c56d759eb..2719de617 100644
--- a/src/modules/07_insignia/views/04_AllocateMain.vue
+++ b/src/modules/07_insignia/views/04_AllocateMain.vue
@@ -24,7 +24,14 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
 const DataStore = useAllocateDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogRemove,
+  success,
+  onSearchDataTable,
+} = mixin;
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -42,6 +49,7 @@ const loadView = ref<boolean>(false); //แสดงข้อมูล
 /** ข้อมูล Table*/
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
+const rowsMain = ref<any[]>([]);
 const rowData = ref<DataAllocate>(); //ข้อมูลที่ต้องการแก้ไข
 const columns = ref<QTableProps["columns"]>([
   {
@@ -204,7 +212,8 @@ async function fecthlistInsignia() {
     .get(config.API.insigniaManageType(tab.value, Number(roundYear.value)))
     .then(async (res) => {
       let data = await res.data.result;
-      DataStore.listinsignia(data);
+      await DataStore.listinsignia(data);
+      rowsMain.value = DataStore.rows;
     })
     .catch((err) => {
       messageError($q, err);
@@ -351,7 +360,6 @@ function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "filterInsigniaOp") {
-      DataStore.insignia = val ? (undefined as any) : DataStore.insignia;
       filterInsigniaOp.value = insigniaOp.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
@@ -370,6 +378,14 @@ function clearInsigniaFilters(name: string) {
   }
 }
 
+function serchDataTable() {
+  DataStore.rows = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  *  function callback ทำงานเมื่อ Tab มีการเปลี่ยน
  */
@@ -466,6 +482,8 @@ onMounted(async () => {
                 option-value="id"
                 :readonly="false"
                 use-input
+                hide-selected
+                fill-input
                 :borderless="false"
                 style="min-width: 350px"
                 @update:model-value="
@@ -522,19 +540,13 @@ onMounted(async () => {
                 v-model="filter"
                 ref="filterRef"
                 outlined
-                debounce="300"
+                @keydown.enter.pervent="serchDataTable"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
                 class="q-ml-sm"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -558,7 +570,6 @@ onMounted(async () => {
             ref="table"
             :columns="columns"
             :rows="DataStore.rows"
-            :filter="filter"
             row-key="id"
             flat
             bordered
diff --git a/src/modules/07_insignia/views/05_BorrowMain.vue b/src/modules/07_insignia/views/05_BorrowMain.vue
index 0efb179fb..5885d0ecd 100644
--- a/src/modules/07_insignia/views/05_BorrowMain.vue
+++ b/src/modules/07_insignia/views/05_BorrowMain.vue
@@ -19,7 +19,7 @@ import DialogForm from "@/modules/07_insignia/components/5_Borrow/DialogForm.vue
 const $q = useQuasar();
 const DataStore = useBrrowDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader, messageError, onSearchDataTable } = mixin;
 
 const tab = ref<string>("");
 
@@ -239,6 +239,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
+const rowsMain = ref<any[]>([]);
 const pagination = ref({
   sortBy: "name",
   descending: false,
@@ -317,17 +318,15 @@ async function fecthRound() {
 async function fecthInsignia() {
   await http
     .get(config.API.insigniaOrg)
-    .then((res) => {
+    .then(async (res) => {
       let data = res.data.result;
-      DataStore.fetchDataInsignia(data);
+      await DataStore.fetchDataInsignia(data);
+      insigniaList.value = DataStore.insigniaOp.filter(
+        (x: any) => x.type == tab.value || x.type == ""
+      );
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(async () => {
-      insigniaList.value = await DataStore.insigniaOp.filter(
-        (x: any) => x.type == tab.value || x.type == ""
-      );
     });
 }
 
@@ -371,6 +370,7 @@ async function fecthlistInsignia() {
     )
     .then(async (res) => {
       await DataStore.fetchlistinsignia(res.data.result);
+      rowsMain.value = DataStore.rows;
     })
     .catch((err) => {
       messageError($q, err);
@@ -429,17 +429,14 @@ function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "employeeClassOps") {
-      // DataStore.employeeClass = "";
       employeeClassOps.value = DataStore.employeeClassOps.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "fileterInsigniaList") {
-      // DataStore.insignia = null as any;
       fileterInsigniaList.value = insigniaList.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterSelectRoundAllOption") {
-      // yearRound.value = null as any;
       filterSelectRoundAllOption.value = selectRoundAllOption.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
@@ -447,12 +444,22 @@ function filterSelector(val: string, update: Function, name: string) {
   });
 }
 
+function serchDataTable() {
+  DataStore.rows = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** function callblack ทำงานเมือมีการเปลี่ยน Tab*/
 watch(tab, async () => {
   insigniaList.value = await DataStore.insigniaOp.filter(
     (x: any) => x.type == tab.value || x.type == ""
   );
   DataStore.insignia = "";
+  filter.value = "";
+  rowsMain.value = [];
   fileterInsigniaList.value = insigniaList.value;
   fecthlistInsignia();
 });
@@ -495,71 +502,70 @@ onMounted(async () => {
       >
         <div class="row col-12">
           <div class="row col-12 q-col-gutter-sm">
-            <q-select
-              v-model="yearRound"
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
-              emit-value
-              map-options
-              use-input
-              option-label="name"
-              :options="filterSelectRoundAllOption"
-              option-value="year"
-              :borderless="false"
-              style="min-width: 150px"
-              @update:model-value="selectorRound"
-              @filter="(inputValue: any,
+            <div>
+              <q-select
+                v-model="yearRound"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
+                emit-value
+                map-options
+                use-input
+                hide-selected
+                fill-input
+                option-label="name"
+                :options="filterSelectRoundAllOption"
+                option-value="year"
+                :borderless="false"
+                style="width: 340px"
+                @update:model-value="selectorRound"
+                @filter="(inputValue: string,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filterSelectRoundAllOption'
                 )"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
             <q-space />
 
-            <q-input
-              class="col-xs-12 col-sm-3 col-md-2"
-              standout
-              dense
-              v-model="filter"
-              ref="filterRef"
-              outlined
-              debounce="300"
-              placeholder="ค้นหา"
-            >
-              <template v-slot:append>
-                <q-icon v-if="filter == ''" name="search" />
-                <q-icon
-                  v-if="filter !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="resetFilter"
-                />
-              </template>
-            </q-input>
+            <div class="row q-col-gutter-sm">
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.pervent="serchDataTable"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
 
-            <q-select
-              v-model="visibleColumns"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              style="min-width: 140px"
-              class="col-xs-12 col-sm-3 col-md-2"
-            />
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
           </div>
 
           <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
@@ -569,6 +575,8 @@ onMounted(async () => {
                 dense
                 outlined
                 use-input
+                hide-selected
+                fill-input
                 lazy-rules
                 hide-bottom-space
                 :label="`${'เครื่องราชฯ'}`"
@@ -586,7 +594,7 @@ onMounted(async () => {
                     DataStore.employeeClass
                   )
                 "
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
     doneFn: Function) => filterSelector(inputValue, doneFn, 'fileterInsigniaList'
     )"
               >
@@ -611,6 +619,8 @@ onMounted(async () => {
                 :label="`${'สถานภาพ'}`"
                 emit-value
                 use-input
+                hide-selected
+                fill-input
                 map-options
                 option-label="name"
                 :options="employeeClassOps"
@@ -624,7 +634,7 @@ onMounted(async () => {
                     DataStore.employeeClass
                   )
                 "
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
     doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
     )"
               >
@@ -663,7 +673,6 @@ onMounted(async () => {
             :rows="DataStore.rows"
             :columns="columns"
             :visible-columns="visibleColumns"
-            :filter="filter"
             row-key="id"
             v-model:pagination="pagination"
             :paging="true"