diff --git a/src/modules/03_recruiting/components/Table1.vue b/src/modules/03_recruiting/components/Table1.vue
new file mode 100644
index 000000000..a7f67f171
--- /dev/null
+++ b/src/modules/03_recruiting/components/Table1.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="q-pb-sm row">
+    <HeaderTop
+      v-model:edit="editBtn"
+      :header="name"
+      :icon="icon"
+      :add="checkAdd"
+      :addleave="checkAddLeave"
+      :addData="true"
+      :history="false"
+      :disable="statusEdit"
+      :iconAdd="iconAdd"
+      :isEdit="true"
+    />
+    <q-space />
+    <div class="items-center" style="display: flex" v-if="headerShow">
+      <!-- ค้นหาข้อความใน table -->
+      <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        style="max-width: 200px"
+        class="q-ml-sm"
+      >
+        <template v-slot:append>
+          <q-icon v-if="inputfilter == ''" name="search" />
+          <q-icon
+            v-if="inputfilter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+      <!-- แสดงคอลัมน์ใน table -->
+      <q-select
+        :model-value="inputvisible"
+        @update:model-value="updateVisible"
+        :display-value="$q.lang.table.columns"
+        multiple
+        outlined
+        dense
+        :options="attrs.columns"
+        options-dense
+        option-value="name"
+        map-options
+        emit-value
+        style="min-width: 150px"
+        class="gt-xs q-ml-sm"
+      />
+    </div>
+  </div>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
+        <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
+        <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 v-if="name !== 'การลา'" />
+        <q-th auto-width v-if="name === 'ประวัติการเปลี่ยนชื่อ-นามสกุล'" />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const editBtn = ref<boolean>(false);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  inputfilter: String,
+  name: String,
+  icon: String,
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  inputvisible: Array,
+  editvisible: Boolean,
+  headerShow: {
+    type: Boolean,
+    default: true,
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const checkAddLeave = () => {
+  props.addleave();
+};
+
+const checkAdd = () => {
+  props.add();
+};
+
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+
+const cancel = async () => {
+  updateEdit(!props.editvisible);
+  props.cancel();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/03_recruiting/components/top1.vue b/src/modules/03_recruiting/components/top1.vue
new file mode 100644
index 000000000..6236a8bc9
--- /dev/null
+++ b/src/modules/03_recruiting/components/top1.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <!-- <div v-if="profileStore.isEdit"> -->
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <!-- <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn> -->
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <!-- </div> -->
+
+    <q-space />
+    <q-btn
+      color="info"
+      flat
+      dense
+      round
+      size="14px"
+      icon="mdi-history"
+      v-if="history"
+      @click="historyClick"
+    >
+      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+<script setup lang="ts">
+import { useProfileDataStore } from "@/modules/04_registry/store";
+const profileStore = useProfileDataStore();
+
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
+<style scoped></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index f8d3cdff3..caac16aa4 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -1166,7 +1166,7 @@ import type {
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import ProfileTable from "@/modules/03_recruiting/components/Table1.vue";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();